입문

안녕하십니까, 메시입니다.
이번에 저희가 Bottom App Bar의 외관에서 Bottom Navigation의 Fragment 전환을 할 거예요.
Bottom App Bar만 사용하거나 Bottom App Bar에 버튼을 설정하는 등의 기사가 있었지만 Bottom Navigation을 추가하고 Fragmento 전환을 추가했다는 기사가 없어서 쓰기로 했습니다.
제가 Bottom App Bar의 상세한 상황을 간단히 소개하면서 가도록 하겠습니다.
마지막으로 샘플을 넣은github를 넣기 때문에 직접 사용할 수 있습니다
이번 완제품은 여기 있습니다.

Gradle 설정

먼저 재료 및 탐색을 Gradl에 추가합니다.
보도에 따라 API 버전을 지정하는 곳도 있지만 특별히 신경 쓰지 않아도 된다.
app/build.gradle

dependencies {
    //Material
    implementation 'com.google.android.material:material:1.0.0-alpha1'

    //Navigation
    implementation 'androidx.navigation:navigation-fragment:2.0.0'
    implementation 'androidx.navigation:navigation-ui:2.0.0'
}

Bottom AppBar 제작

Bottom AppBar는 Coordinator Layout의 자식이어야 합니다.
activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorAccent"
        app:fabAlignmentMode = "center"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleMargin="5dp"
        app:titleTextColor="@android:color/black">


    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:backgroundTint="@color/colorPrimary"
        app:layout_anchor="@id/bottomAppBar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

속성

너는 Bottom AppBar의 UI를 할 수 있다.
Bottom App Bar의 위치를 변경할 수 있습니다.app:fabAlignmentMode = "center"
app:fabAlignmentMode = "end"BottomAppBar 간격 변경하기app:fabCradleMargin="数字dp"Bottom AppBar 모서리를 둥글게 만들기app:fabCradleRoundedCornerRadius="数字dp"Bottom AppBar 버튼 높이 조정app:fabCradleVerticalOffset = "数字ｄｐ"아래의 참고로 링크를 게재하였으니 여러 가지 좋아하는 모양을 시도해 보세요!

BottomNavigation 만들기

Fail→Naw→Activity→BottomNavigation
에서 설명한 대로 해당 매개변수의 값을 수정합니다.
이번에는 실제 생성된 액티비티가 필요하지 않지만 Menu 등의 항목을 자동으로 만들 수 있어 편리하다.

AndroidManifest 설정

이번에 Main Activity를 사용하기 때문에 Fail을 만들 때 Android Manifest의 Activity에도 Bottom Navigation이 추가되므로 삭제해야 합니다.
안 끄면 떨어져.

숫자 설정

기본값은 3개지만 이번에는 두 개면 되므로 하나를 삭제해야 합니다.
bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="item1" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="item2" />

</menu>

XML 설정

activity_main에서 시작할 때 먼저 열 프레임워크를 설정합니다.
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
//省略
>

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

    <com.google.android.material.bottomappbar.BottomAppBar
    //省略        
    >
    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
    //省略
    />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

활성 설정

먼저 열린 프레임 등을 설정합니다.
여기에 쓰인 코드는 주로 Bottom Navigation을 만들 때 할 수 있는 Activity를 바탕으로 만든 것이다.
MainActvity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val navView: BottomNavigationView = findViewById(R.id.bottomNavigationView)
        val navController = findNavController(R.id.nav_host_fragment)

        val appBarConfiguration = AppBarConfiguration(
            setOf(
                R.id.navigation_home, R.id.navigation_notifications
            )
        )
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
    }
}

완성!
이번 github.
https://github.com/175atsu/BotannAppBarSample

참고 자료

속성을 상세하게 썼다.