안드로이드 - 커스텀 액션바 만들기(toolbar)

0.

앱을 개발할 때 거의 모든 경우에 기본적으로 주어지는 액션바를 제거하고 본인의 의도에 맞는 액션바를 제작합니다.

이때 커스텀 액션바를 구현하기 위해 쉬운 방법으로 toolbar를 사용한 방법을 알아보겠습니다.

 

1. Apptheme 변경

먼저 res - values - style.xml 파일을 수정합니다.

기본적으로 앱에는 AppTheme라는 스타일이 적용되어 있는데 이 스타일을 .NoActionBar로 변경해줘야 디폴트 액션바를 없앨 수 있습니다

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

 

만약 새로 만든 커스텀 스타일을 앱에 적용한 상태라면 해당 스타일 이름의 내용을 변경해주면 됩니다.

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

    <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">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

 

그다음 메니페스트 파일을 수정합니다. 저는 기본적으로 작성된것을 그대로 가져왔으나 여러분은 <application>태그 사이의 android:theme에 .NoActionBar를 적용한 스타일을 적용합니다.

만약 앱전체가 아닌 액티비티 하나에만 스타일을 적용하고 싶을 경우 해당 activity태그 사이에 스타일을 적용시키면 됩니다.

 

2. 메인 액티비티

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textSize="20dp"
            android:text="Title">

        </TextView>

    </androidx.appcompat.widget.Toolbar>

</androidx.constraintlayout.widget.ConstraintLayout>

메인 엑티비티의 xml파일입니다. 툴바하나를 생성하고 그 안에 텍스트뷰를 중앙에 오도록 합니다.

 

        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        actionBar = getSupportActionBar();
        actionBar.setDisplayShowCustomEnabled(true);
        actionBar.setDisplayShowTitleEnabled(false);//기본 제목을 없애줍니다.
        actionBar.setDisplayHomeAsUpEnabled(true);

메인 액티비티에는 toolbar를 적용시키고 이를 액션바로 지정해줍니다. 여기서 중요한점은 xml에서 사용한 toolbar의 패키지명을 잘 봐줘야합니다. toolbar는 v7에도 클래스로 있고 androidx에도 있습니다. 저는 androidx에 있는 toolbar를 사용하였으므로 메인액티비티에서 선언한 toolbar변수의 자료형도 이와 동일해야합니다.

actionBar.setDisplayHomeAsUpEnabled는 자동으로 뒤로가기 버튼을 만들어줍니다.

 

3. 커스텀 메뉴

보통 앱의 툴바 우측에는 옵션메뉴 버튼이 있습니다. 기본적으로 제공해주는 것이 없기 때문에 커스텀 제작을 하여 적용시켜보도록 하겠습니다.

우선 res폴더를 우클릭하여 new -> android resource directory를 누르고 menu폴더를 만들어줍니다.

그리고 menu폴더에 xml 파일을 하나 만듭니다.

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/account"
        android:title="계정정보" />
    <item
        android:id="@+id/logout"
        android:title="로그아웃" />
</menu>

본인의 용도에 맞게 메뉴를 만들어줍니다. 저는 계정정보를 볼 수 있는 것과 로그아웃을 하는 메뉴를 만들었습니다.

 

이제 메인택티비티 클래스에서 커스텀 메뉴를 적용시켜보겠습니다. 커스텀 메뉴를 적용시키기 위해서는 메인액티비티에서 onCreateOptionsMenu 메소드를 오버라이딩 해야합니다.

직접 타이핑해도 되지만 저는 ctrl+O단축키를 이용하여 오버라이딩 메소드를 검색해서 주로 구현합니다.

 

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.main_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.logout:
                //select logout item
                break;
            case R.id.account:
                //select account item
                break;
            case android.R.id.home:
                //select back button
                finish();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

우측의 옵션버튼을 눌렀을 떄 menuinflater를 통해 제작한 커스텀 메뉴를 띄워줍니다. R.menu.커스텀메뉴xml파일 을 인자로 넘겨주어야합니다.

 

onOptionsItemSelected에는 각 맞는 메뉴 아이템을 눌렀을 때 동작할 내용을 작성합니다. 이 때 마지막의 android.R.id.home은 툴바에서 뒤로가기 버튼을 눌렀을 때 동작할 내용을 입력합니다. 저는 현재 액티비티를 종료하게 해주었습니다.

 

4. 결과