web-dev-qa-db-fra.com

Navigation de fond avec fab

Je travaille actuellement avec BottomNavigationView et un bouton d’action flottant. Voici ce que je veux réaliser:

 enter image description here

Et ce que j'ai essayé:

<?xml version="1.0" encoding="utf-8"?>

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    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"
    app:layout_insetEdge="bottom"
    tools:context=".activity.BottomNavPrimary">

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center|bottom" />

    <Android.support.design.widget.BottomNavigationView
        Android:id="@+id/bottomNavPrimary"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom"
        app:layout_insetEdge="bottom"
        Android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_primary"></Android.support.design.widget.BottomNavigationView>

</Android.support.design.widget.CoordinatorLayout>
androidandroid-layoutandroid-coordinatorlayoutfloating-action-buttonbottomnavigationview
2
Sumit Shukla

Votre conception ressemble à si vous souhaitez utiliser le nouveau BottomAppBar de la MaterialComponents qui sera entièrement publié avec Android P. Surtout si l'icône de gauche représente une sorte de navigation latérale, il peut s'agir de l'élément de navigation de droite.

Cependant, vous devez être conscient du fait que les éléments à gauche et à droite du FAB ont un objectif différent de celui de navigation en bas . Au lieu d'être des points d'entrée vers des "destinations principales" dans une application, la variable BottomAppBar est définie comme suit:

Une barre d'application inférieure affiche la navigation et les actions clés au bas des écrans de mobile.

Il en va de même pour les actions de page (comme ouvrir le tableau de bord ou effectuer une recherche). Plus d'explications peuvent être trouvées dans documentation de conception .

Je n'ai pas encore eu la possibilité de l'implémenter (parce que j'en avais vraiment besoin avec une navigation en bas), mais voici l'exemple de la documentation de code:

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

  <!-- Other components and views -->

  <com.google.Android.material.bottomappbar.BottomAppBar
      Android:id="@+id/bar"
      Android:layout_width="match_parent"
      Android:layout_height="wrap_content"
      Android:layout_gravity="bottom"
      app:navigationIcon="@drawable/ic_menu_24"/>

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

</Android.support.design.widget.CoordinatorLayout>

Donc, pour moi, il semble que vous définissiez vos options de menu de deux pages et, puisque le FAB est ancré à la barre, il les poussera sur les côtés.

La documentation comprend également des options pour le berceau FAB en option, qui a été présentée lors de la présente édition de Google I/O, et explique comment gérer les menus et les clics.

Voici un autre lien utile sur comment configurer gradle pour inclure les nouveaux composants de matériau dans votre projet.

3
sunadorer

Vous pouvez envelopper votre BottomNavigationView et votre FloatingActionButton dans une ConstraintLayout et utiliser les contraintes suivantes pour la FloatingActionButton:

app:layout_constraintTop_toBottomOf="@id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="@id/bottomNavPrimary"  
app:layout_constraintLeft_toRightOf="@id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="@id/bottomNavPrimary"

Ceci centrera votre FloatingActionButton verticalement et horizontalement par rapport à votre BottomnavigationView

J'espère que c'est ce que vous avez demandé.

Le code final ressemblerait à ceci:

<Android.support.design.widget.CoordinatorLayout Android:layout_width="match_parent"
Android:layout_height="match_parent"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto">

<Android.support.constraint.ConstraintLayout xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/bottomNavPrimary"
        app:layout_constraintBottom_toTopOf="@id/bottomNavPrimary"
        app:layout_constraintLeft_toRightOf="@id/bottomNavPrimary"
        app:layout_constraintRight_toLeftOf="@id/bottomNavPrimary"/>

    <Android.support.design.widget.BottomNavigationView
        Android:id="@+id/bottomNavPrimary"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        app:layout_constraintBottom_toTopOf="parent"
        Android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_primary" />

</Android.support.constraint.ConstraintLayout>

1
ravi

Je l'ai utilisé pour obtenir quelque chose de similaire.

BottomNavigationView + FloatingActionButton

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <com.google.Android.material.floatingactionbutton.FloatingActionButton
        Android:id="@+id/floating_button"
        style="@style/Widget.MaterialComponents.FloatingActionButton"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="end"
        Android:layout_margin="16dp"
        app:backgroundTint="@color/colorPrimaryLight"
        app:elevation="@dimen/padding_10"
        app:layout_constraintBottom_toTopOf="@id/navigation"
        app:layout_constraintLeft_toRightOf="@id/navigation"
        app:layout_constraintRight_toLeftOf="@id/navigation"
        app:layout_constraintTop_toBottomOf="@id/navigation"
        app:layout_constraintTop_toTopOf="@id/navigation"
        app:layout_insetEdge="bottom"
        app:srcCompat="@drawable/ic_add_black_24dp"
        app:tint="@color/colorPrimary" />


    <com.google.Android.material.bottomnavigation.BottomNavigationView
        Android:id="@+id/navigation"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:background="@color/colorPrimaryDark"
        Android:visibility="visible"
        app:itemIconTint="@drawable/bottom_navigation_icons"
        app:itemTextColor="@drawable/bottom_navigation_icons"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>
1
Felip Adell

Je pense que vous pouvez faire cela avec bottomAppBar et intégrer un bouton à l'intérieur, comme ci-dessous

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

    <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:fabCradleDiameter="8dp"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="horizontal">
            <ImageButton
                Android:id="@+id/btnReport"
                Android:layout_width="0dp"
                Android:layout_height="match_parent"
                Android:background="@Android:color/transparent"
                Android:src="@drawable/ic_play"
                Android:layout_weight="1"
                Android:paddingRight="20dp"
                />

            <ImageButton
                Android:id="@+id/btnPlayWords"
                Android:layout_width="0dp"
                Android:layout_height="match_parent"
                Android:background="@Android:color/transparent"
                Android:src="@drawable/ic_show_chart"
                Android:layout_weight="1"
                Android:paddingLeft="20dp"
                />
        </LinearLayout>

    </com.google.Android.material.bottomappbar.BottomAppBar>

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>
0
Ishan Fernando