web-dev-qa-db-fra.com

BottomNavigationView superposer FrameLayout dans CoordinatorLayout

Ce qui suit est ma mise en page XML. Le problème est maintenant que BottomNavigationView chevauche le FrameLayout. Je voulais que FrameLayout s'étire jusqu'au sommet de BottomNavigationView. 

J'ai essayé avec une astuce telle que l'ajout de paddingBottom dans le FrameLayout mais je me demande s'il existe une autre meilleure solution. Merci.

<?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:id="@+id/container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    >

    <include layout="@layout/user_app_bar"/>

    <Android.support.design.widget.BottomNavigationView
        Android:id="@+id/navigation"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom"
        Android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation"
        app:itemTextColor="@color/colorPrimaryDark"
        app:itemIconTint="@color/colorPrimaryDark"
        />

    <FrameLayout
        Android:id="@+id/fragment_frame"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:paddingBottom="58dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

   <Android.support.design.widget.FloatingActionButton
       Android:id="@+id/fab"
       Android:layout_width="wrap_content"
       Android:layout_height="wrap_content"
       Android:layout_margin="@dimen/fab_margin"
       app:layout_anchorGravity="bottom|end"
       app:layout_anchor="@id/app_bar"
       app:srcCompat="@drawable/ic_edit_white_24px" />

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

UPDATE: plus d'informations sur le user_app_bar.xml. Il contient un CollapsingToolbarLayout. 

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.AppBarLayout 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:id="@+id/app_bar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/AppTheme.AppBarOverlay"
    app:layout_behavior="co.domain.DisableAppBarLayoutBehaviour"
    >

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/toolbar_layout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="false"
        app:contentScrim="?attr/colorPrimary">

        <Android.support.constraint.ConstraintLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:layout_collapseMode="parallax">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="250dp"
                Android:layout_marginBottom="0dp"
                Android:layout_marginLeft="0dp"
                Android:layout_marginRight="0dp"
                Android:layout_marginTop="0dp"
                Android:contentDescription=""
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0"
                tools:ignore="ContentDescription"
                Android:background="@color/gray"/>

            <TextView
                Android:id="@+id/profileName"
                style="@style/textShadow"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginEnd="8dp"
                Android:layout_marginLeft="8dp"
                Android:layout_marginRight="8dp"
                Android:layout_marginStart="8dp"
                Android:layout_marginTop="0dp"
                Android:text="user name"
                Android:textAlignment="center"
                Android:textSize="18sp"
                Android:textColor="#fff"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintLeft_toLeftOf="@+id/profileImage"
                app:layout_constraintRight_toRightOf="@+id/profileImage"
                app:layout_constraintTop_toBottomOf="@+id/profileImage" />

            <de.hdodenhof.circleimageview.CircleImageView
                Android:id="@+id/profileImage"
                Android:layout_width="70dp"
                Android:layout_height="70dp"
                Android:layout_marginBottom="8dp"
                Android:layout_marginLeft="32dp"
                Android:layout_marginStart="32dp"
                Android:layout_marginTop="8dp"
                Android:alpha="0.5"
                Android:src="@drawable/ic_account_circle_black_24dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </Android.support.constraint.ConstraintLayout>

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

</Android.support.design.widget.AppBarLayout>
androidbottomnavigationviewcoordinator-layout
8
hjchin

Il existe une solution simple pour votre problème. Cela revient à mettre marginBottom dans FrameLayout sur 56dp qui correspond à la documentation height de BottomNavigationView. Je ne suis pas sûr qu'il puisse être modifié en fonction des écrans mobiles. Même la documentation ne dit rien sur le changement de hauteur. Et je l'ai utilisé dans certaines de mes applications et je n'ai pas trouvé que la hauteur de BottomNavigationView était en train de changer. Mais juste au cas où vérifier. J'espère que cela aidera.

4
Yupi

Placez CoordinatorLayout and BottomNavigationView à l'intérieur de RelativeLayout

avec BottomNavigation Android: layout_alignParentBottom = "true" et la disposition CoordinatorLayout ci-dessus avec Android: layout_above = "@ + id/{BottomNavigationView-ID}"

s'il vous plaît vérifier ci-dessous la mise en page

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:Android="http://schemas.Android.com/apk/res/Android"
  xmlns:app="http://schemas.Android.com/apk/res-auto">
<data>

