web-dev-qa-db-ja.com

CoordinatorLayoutでBottomNavigationViewがオーバーラップするFrameLayout

以下は私のレイアウトxmlです。ここでの問題は、BottomNavigationViewがFrameLayoutと重なっていることです。 FrameLayoutをBottomNavigationViewの上部に引き伸ばしてほしかった。

FrameLayoutにpaddingBottomを追加するなどのトリックを試しましたが、他にもっと良い解決策があるかどうか疑問に思います。ありがとう。

<?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>

更新：user_app_bar.xmlの詳細。 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
15
hjchin

あなたの問題に対する簡単な解決策があります。これは、marginBottomのFrameLayoutのドキュメンテーションによると、56dpのheightにBottomNavigationViewを配置することです。携帯画面によっては交換可能かどうかわかりません。ドキュメントでも高さの変更については何も述べられていません。一部のアプリで使用しましたが、BottomNavigationViewの高さが変化していることに気づきませんでした。ただし念のため確認してください。これがお役に立てば幸いです。

6
Yupi

CoordinatorLayoutとBottomNavigationViewをRelativeLayout内に配置します

bottomNavigation Android：layout_alignParentBottom = "true"および上記のCoordinatorLayoutレイアウトとAndroid：layout_above = "@ + id/{BottomNavigationView-ID}"

レイアウトを確認してください

<?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>
2
jaffar

BottomViewをハードコーディングする必要がない、より良いソリューション

これをConstraintLayout内に配置してコンテンツの高さを0dpにし、bottomToTop = "@ id/bottomViewId"またはbottomViewNavigatorに入力したIDを設定することもできます。

例を示します。

<?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>
2
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

この行をBottomNavigationView Android：background = "？android：attr/windowBackground"に追加します

<com.google.Android.material.bottomnavigation.BottomNavigationView
        Android:id="@+id/app_navigation"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom"
        app:labelVisibilityMode="labeled"
        Android:background="?android:attr/windowBackground"
        app:menu="@menu/app_navigation" />
0
Amit Sharma