App Bar Custom

안드로이드 앱의 상단에 있는 바를 App Bar라 한다. (ActionBar, Toolbar 등)
이 앱 바를 직접 만들어 보자.

layout을 하나 생성하여 보여주고 싶은 앱 바를 만든다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:ignore="missingPrefix">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_list"
        android:scaleType="centerInside"
        app:srcCompat="@drawable/icon_list"
        android:background="@null"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/year_month"
        android:textColor="@color/circleIn"
        android:textSize="24dp"
        app:font="custom1"
        android:gravity="center"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="true"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/icon_option"
        android:id="@+id/btn_option"
        android:background="@null"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"/>

앱 바의 색상은 styles.xml 에서 지정한다.
보통 Theme style을 새로 만들어서 사용하는 데 여기서는 안드로이드 스튜디오가 친절하게 마련해준 style을 이용해서 만든다.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="actionBarSize">45dp</item>
        <item name="colorPrimary">@color/customColor</item>
        <item name="colorPrimaryDark">@color/customColor</item>
        <item name="colorAccent">@color/customColor</item>
    </style>
</resources>

actionBarSize는 앱 바의 높이를 지정한다.
colorPrimary는 앱 바의 색상을 지정한다.
colorPrimaryDark는 앱 바 위의 상태 표시줄의 색상을 지정한다.
colorAccent는 ProgressBar, CheckBox, 밑줄 표시 등 강조 표시의 색상을 지정한다.

만일 Theme style을 직접 만들었다면 AndroidManifest의 application theme를 본인이 만든 style로 지정해준다.

<application
        ...
        android:theme="@style/yourCustomThemeStyleName">

직접 만든 앱 바를 보여주고 싶은 Activity에 다음 코드를 입력한다.

import android.support.v7.app.ActionBar;

...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
	...

        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        actionBar.setCustomView(R.layout.custom_bar);
        actionBar.setElevation(0);
    }
}

ActionBar의 import는 지원 라이브러리인 support.v7.app 으로 지정한다.
setDisplayOptions에 DISPLAY_SHOW_CUSTOM을 입력해 사용자가 정의한 뷰를 사용하도록 지정한다.
setCustomView는 사용자가 지정한 뷰(layout)를 보여준다.
setElevation은 앱 바의 Z축 높이를 조정한다. 0을 입력하면 그림자가 보이지 않는다.

만일 특정 Activity에서는 앱 바를 보이고 싶지 않다면 다음 코드를 입력한다.

actionBar.hide();

코드 내에서 Title 내용을 바꾸고 싶다면 View를 inflate 한 후 그것을 setCustomView 한다.

LayoutInflater inflater = LayoutInflater.from(this);
View v = inflater.inflate(R.layout.custom_bar, null);
TextView tv_title = (TextView)v.findViewById(R.id.title);
tv_title.setText("hello");
actionBar.setCustomView(v);