</data>

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">

        <Android.support.design.widget.CoordinatorLayout
            Android:id="@+id/homeCoordinator"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:layout_above="@+id/bnHome" //above bottom navigation
            >

            <Android.support.design.widget.AppBarLayout
                Android:id="@+id/homeAppbar"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:elevation="0dp"
                Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <RelativeLayout
                    Android:id="@+id/rlTopLayout"
                    Android:layout_width="match_parent"
                    Android:layout_height="?android:actionBarSize"
                    Android:layout_alignParentTop="true"
                    Android:background="@color/white"
                    Android:orientation="horizontal"
                    app:layout_scrollFlags="scroll|enterAlways">

                    <Android.support.v7.widget.AppCompatImageView
                        Android:id="@+id/ivHomeLogo"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_alignParentLeft="true"
                        Android:layout_alignParentStart="true"
                        Android:layout_centerVertical="true"
                        Android:layout_marginLeft="@dimen/_minus15sdp"
                        Android:src="@mipmap/launcher_logo" />

                    <Android.support.v7.widget.AppCompatTextView
                        Android:id="@+id/tvHomeTitle"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_centerVertical="true"
                        Android:layout_gravity="center_vertical"
                        Android:layout_toEndOf="@+id/ivHomeLogo"
                        Android:layout_toRightOf="@+id/ivHomeLogo"
                        Android:text="@string/app_name"
                        Android:textColor="@color/colorPrimary"
                        Android:textSize="@dimen/_16ssp"
                        Android:textStyle="bold" />

                    <Android.support.v7.widget.AppCompatImageView
                        Android:id="@+id/ivHomeSurprise"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_toLeftOf="@id/ivHomeSearch"
                        Android:layout_toStartOf="@id/ivHomeSearch"
                        Android:paddingBottom="@dimen/_13sdp"
                        Android:paddingTop="@dimen/_13sdp"
                        Android:src="@mipmap/surprise_icon_blue" />

                    <Android.support.v7.widget.AppCompatImageView
                        Android:id="@+id/ivHomeSearch"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_alignParentEnd="true"
                        Android:layout_alignParentRight="true"
                        Android:layout_centerVertical="true"
                        Android:padding="@dimen/_10sdp"
                        app:srcCompat="@drawable/ic_search_grey" />

                </RelativeLayout>

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

            <FrameLayout
                Android:id="@+id/flHomeContainer"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

        <Android.support.design.widget.BottomNavigationView
            Android:id="@+id/bnHome"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_alignParentBottom="true" // align parent bottom true
            app:itemBackground="@color/white_smoke"
            app:itemIconTint="@color/bnv_color_state"
            app:itemTextColor="@color/bnv_color_state"
            app:menu="@menu/bottom_navigation_main"
            app:onNavigationItemSelected="@{(item)->vm.onNavigationItemSelected(item)}" />

    </RelativeLayout>

    <Android.support.v4.widget.ContentLoadingProgressBar
        Android:id="@+id/clpb_progress"
        style="?android:attr/progressBarStyle"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:visibility="@{vm.isLoading}" />
</FrameLayout>

1
jaffar

Bon, de meilleures solutions sans avoir à coder en dur le fond

Vous pouvez le placer dans un objet ConstraintLayout et définir la hauteur du contenu sur 0dp, mais aussi définir bottomToTop = "@ id/bottomViewId" ou l’identificateur que vous avez défini pour bottomViewNavigator.

Voici un exemple.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".StartActivity">

    <fragment
        Android:id="@+id/nav_controller"
        Android:name="androidx.navigation.fragment.NavHostFragment"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <com.google.Android.material.bottomnavigation.BottomNavigationView
        Android:id="@+id/bottom_navigation"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        Android:background="@color/colorPrimary"
        app:itemIconTint="@Android:color/white"
        app:itemTextColor="@Android:color/white"
        app:menu="@menu/bottom_navigation_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
1
Cristian Gomez
/Try to replace your code with this/

<?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:id="@+id/container"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
>

<include layout="@layout/user_app_bar"/>

<FrameLayout
    Android:id="@+id/fragment_frame"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:paddingBottom="58dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

 <Android.support.design.widget.FloatingActionButton
   Android:id="@+id/fab"
   Android:layout_width="wrap_content"
   Android:layout_height="wrap_content"
   Android:layout_margin="@dimen/fab_margin"
   app:layout_anchorGravity="bottom|end"
   app:layout_anchor="@id/app_bar"
   app:srcCompat="@drawable/ic_edit_white_24px" />


 <Android.support.design.widget.BottomNavigationView
    Android:id="@+id/navigation"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    Android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation"
    app:itemTextColor="@color/colorPrimaryDark"
    app:itemIconTint="@color/colorPrimaryDark"
    />

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