webentwicklung-frage-antwort-db.com.de

Wie man neues Material BottomAppBar als BottomNavigationView implementiert

Ich habe versucht, die neue BottomAppBar zu implementieren, die normalerweise wie folgt aussieht: material BottomAppBar als BottomNavigationView wie in der Google-Home-App, die wie this aussieht.

Mein Problem ist, dass ich die BottomAppBar nur mit einer Menüressource füllen kann. Ich kann nicht verstehen, wie ich meine Tasten so ausrichtet, dass sie wie eine BottomNavigationView aussehen (aber mit dem "Ausschneiden" für die Schaltfläche "Fab"), anstatt alles auf eine Seite auszurichten der BottomAppBar.

Wie kann ich ein benutzerdefiniertes Layout in dieser neuen Material BottomAppBar hinzufügen?

Oder gibt es stattdessen eine Möglichkeit, eine BottomNavigationView mit dem "Ausschneiden" für die Schaltfläche "Fab" zu implementieren (um coole Standardanimationen wie die neue BottomAppBar zu erhalten)?

androidmaterial-designandroid-appbarlayoutbottomnavigationviewandroid-bottomappbar
4
Berenluth

GELÖST

Anstatt zu versuchen, die Menüressourcen auf das Layout, das ich brauchte, zu erzwingen, habe ich diese Lösung verwendet. Stattdessen habe ich ein LinearLayout in die BottomAppBar eingefügt, wobei das "leere" Element als @dglozano vorgeschlagen wurde.

Mit ?attr/selectableItemBackgroundBorderless kann ich auch einen Effekt erzielen, der dem BottomNavigationView sehr ähnlich ist.

<com.google.Android.material.bottomappbar.BottomAppBar
    Android:id="@+id/bar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    Android:gravity="center"
    app:layout_anchorGravity="start"
    app:hideOnScroll="true"
    app:fabAnimationMode="scale"
    app:fabAlignmentMode="center"
    app:backgroundTint="@color/colorPrimary">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:weightSum="5"
        Android:paddingEnd="16dp">
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            app:srcCompat="@drawable/ic_home_white_24dp"
            Android:background="?attr/selectableItemBackgroundBorderless"
            Android:tint="@color/secondary_text"/>
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            app:srcCompat="@drawable/ic_map_black_24dp"
            Android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            Android:background="@Android:color/transparent"/>
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            app:srcCompat="@drawable/ic_people_white_24dp"
            Android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            app:srcCompat="@drawable/ic_account_circle_24dp"
            Android:background="?attr/selectableItemBackgroundBorderless"/>
    </LinearLayout>
</com.google.Android.material.bottomappbar.BottomAppBar>
2
Berenluth

1 - Maven in build.gradle in Ihr Repository aufnehmen

allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

2 - Platzieren Sie die Abhängigkeit von Materialkomponenten in Ihrem build.gradle. Beachten Sie, dass die Materialversion regelmäßig aktualisiert wird.

implementation 'com.google.Android.material:material:1.0.0-alpha1'

3 - Setzt compileSdkVersion und targetSdkVersion auf die neueste API-Version für Android P (28).

4 - Stellen Sie sicher, dass Ihre App das Theme.MaterialComponents-Design erbt, damit BottomAppBar den neuesten Stil verwendet. Alternativ können Sie den Stil für BottomAppBar in der Widget-Deklaration in der Layout-XML-Datei wie folgt deklarieren.

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

5 - Sie können BottomAppBar wie folgt in Ihr Layout einfügen. BottomAppBar muss ein untergeordnetes Element von CoordinatorLayout sein.

<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:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>

 Fab in bottomnavbar

6 - Sie können einen Floating Action Button (FAB) an BottomAppBar verankern, indem Sie die ID der BottomAppBar im app: layout_anchor-Attribut des FAB angeben. BottomAppBar kann FAB mit einem geformten Hintergrund wiegen oder FAB kann BottomAppBar überlappen.

<com.google.Android.material.floatingactionbutton.FloatingActionButton
Android:id="@+id/fab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />

7 - Es gibt viele Attribute, mit denen Sie die untere Navigationsleiste und das Fab-Symbol konfigurieren können.

 Atributes

8 -Überprüfen Sie diesen Medium-Beitrag für eine vollständigere Erklärung.

UPDATE: Check die OP-Antwort für die endgültige Lösung für sein spezielles Problem.

2
dglozano

Platzieren Sie bottomAppBar mit transparentem Hintergrund unter Ihrem bottomNavigationView. Fügen Sie menü.xml ein leeres Menüelement hinzu, um Speicherplatz für die FAB zu schaffen.

XML:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/lt_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@color/white"
Android:fitsSystemWindows="false">


<ViewPager
    Android:id="@+id/main_pager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_marginBottom="56dp"
    Android:layout_above="@+id/bottom_navigation"
    Android:layout_alignParentStart="true" />


<com.google.Android.material.bottomnavigation.BottomNavigationView
    Android:id="@+id/bottom_navigation"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:labelVisibilityMode="labeled"
    Android:layout_gravity="bottom"
    Android:layout_alignParentBottom="true"
    Android:background="@color/transparent"
    app:menu="@menu/bottom_menu" />

<com.google.Android.material.bottomappbar.BottomAppBar
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:id="@+id/bottom_bar"
    Android:layout_gravity="bottom"/>

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:layout_anchor="@id/bottom_bar"/>

Ergebnis

0
Artur Antonyan