BottomAppBar 未正确加载

Question

我正在尝试复制this BottomAppBar

但无论我遵循什么指南，我都能得到最好的is this

我是 Android 开发的新手，这让我发疯了。我检查了创建的全新项目，看看问题是否与我有关。我煞费苦心地复制了所有不同指南中可能相关的每一个 Gradle 依赖项，但似乎没有任何效果。

编辑器的自动完成功能可以识别 BottomAppBar 视图及其属性，但它在预览中根本不起作用，只会在应用程序中崩溃。

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'


android {
    compileSdkVersion 29
    buildToolsVersion "29.0.0"
    defaultConfig {
        applicationId "com.hlag.projecttabletop"
        minSdkVersion 25
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

    implementation 'com.google.android.material:material:1.1.0-alpha08'
    testImplementation 'junit:junit:4.12'

}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        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"
        android:orientation="vertical"
        tools:context=".activities.TestActivity">

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

        <com.google.android.material.bottomappbar.BottomAppBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.MaterialComponents.BottomAppBar"
                android:layout_gravity="bottom"
                android:id="@+id/bottomAppBar"
                android:backgroundTint="@color/colorPrimary"
                app:navigationIcon="@drawable/ic_drag_handle_black_24dp">
        </com.google.android.material.bottomappbar.BottomAppBar>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:fabSize="normal"
                app:layout_anchor="@id/bottomAppBar"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</LinearLayout>

Answer 1

您的应用主题应该扩展 MaterialComponents 主题，而不是 AppCompatTheme，

像这样。

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

BottomAppBar 应该用CoordinatorLayout 包裹

你的底部应用栏缺少app:fabAlignmentMode

Answer 2

我建议你这样做：

style.xml：

    <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>

activity_test.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/coordinator"
    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=".TestActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/colorPrimary"
        app:navigationIcon="@drawable/ic_drag_handle_black_24dp"
        style="@style/Widget.MaterialComponents.BottomAppBar"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/button_add_note"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/app_bar"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

注意：你的父布局应该是CoordinatorLayout

这应该可以工作