[안드로이드 중급] 툴바(Toolbar)

툴바(Toolbar)는 안드로이드 5.0(21버전)에 도입이되었다.

툴바의 형태인 앱바는 5.0 이전에 액션바라고 불렸다.

 

기존의 액션바는 고정된 상태이지만,

툴바는 커스터마이징이 자유로워져서 사용자가 원하는 디자인을 만들 수 있다.

 

툴바를 추가하는 방법은 아래와 같다.

1. AndroidManifest.xml에 Theme.AppCompat.Light.NoActionBar 설정을 한다.
2. 레이아웃에 툴바를 추가한다.
3. 액티비티에서 툴바 객체를 생성한다.
4. 생성한 툴바 객체를 setSupportActionBar() 메소드의 인자로 지정하여 호출한다.
5. 툴바 객체나 getSupportActionBar()를 사용하여 속성 수정한다.

간단한 예제를 구현해보도록 한다.

새로고침, 검색, 공유 메뉴를 만들고, 각각의 속성을 달리해서 비교해보자.

 

먼저 매니페스트에 테마를 변경해준다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.practice.demotoolbar">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

메인 액티비티에 툴바를 선언한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">
    
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar_main"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

툴바의 메뉴로 사용될 리소스 파일을 선언한다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_refresh"
        android:icon="@drawable/ic_refresh"
        android:orderInCategory="1"
        android:title="@string/refresh"
        app:showAsAction="always|withText" />

    <item
        android:id="@+id/menu_search"
        android:icon="@android:drawable/ic_menu_search"
        android:orderInCategory="0"
        android:title="@string/search"
        app:showAsAction="always" />

    <item
        android:id="@+id/menu_share"
        android:icon="@android:drawable/ic_menu_share"
        android:orderInCategory="1"
        android:title="@string/share"
        app:showAsAction="never" />
</menu>

여기서 showAsAction 속성은 메뉴가 어떤식으로 보여지는가를 뜻한다.

1. Always : 항상 툴바에 표시된다.
2. never : 툴바에 표시하지 않으며, 오버플러우메뉴에 속해지게 된다.
3. ifRoom : 공간이 여유가 있으면 툴바에 표시하게 되고, 여유가 없다면 오버플로우 메뉴에 속해지게된다.
4. withText : 아이콘이 있다면, 글자와 함께 표시가 된다.
5. collapseActionView : SearchView와 함께 사용되는데, 검색창이 확장되면서 가려질 때 해당 메뉴가 오버플로우 메뉴에 속하게 되며, 상호작용한다.

orderInCategory 속성은 메뉴의 순서를 정하는 것을 말하고,

작은 수가 제일 앞에 위치하게 된다.

always와 never은 메뉴의 순서를 각각 구별하기에 따로 지정해주어도 된다.

 

메인액티비티 클래스에서는 툴바의 객체를 만들고 setSupportActionBar()의 인자로 넘겨주어 호출한다.

그리고 getSupportActionBar()를 통해 툴바를 가져오고 해당 툴바에 속성을 부여한다.

 

package com.practice.demotoolbar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setSupportActionBar(toolbar_main)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu_main, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            R.id.menu_refresh -> {
                Toast.makeText(this, "select refresh button",Toast.LENGTH_SHORT).show()
            }

            R.id.menu_search -> {
                Toast.makeText(this, "select search button",Toast.LENGTH_SHORT).show()
            }

            R.id.menu_share -> {
                Toast.makeText(this, "select share button",Toast.LENGTH_SHORT).show()
            }
        }

        return super.onOptionsItemSelected(item)
    }
}

 

setDisplayHomeAsUpEnabled(boolean) 메소드는 툴바에서 뒤로가기 버튼을 활성화 할 것인가를 결정해준다.

 

onCreateOptionMenu는 메뉴를 만들어주는 역할을 하며,

내가 만든 메뉴 리소스 파일을 가져와서 inflate 해주면 메뉴가 생성된다.

 

onOptionsItemSelected는 메뉴를 클릭하거나 선택했을 경우 불리게 되는 메소드이며,

파라미터로 넘어온 item에서 id를 식별해서 메뉴에 맞게 이벤트를 처리하면된다.

결과 화면

결론

툴바가 어떻게 생겨난 것인지 알아보았다.

메뉴에대한 속성 값을 설정하는 방법도 알아보았다.

아직 의문인 것이 있다면, withText는 아이콘과 텍스트 모두 나타내기 위해서 사용된다고 정의되어 있다.

하지만 구현해본 결과 텍스트가 보여지지 않고 있다. 왜 안나오는 것일까? 궁금하다.

간단한 툴바 예제이지만, 앞으로 툴바는 자주 사용되기 때문에 많이 마주하면서 커스터마이징도 하게 될 것 같다.

링크

안드로이드 액션바(ActionBar) 기본 사용법. (Android ActionBar)

의문해결

withText를 사용할 경우 아이콘과 텍스트 모두 나타내기 위해서는

아이콘과 텍스트를 모두 나타낼 공간이 있어야지 가능하다고 한다.

아직 확인은 해보지 못했지만 화면 회전을 하거나 하면 가능할 것 같다.