web-dev-qa-db-fra.com

Comment implémenter un nouveau matériau BottomAppBar en tant que BottomNavigationView

J'essayais d'implémenter le nouveau BottomAppBar qui ressemble généralement à ceci: Material BottomAppBar en tant que BottomNavigationView, comme dans l'application principale de Google qui ressemble à ceci .

Mon problème est que, puisque je ne peux remplir le BottomAppBar qu'avec une ressource de menu, je ne comprends pas comment aligner mes boutons pour qu'ils ressemblent à un BottomNavigationView (mais avec le "cut" du bouton Fab) au lieu de tout aligner d'un côté. de la BottomAppBar.

Comment puis-je ajouter une mise en page personnalisée dans ce nouveau matériau BottomAppBar?

Ou au lieu de cela, y a-t-il un moyen d'implémenter BottomNavigationView avec le "cut" pour pour le bouton Fab (en gardant des animations froides par défaut comme le nouveau BottomAppBar)?

androidmaterial-designandroid-appbarlayoutbottomnavigationviewandroid-bottomappbar
4
Berenluth

RÉSOLU

Fondamentalement, au lieu d'essayer de forcer les ressources de menu à la disposition dont j'avais besoin, j'ai utilisé cette solution à la place, je viens de placer un LinearLayout à l'intérieur du BottomAppBar en utilisant l'élément "vide" comme @dglozano l'a suggéré.

En utilisant ?attr/selectableItemBackgroundBorderless, je suis également capable d’obtenir un effet qui est vraiment similaire à BottomNavigationView.

<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 - Inclure Maven dans votre référentiel dans build.gradle

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

2 - Placez la dépendance des composants du matériau dans votre build.gradle.. Notez que la version du matériau est régulièrement mise à jour.

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

3 - Définissez compileSdkVersion et targetSdkVersion sur la dernière version de l'API destinée à Android P, qui est la 28.

4 - Assurez-vous que votre application hérite du thème Theme.MaterialComponents afin de permettre à BottomAppBar d'utiliser le dernier style. Vous pouvez également déclarer le style pour BottomAppBar dans la déclaration du widget dans le fichier XML de présentation comme suit.

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

5 - Vous pouvez inclure BottomAppBar dans votre présentation comme suit. BottomAppBar doit être un enfant de CoordinatorLayout.

<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 - Vous pouvez ancrer un bouton d'action flottante (FAB) à BottomAppBar en spécifiant l'ID de l'attribut BottomAppBar dans app: layout_anchor de FAB. BottomAppBar peut bercer FAB avec un fond en forme ou FAB peut chevaucher BottomAppBar.

<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 - Vous pouvez utiliser de nombreux attributs pour configurer la barre de navigation inférieure et l'icône de la fab.

 Atributes

8 -Vérifiez ce post moyen pour une explication plus complète.

UPDATE: Cochez la réponse du PO pour la solution finale à son problème particulier.

2
dglozano

Placez bottomAppBar sous votre bottomNavigationView avec un arrière-plan transparent. Et ajoutez un élément de menu vide à menu.xml pour libérer de l'espace pour le FAB.

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

Résultat

0
Artur Antonyan