[안드로이드 / android] Custom AppBar & left margin 지우기

AppBar에는 Menu icon, Search icon 등도 들어가지만 앱을 만들다 보면 추가하고 싶은 버튼이나 텍스트뷰등이 많이 생길 수 있습니다.

그래서 천편일률적인 AppBar에서 벗어나 Custom Layout을 AppBar 안에 넣어보겠습니다.

XML 작성

xml은 아래와 같이 작성하시면 됩니다. XML 자체는 심플합니다.

중요한 것은 저기 아래 주석 부분에 Custom Layout을 추가해주면 된다는 것입니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:id="@+id/toolbar"
        android:layout_height="?attr/actionBarSize"
        android:elevation="6dp"
        app:layout_collapseMode="pin"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme">

        <!-- 이곳에 Custom Layout을 추가해주면 됩니다 -->

    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

위와 같이 xml을 작성하고 소스는 setSupportActionBar만 불러주시면 됩니다.

저 같은 경우는 AppBar를 스크롤 동작에 따라 show, hide 시켜주기 위해 AppBar를 멤버 변수로 가지고 있었습니다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mAppBarLayout = findViewById(R.id.appbar);
    Toolbar toolbar = mAppBarLayout.findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}

그런데 이렇게 Custom AppBar를 구성해서 앱을 실행해보면 눈에 거슬리게 Left Margin이 있는 것을 볼 수 있습니다.

이미지를 보시면 왼쪽에 margin이 보입니다. (이미지는 편의상 웹에서 가지고 왔습니다.)

아마 제 코드를 참고 하셔서 작성하셨으면 여러분도 동일하게 발생했을 것 같습니다.

그럼 이 정체 불명의 margin을 지워보도록 하겠습니다.

Custom AppBar를 만들고 생기는 left margin 지우기

<android.support.v7.widget.Toolbar
    xmlns:app="schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primaryColor"
    android:contentInsetLeft="0dp"
    android:contentInsetStart="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    android:contentInsetRight="0dp"
    android:contentInsetEnd="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetEnd="0dp" />

위에 inset부분만 모두 가져다 설정해주시기 바랍니다.

이렇게 해서 Inset을 모두 0으로 주게되면 정체 불명의 left margin을 없앨 수 있습니다.