Android Material Design 따라하기 4 - 메인화면 (ToolBar & AppBar)

안녕하세요 프로나인 입니다!

 

Android Material Design 따라하기 4번째 시간입니다.

 

https://koohee.tistory.com/5

Android Material Design 따라하기 3 - 로그인 화면 구상(Button)

저번 글에서 최소한의 EditText 와 Button 을 가지고 그럴싸한 로그인 화면을 그려보았는데

제가 다시 한 번 보니까 생각보다 허전함이 많더군요! 

 

로그인화면 상단쪽에 이미지 사진을 넣으시거나 EditText에 옵션을 조금 더 줘서 완성도 높은 로그인 화면을

만들어 보시는것을 추천 드립니다! 

 

물론 EditText의 옵션이나 이미지를 넣는 방법은 차후 업로딩을 통하여 알려드리도록 하겠습니다!

 

---

이번에는 AppBar & ToolBar 를 사용 하여 로그인 후 다음 화면을 그려보도록 하겠습니다.

다소 헷갈리는 부분이 있을 수 있을텐데, 언제든 댓글 달아주시면 최대한 빠르게 답해드리도록 하겠습니다!

 

먼저 ToolBar 에 들어갈 메뉴들을 만들어 보도록 할건데요, 

1. xml 만들기 

위 사진과 같이 

res -> New -> Android Resource File 

 

2. xml 만들기

여기서 저는 File name 을 toolbar_menu 라고 지었습니다, 이 부분도 역시 자신이 원하시는 이름으로 File 을 만드시고 나중에 저 File을 연결할때 만드신 File 이름으로 연결 해주시면 됩니다.

 

그리고 Resource type 을 Menu 라고 변경했는데, 이 File의 타입을 Menu로 사용할 것이다 라고 지정 해주는것입니다.

이렇게 Type을 지정해 주면 자동으로 Directory name 에 menu라고 써져있는것을 보실 수 있습니다. 

이 말은 menu Directory (폴더) 에 toolbar_menu.xml 을 생성하겠다 라고 생각 하시면 되고, 이제 파일을 생성 해보시면

 

3. xml 만들기

이렇게 xml 파일이 동시에 자동으로 생성 되는것을 확인 하실수 있습니다.

(참고로 이미 menu Directory (폴더) 가 있으면 또 Directory 가 만들어지는것이 아니라 xml 파일만 만들어집니다.)

 

< toolbar_menu.xml >

<?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/navi_menu"
        android:enabled="true"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="검색"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/navi_favorite"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_black_24dp"
        android:title="즐겨찾기"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/navi_menu_more"
        android:enabled="true"
        android:title="더보기"
        app:showAsAction="never" />

    <item
        android:id="@+id/navi_menu_more2"
        android:enabled="true"
        android:title="더보기2"
        app:showAsAction="never" />

</menu>

Item에 해당하는 속성들은 매우 다양하기때문에 아래에 참조 링크를 참조 해주세요..

( 참조 하시면서 속성 적용을 직접 해보시는것을 추천드립니다! )

 

그래도 간단히 설명을 드리자면,  app:showAsAction 의 속성은

값	설명
ifRoom	이 속성을 적용한 Item들이 배치될 공간이 있는 경우 Toolbar에 보여집니다.  * 만약 이 속성이 적용된 Item들의 공간이 부족하다면  orderInCategory 값을 기준으로 Toolbar에 보여지고 나머지 Item들은 더보기 메뉴에 포함이 됩니다.
always	항상 Toolbar에 배치가 됩니다. *다른 UI가 겹칠 가능성이 크기 때문에 이 속성은 중요하지 않으면 사용하지 않는게 좋습니다.
never	Toolbar에 배치하지 않고 더보기 메뉴에 보여집니다.
withText	Icon과 Title을 함께 사용하여 배치합니다. *이때 withText를 사용할것이면 ( ' | ' ) 파이프를 사용하여 다른 속성과 함께 사용하면 됩니다.
collapseActionView	API 14 이상부터 사용할 수 있으며  android:actionLayout 또는 actionViewClass에 의해 작업뷰를 접을 수 있습니다.

 

