[Android] NavigationView Add Footer CustomView

아주 오랜만에 안드로이드를 만질일이 생겨서 개발하던 도중..

삽질을 좀 하게 되어, 다른분께도 도움이 될까 해서 남깁니다.

물론 저도 스택오버플로우를 통해 알게되었습니다.

 

 

출처 : geeksforgeeks

안드로이드 기본 라이브러리에는 Navigation Drawer라는 메뉴를 제공해줍니다.

평상시에는 숨어 있다가, 액션바의 토글 버튼을 누르면 좌측에서 나오는 슬라이드 메뉴를 뜻합니다.

많은 사람들이 한번 이상 봤지만 딱히 이름을 모르는 그런 메뉴 일꺼에요..

 

 

 

출처 : ko.linux-console.net

흔한 구성은 위 스크린샷과 같을꺼에요

위(header)에 그림이나 뭔가가 있고. 그 아래에는 메뉴들이 잔뜩있는 화면들..

그리고 그 메뉴에는 아이콘들이 있는 모습 말입니다.

 

 

 

그렇다면 여기에 하단(footer)에 커스텀 디자인을 넣을려면 어떻게 해야될까요?

 

 

 

대부분의 블로그에선 이렇게 하라고 안내해줍니다.

<com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true">
    
       <!-- 이 부분에 원하는 layout 추가하세요 -->

</com.google.android.material.navigation.NavigationView>

이렇게 NavigationView에 넣으라고 알려줍니다.

물론 이방법이 틀린건 아닙니다. 

심지어 되긴되요

 

 

출처 : stackoverflow

navigationview 안에 custom layout을 추가하면

보여줄 menu가 적거나 custom layout이 작아서 서로 겹칠일이 없으면 전혀 상관없습니다.

하지만 앱 개발을 하다보면 가로모드에서도 구동이 되어야 할때도 있고,,

메뉴가 너무 많아서 스크롤을 내려야할때도 있습니다.

그럴때는 customlayout이 겹쳐서 menu를 클릭할 수가 없게 됩니다.

 

 

 

 

 

 

 

아! 그러면 Menu를 커스텀 뷰로 바꾸면 되겠다~

라고 생각하실텐데 큰 오산입니다....

출처 : stackoverflow

<menu>
    <item
        android:id="@+id/nav_logout"
        app:actionLayout="@layout/customlayout"
        app:showAsAction="collapseActionView" />
</menu>

menu에 보면 actionLayout이라고 해서 

뭔가 customLayout으로 덮어쓰기 될거 같은 이름이 있지만.

이것은 사실 menu에서 아주 작은 공간을 제공해주는 용도 입니다.

대부분 카운트를 넣거나, 작은 아이콘을 넣거나, 스위치를 넣는 정도가 다입니다.

 

 

 

 

 

 

 

 

꿈꿔왔던 뷰...

방법은 간단? 했습니다..

 

<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false" >

	<androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.google.android.material.navigation.NavigationView
                android:id="@+id/nav_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:fitsSystemWindows="false"
                app:headerLayout="@layout/nav_header_layout"
                app:menu="@menu/navigation_connected_drawer"
                app:elevation="0dp"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>

            <include layout="@layout/nav_footer_device_info" />

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</com.google.android.material.navigation.NavigationView>

좌측에서 열리는건 첫번째 NavigationView를 이용하고,

그 내부를 모두 NestedScrollView로 채웁니다.

두번째 NavigationView는 header와 실제 동작할 menu를 표현할때 이용해 줍니다.

그리고 빈 View를 weight로 확장시키고,

그 아래에는 footer를 추가해주면 끝납니다.

 

 

 

꼼수처럼 보이지만, 일단 동작하면 되니까요

다른 library를 찾다가는 더 많은 코드들을 바꿔야 할지 모르니... 

이 방법을 그대로 사용하기로 했습니다.