web-dev-qa-db-fra.com

comment faire une barre d'application inférieure ou une barre de navigation inférieure comme Google Home App?

 Google home app

Je veux faire une mise en page comme ci-dessus. Quelqu'un peut-il m'aider comment faire cela? J'ai essayé la nouvelle barre de l'application inférieure matérielle. mais je ne pouvais pas atteindre ce point de vue.

androidmaterial-design
5
Rubayet Hassan

Vous avez enfin la solution… .. Il suffit de placer bottomAppBar sous votre bottomNavigationView avec un fond 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

2
Artur Antonyan

Vous pouvez y parvenir en utilisant BottomAppBar

Consultez ce lien pour plus d’informations sur BottomAppBar,

Conception de nouveaux composants

Pour attacher votre icône FAB à votre bottombar 

app:fabAttached = "true"

Et vous pouvez définir l'alignement de FAB comme,

app:fabAlignmentMode ="center"
1
Saikrishna Rajaraman

Vous pouvez également utiliser Android.support.design.widget.TabLayout aligné au bas de l'écran avec quatre onglets normaux avec icônes et un onglet spécial au milieu des autres onglets avec une vue personnalisée.

1
Norbert

Je pense aussi que vous êtes nouveau sur Android Studio.

Je vous recommande de regarder des tutoriels sur youtube. 

J'ai cherché celui que j'avais utilisé auparavant et qui m'avait fonctionné Vue de navigation inférieure . Il est assez court et vous voyez rapidement l'idée.

1
Christian.gruener