[BottomAppBar] 안드로이드 BottomAppBar 예제

안녕하세요 YTS 입니다.

오늘은 Android BottomAppBar를 사용하는 방법에 대해 써보려고 합니다.

  

바로 이런 View인데요.

1.Style 설정

저는 AppTheme를 설정하였습니다.

<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">

2.XML 코딩

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_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/ic_import_contacts_white_24dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:tint="@color/tintColor"
        app:layout_anchor="@+id/bottom_app_bar"
        app:srcCompat="@drawable/ic_home_black_24dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

제일 중요한 부분은 BottomAppBar의 부모 Layout은 항상 CoordinatorLayout 이여야합니다.

처음에 제가 삽질한 부분이 바로 이부분이였네요.

BottomAppBar 의 속성중

app:fabAlignmentMode는 center, 혹은 end로 설정가능합니다.

3. 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"
    xmlns:tools="http://schemas.android.com/tools">


    <item
        android:id="@+id/app_bar_settings"
        android:icon="@drawable/ic_settings_white_24dp"
        android:iconTint="@color/tintWhiteColor"
        android:title="@string/setting"
        app:showAsAction="always" />
</menu>

4. xml이 연결되어있는 Acitivity 코딩

BottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);
setSupportActionBar(bottomAppBar);

BottomAppBar를 ActionBar로 연결합니다.

bottomAppBar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        
    }
});

BottomAppBar의 Navigation click 이벤트입니다.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.navigation, menu);
    return true;
}

액션바의 아까 생성한 Menu를 연결합니다.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.app_bar_settings:
            Toast.makeText(this, "클릭", Toast.LENGTH_SHORT).show();
            break;
    }
    return super.onOptionsItemSelected(item);
}

해당 메뉴의 클릭이벤트입니다.

BottomAppBar의 부모 Layout은 항상 CoordinatorLayout 이부분만 조심하시면 생각보다 손쉽게 구현하실수 있습니다.

댓글과 공감은 작성자에게 큰힘이 됩니다. 마지막으로 저의 글을 읽어주셔서 감사합니다.