[안드로이드]Android Bottom App Bar 사용하기

안녕하세요 남갯입니다

오늘은 안드로이드 Material Components 2.0 중 하나로 소개된 BottomAppBar 에 대해 소개해보려고합니다.

-Bottom App Bar 란

한손으로 사용이 용이하게끔 네비게이션 메뉴와 다양한 옵션들을 하단으로 내린 스타일을 말합니다.

네비게이션 바와 플로팅 버튼이 밑에 존재합니다.

- Bottom App Bar를 구현하기위한 사전조건

Bottom App Bar를 사용하기 위해선 두가지의 조건중에 하나를 만족시켜야합니다

1. Manifest에 Widget.MaterialComponents의 스타일을 만들어 적용

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

2. Bottom App Bar 내에 아래의 스타일을 적용

style=”@style/Widget.MaterialComponents.BottomAppBar”

- 레이아웃 구성하기

<androidx.coordinatorlayout.widget.CoordinatorLayout
        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=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/colorPrimary"
            app:fabAlignmentMode="center"
            app:navigationIcon="@drawable/baseline_menu_white_24dp"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_add_white_24dp"
            app:layout_anchor="@id/bar"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Bottom App Bar를 이용하기위해서

Bottom App Bar는 CoordinatorLayout 안에 존재해야 합니다.

- bottom app bar 속성 알아보기

Background Tint — app:backgroundtint

FAB Alignment Mode — app:fabAlignmentMode
FAB Attached — app:fabAttached
FAB Cradle Margin — app:fabCradleMargin
FAB Cradle Corner Radius — app:fabCradleRoundedCornerRadius
FAB Vertical Offset — app:fabCradleVerticalOffset

FAB Hide on scroll— app:hideOnScroll 

1. Background Tint — app:backgroundtint = "변경할 색깔"

해당옵션을 변경하여 바텀 네비게이션의 배경 색깔을 변경한다.

app:backgroundTint="@android:color/holo_blue_dark"

holo_blue_dark의 속성을 입혀봤습니다.

색상이 변하는것을 볼 수 있습니다.

2. FAB Alignment Mode — app:fabAlignmentMode = center/end

기존 fab 속성을 center에서 end로 변경해보겠습니다.

app:fabAlignmentMode="end"

3. FAB Attached — app:fabAttached 

 FAB Attached — app:fabAttached fab는 기존 있었던 속성인것 같지만 Material Design Guide에서는 비권장하고 있습니다.

실제로 다른블로그의 글에 맞춰 적용을 해보려해도 속성이 사라진것 같습니다.

해당 기능은 삭제되었습니다.

fab 속성을 올리면 접근하기가 어렵기때문이죠.

4. FAB Cradle Margin — app:fabCradleMargin

FAB Cradle Margin — app:fabCradleMargin 는 fab 주변에 app바와의 거리를 의미합니다

app:fabCradleMargin="20dp"

5. FAB Cradle Corner Radius — app:fabCradleRoundedCornerRadius

FAB Cradle Corner Radius — app:fabCradleRoundedCornerRadius 는 fab 양옆에 있는 굴곡의 기울기를 의미합니다.

app:fabCradleRoundedCornerRadius="100dp"











6. FAB Vertical Offset — app:fabCradleVerticalOffset

FAB Vertical Offset — app:fabCradleVerticalOffset 는 App Bar와 FAB의 간격을 의미합니다.

app:fabCradleVerticalOffset="20dp"

-7 FAB Hide on scroll— app:hideOnScroll 

이건 사진까지 첨부하지 않도록 하겠습니다 스크롤이 발생할때 fab를 숨겨주는 기능입니다.

이기능을 사용하기 위해서는 스크롤링이 되는 컨텐츠들을 NestedScrollView에 넣어주셔야 정상적으로 동작하게 됩니다.

이렇게 7가지의 속성을 알아봤습니다.

- fab jump animation

- 출처 : https://android.jlelse.eu/how-i-customised-bottom-app-bar-behaviour-943f2416cd7a

추가적으로 검색을 해보다가 재미있는 기능을 만든것을 확인해서 적용해서 올려보려고 합니다.

출처의 소스처럼 동작시키려고 했지만 

이분께서 만들때에는 isFABAttached 라는 속성이 있어서 확인해서 동작을 시켰는데 

현재는 appbar 내부 소스를 확인결과 Alignment속성만 변경하게되면 자동으로 위치가 변하는것을 확인했습니다.

해당 속성을 이용하기위해서는 두가지의 애니메이션 속성설정이 가능한데, 

app:fabAnimationMode="slide"

app:fabAnimationMode="scale"

이상 Bottom APP Bar 였습니다.

해당 예제소스는

깃허브에 올려놨습니다.

깃허브 주소

Bottom App bar 깃허브가기

- 참고 출처

https://android.jlelse.eu/how-i-customised-bottom-app-bar-behaviour-943f2416cd7a

https://medium.com/material-design-in-action/implementing-bottomappbar-material-components-for-android-f490c4a01708

https://medium.com/harrythegreat/android-bottom-appbar-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-9071ec428138