CODEWITHSUNDEEP
androidxmlandroid-studioandroid-layoutgradle
TheEggRoller
TheEggRoller

Reputation: 23

BottomAppBar not loading properly

I'm trying to replicate this BottomAppBar

But no matter what guide I follow, the best I can get is this

I'm a complete newbie in Android development and this has been driving me crazy. I've checked created brand new projects to see if the issue was with mine. I painstakingly copied every single Gradle dependency that could be relevant from all the different guide, but nothing seems to work.

The editor's autocomplete recognizes the BottomAppBar view and its attributes, but it doesn't work at all in the preview, and just crashes in the app.

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>

Upvotes: 0

Views: 5180

Answers (2)

Freedom Chuks
Freedom Chuks

Reputation: 750

I suggest you do it this way:

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>

Note : Your parent layout should be CoordinatorLayout

This should work

Upvotes: 0

Sony
Sony

Reputation: 7196

Your app theme should extend MaterialComponents theme, not the AppCompatTheme,

like this.

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

BottomAppBar should be wrapped in a CoordinatorLayout

and you are missing app:fabAlignmentMode for your bottom app bar

Upvotes: 6

Related Questions