Toolbar를 내 맘대로 만들고 싶드아아아ㅏㅏㅏ

Action bar로 표현이 충분하지 않을 경우

Toolbar를 유연하게 표현할 수 있어서 좋다.

내가 만들고 싶은 툴바의 모습은 다음과 같다.

1. Logo를 가운데 배치하고
2. 가장 상단의 Status bar는 하얀색으로
3. 기존 Action bar는 보이지 않게 해야 한다.
4. (추가) 개별 프래그먼트마다 다른 Toolbar를 적용하고 싶다.

하고 싶은 것을 저렇게 번호를 넣었지만

두번째인 Status bar부터 처리해보자.

위에서 순서대로 처리하는 것이 마음에 편하지 않은가?

1. styles.xml

<style name="Theme.TCTheme" parent="Theme.Design.Light.NoActionBar" >
    <item name="android:windowBackground">@android:color/white</item>
    <item name="android:colorPrimary">@color/colorPrimary</item>
    <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:colorAccent">@color/colorAccent</item>
    <item name="android:includeFontPadding">false</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:statusBarColor">@color/white</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowLightStatusBar">true</item>
</style>

많은 자료를 보면 windowActionBar, windowNoTitle이 있어야 action bar를 숨길 수 있다고 한다.

하지만 실제로 해보니 parent theme에 "Theme.Design.Light.NoActionBar"로 해두어도

Action bar는 보이지 않았다.

statusBarColor로 Status bar를 하얀색으로 만든다.

이 때 필수적으로 해두어야 할 옵션이 바로 windowDrawsSystemBarBackgrounds이다.

Status bar를 투명하게 하여 statusBarColor가 제대로 표현되게 한다.

만약 이 옵션이 없다면 여러 색이 섞인듯한 색상이 나타날 수 있다.

windowTranslucentStatus는 반투명을 요청하는 Flag인가 확인하는 것이다.

반투명은 아니기 때문에 false로 처리한다.

하지만 이것으로는 아이콘 색상을 검은색으로 만들지 못한다.

windowLightStatusBar를 적용하면 밝은색 Status bar에 어울리는 형태로

아이콘 색상을 잡아준다.

참고로 style말고 방법이 하나 더 있다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_content);
    ButterKnife.bind(this);
 
    // ***** 생략 *****
 
    // Status bar color : White
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        if (button != null) {
            button.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        }
    }
}
 

필수정보!!!

button 자리에는 해당 Activity의 어느 view를 가지고 와도 상관이 없다.

2. AndroidManifest.xml

<activity
    android:name=".content.ContentActivity"
    android:configChanges="orientation|keyboardHidden|screenSize"
    android:theme="@style/Theme.TCTheme" />

위에서 만든 style을 원하는 Activity에 적용한다.

configChanges는 환경이 바뀔 때, Restart하지 않고 변경되도록 한다.

위 코드를 예를 들자면...

orientation : portrait mode에서 landscape mode, 다시 얘기해서 세로 모드에서 가로 모드로 혹은 반대로 될 때

keyboardHidden : 키보드를 보이게하거나 보이지 않게 할 때. 키보드 Accessibility가 변경될 때

screenSize : orientation을 적용해도 화면 크기가 바뀌기 때문에 screenSize를 같이 적용해줘야 한다.

3. fragment_first.xml

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".content.first.FirstFragment">
 
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_custom_first"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_48"
        android:contentInsetLeft="0dp"
        android:contentInsetStart="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        android:contentInsetRight="0dp"
        android:contentInsetEnd="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetEnd="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
 
            <ImageView
                android:id="@+id/img_logo"
                android:layout_width="@dimen/dp_90"
                android:layout_height="@dimen/dp_26"
                android:layout_centerInParent="true"
                android:src="@drawable/img_main_logo" />
 
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>
 
    <!-- 생략 -->
 
</android.support.constraint.ConstraintLayout>

각 프래그먼트마다 toolbar를 따로 표현하고 싶었다.

툴바를 별도로 만들어서 관리하거나 액션바 내부에 넣는등의 방법보다

더 심플한 형태를 원했다.

그런데 심플한거 치곤 코드가 좀 길어보인다?

일단 툴바 내부 레이아웃 padding값이 있어서 설정을 준것이 있다.

contentInsetLeft부터 contentInsetEnd는 그 padding 값을 제거하기 위함이다.

툴바는 기본적으로 왼쪽에 padding값이 들어가 있어서

로고를 center에 두고 싶을 때 쉽지가 않다. 그래서 이렇게 Padding값을 제거했다.

툴바 아래에 레이아웃을 두고 이미지를 center로 처리했다.

그나마 예뻐졌다. (뿌듯)

기타 참고자료

• wonnieyoon steemit
• Developer88 blog
• awesomedev 블로그
• Sourcey
• 태환 블로그 (추천!!!)