코드를 작성하시면 아래와 같이 결과화면을 볼 수 있습니다. 

never로 적용한 속성들은 더보기 화면에 나와 있는것과 ,

ifRoom으로 적용한 속성은 Toolbar 에 보여지는것을 볼 수 있습니다.

menu - item

---

이렇게 만든 Menu Item 들을 이제 Toolbar 에 적용을 시켜보도록 합시다 ! 

 

먼저 간단하게 구조를 먼저 보면 

< Toolbar 구조 >

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.google.android.material.appbar.MaterialToolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:menu="@menu/toolbar_menu"
                app:navigationIcon="@drawable/menu_24dp"
                app:title="Material Design" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        ...Toolbar 밑에 보여질 부분
        
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

CoordinatorLayout                    --- 전체화면

└ AppbarLayout                       --- Toolbar 쓸 지역

    └ CollapsingToolbarLayout   --- 반응형 Toolbar (위, 아래 드래그할때)

        └ MaterialToolbar           --- MaterialToolbar 

└ NestedScrollView                 --- Toolbar 에 쓸 지역 외에 보여질 화면

 

구조는 이렇게 되어있습니다. 처음 봤을때는 이게 무슨소리야! 하겠지만 익숙해지면 이제

Toolbar 를 가지고 자연스럽게 원하는 애니메이션 효과까지 뽑아내면서 재밌게 코딩 할 수 있을것입니다!

 

이제 본격적으로 Latyout 과 , ToolbarLayout 등등에 속성을 넣어보겠습니다.

< activity_menu.xml >

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

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">		//펼쳐 졌을때 최대 높이

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:collapsedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Expanded"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="28dp"		//펼쳐졌을때 Title 시작점
            app:expandedTitleMarginStart="45dp"			//펼쳐졌을때 Title 시작점
            app:expandedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Collapsed"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:statusBarScrim="?attr/colorPrimaryVariant">

            <com.google.android.material.appbar.MaterialToolbar
                style="@style/Widget.MaterialComponents.Toolbar.Primary"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:elevation="0dp"
                app:layout_collapseMode="pin"
                app:menu="@menu/toolbar_menu"			//menu Item File 추가
                app:navigationIcon="@drawable/menu_24dp"	//왼쪽 상단 Navi 버튼 모양
                app:title="Material Design" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        ... // 여기에 보여질 TextView 나 Image 또는 Recycler , Card 등등 넣을 곳

    </androidx.core.widget.NestedScrollView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

AppBarLayout의 높이를 가지고 펼쳐졌을때 최대 높이를 지정할 수 있고 또 

CollapsingToolbarLayout에서 펼쳐졌을때의 위치들 또 색상 , 더 나아가 사진까지 넣어서 꾸밀 수 있습니다!

MaterialToolbar 에서는 Toolbar의 속성들을 적용시킬수 있는데

앞서 만들었던 toolbar_menu.xml (메뉴에 들어갈 아이템들) 을 여기서 

app:menu="@menu/toolbar_menu" 로 연결 시켜주는것입니다.

 

---

이렇게 적용을 시키면 아래 결과 화면 처럼

스크롤을 하면 Toolbar 가 펼쳐졌다 줄어졌다 하는 모습을 볼 수 있습니다.

또 Menu Item 들이 Toolbar 에 적용된 모습들도 볼 수 있습니다 !!! 

toolbar 적용

---

다음 글에서는 이제 메뉴 들어갈 자리에 여러 메뉴들을 넣어 보도록 하겠습니다 !

 

 

 

 

 

참조 - 안드로이드 Developer (Menu 구성)

https://developer.android.com/guide/topics/resources/menu-resource?hl=ko

메뉴 리소스  |  Android 개발자  |  Android Developers

참조 - Material Design

https://material.io/develop/android/

Develop for Android