Нижний лист над нижней навигацией

Question

Нижний лист над нижней навигацией

Моя цель - разместить "нижний лист" поверх BottomNavigationView как это:

Но так и остается. Оба взгляда рушатся:

Это xml моей основной деятельности:

<?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"
android:background="@drawable/tierrota"
tools:context="com.example.juanjose.myapplication.ViajesActivity">

<!-- include main content -->
<include layout="@layout/bottomsheet" />

<!-- include bottom sheet -->
<include layout="@layout/bottom_navigation" />

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

Кодекс bottom_navigation:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorClarito"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

И код нижнего листа

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="80dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

<TextView
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@color/colorBackgroundSemi"
    android:gravity="center"
    android:text="Bandeja de entrada"
    android:fontFamily="@font/eraslght"
    android:textColor="@color/colorLetra"
    app:layout_anchor="@+id/bottom_navigation"
    app:layout_anchorGravity="top"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="coisa2"
    android:textColor="@android:color/white" />

</LinearLayout>

Я новичок в этих двух элементах. Есть кто-то, кто знает, как добиться того, что я ищу?

Я хочу, чтобы мой "нижний лист" действовал как таковой и мог расширяться. Моя конечная цель - добавить RecyclerView внутри BottomSheet,

7

android material-design bottomnavigationview bottom-sheet

Источник

user7133814 06 фев '18 в 18:30

6 ответов

Решение

Чтобы использовать BottomSheet, он должен быть дочерним по отношению к CoordinatorLayout. Здесь я использовал относительное расположение в качестве родительского расположения для нижней навигации, чтобы остаться внизу, а затем CoordinatorLayout над нижней навигацией. Надеюсь, это поможет.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="@android:color/transparent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_above="@id/bottom_navigation_parent"
        android:layout_height="match_parent">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="?attr/colorPrimary" />


        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/bottom_sheet_parent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

            <LinearLayout
                android:id="@+id/bottom_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <View
                    android:layout_width="20dp"
                    android:layout_height="4dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:background="@drawable/view_bottom_sheet_top" />

                <TextView
                    android:id="@+id/near_by"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/normal"
                    android:gravity="center"
                    android:includeFontPadding="false"
                    android:padding="10dp"
                    android:text="Book Now"
                    android:textAllCaps="true"
                    android:textColor="?attr/colorPrimaryText"
                    android:textSize="12sp" />

            </LinearLayout>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view_maps"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/bottom_view"
                android:layoutAnimation="@anim/layout_animation">

            </android.support.v7.widget.RecyclerView>

        </RelativeLayout>



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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/bottom_navigation_parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:fitsSystemWindows="true"
        app:elevation="1dp">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorContainerBackground"

            />

        <LinearLayout
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:layout_alignParentBottom="true"
            android:background="@android:color/transparent"
            android:baselineAligned="false"
            android:orientation="horizontal">


            <RelativeLayout
                android:id="@+id/home_parent"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:clickable="true"
                android:focusable="true"
                android:paddingTop="@dimen/item_padding"
                android:paddingBottom="@dimen/item_padding_bottom">

                <ImageView
                    android:id="@+id/home"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_centerHorizontal="true"
                    android:contentDescription="@string/app_name"
                    android:src="@drawable/ic_home_24_dp"
                    android:tint="?attr/colorAccent"

                    />

                <TextView
                    style="@style/NormalTextPrimary"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/home"
                    android:layout_marginTop="5dp"
                    android:gravity="center"
                    android:text="@string/home"
                    android:textColor="?attr/colorAccent"
                    android:textSize="12sp"
                    tools:ignore="SmallSp"

                    />
            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/profile_parent"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:focusable="true"
                android:paddingTop="@dimen/item_padding"
                android:paddingBottom="@dimen/item_padding_bottom">

                <ImageView
                    android:id="@+id/profile"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_centerHorizontal="true"
                    android:contentDescription="@string/app_name"
                    android:src="@drawable/ic_notification_24_dp"
                    android:tint="@color/colorDefault" />

                <TextView

                    style="@style/NormalTextPrimary"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/profile"
                    android:layout_marginTop="5dp"
                    android:gravity="center"
                    android:text="@string/profile"
                    android:textColor="@color/colorDefault"
                    android:textSize="10sp"
                    tools:ignore="SmallSp" />

            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/notification_parent"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:focusable="true"
                android:paddingTop="@dimen/item_padding"
                android:paddingBottom="@dimen/item_padding_bottom">

                <ImageView
                    android:id="@+id/notification_icon"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_centerHorizontal="true"
                    android:contentDescription="@string/app_name"
                    android:src="@drawable/ic_notification_24_dp"
                    android:tint="@color/colorDefault"

                    />

                <TextView
                    style="@style/NormalTextPrimary"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/notification_icon"
                    android:layout_marginTop="5dp"
                    android:gravity="center"
                    android:text="@string/notification"
                    android:textColor="@color/colorDefault"

                    android:textSize="10sp"

                    tools:ignore="SmallSp" />
            </RelativeLayout>


        </LinearLayout>


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


</RelativeLayout>

Не забудьте добавить это в свою деятельность / фрагмент

private RelativeLayout bottomSheetParentLayout;
    private BottomSheetBehavior mBottomSheetBehaviour;

   mBottomSheetBehaviour = BottomSheetBehavior.from(bottomSheetParentLayout);

  if (bottomNavigation != null) {

        mBottomSheetBehaviour.setPeekHeight(bottomNavigation.getHeight() + 90);

    }

7

Источник

user6560792 09 апр '19 в 09:40

Оберните два элемента внутри линейного макета. Не уверен, как ведет себя макет координатора, но я думаю, что он не позволит вам "упорядочить" элементы (аналогично макету фрейма).

2

Источник

user7464072 06 фев '18 в 19:11

Если у вас также есть система CollapsingToolBar/Toolbar, это лучшее решение для вас:

<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:clickable="true">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/cord_main_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:fitsSystemWindows="true"
        app:layout_constraintBottom_toTopOf="@id/home_bottom_navigation_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/home_appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/home_frag_toolbar"
                style="@style/Widget.Toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:logo="@drawable/ic_infinet_logo_white"
                app:navigationIcon="@drawable/ic_back_arrow" />

        </com.google.android.material.appbar.AppBarLayout>

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

        <FrameLayout
            android:id="@+id/bottom_sheet_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:clickable="true"
            app:behavior_hideable="true"
            app:behavior_peekHeight="@dimen/mini_player_height"
            app:behavior_skipCollapsed="false"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

            <FrameLayout
                android:id="@+id/player_frag_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/player_mini_frag_container"
                android:name="com.kokonetworks.kokonet.player.PlayMusicMiniFragment"
                android:layout_width="match_parent"
                android:layout_height="@dimen/mini_player_height" />

        </FrameLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/home_bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:itemBackground="@color/colorPrimary"
        app:itemHorizontalTranslationEnabled="false"
        app:itemIconTint="@drawable/nav_item_background"
        app:itemTextColor="@drawable/nav_item_background"
        app:labelVisibilityMode="auto"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/home_bottom_navigation_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

Это гарантирует, что:

BottomSheet - дочерний элемент CoordinatorLayout
BottomNavigation еще упирается внизу
Расположение CollapsingToolbar/AppBarLayout по-прежнему выполняется, как и ожидалось

1

Источник

user1464571 16 фев '20 в 16:10

Это сработало для меня..

      val Int.dp: Int
    get() = (this * Resources.getSystem().displayMetrics.density).toInt()

class SomeDialogFragment : BottomSheetDialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = super.onCreateDialog(savedInstanceState)

        // Translate the bottom sheet so that it appears above the Tab Bar
        val contentView = View.inflate(context, R.layout.fragment_bottom_sheet, null)
        dialog.setContentView(contentView)
        (contentView.parent as View).translationY = (-56.dp).toFloat()

        ...

0

Источник

user2840837 12 окт '23 в 18:05

Чтобы использовать BottomSheet, он должен быть дочерним элементом CoordinatorLayout, как сказал ямнаран. Так просто:

Поместите все в RelativeLayout
Поместите BottomSheet в CoordinatorLayout
Установите для свойства BottomNavigation "alignParentBottom" значение true.

Создайте новый XML-файл в /res/value и поместите

 <resources>
   <dimen name="bottomNavigationHeight">50dp</dimen>
 </resources>

Установите для MarginBottom CoordinatorLayout (родительский элемент BottomSheet) значение
```
android:layout_marginBottom="@dimen/bottomNavigationHeight"
```

Вы можете пропустить шаги 4 и 5, установив для поля MarginBottom CoordinatorLayout значение:

    android:layout_marginBottom="50dp"

Но в ближайшем будущем это может привести к путанице.

Весь код должен выглядеть примерно так:

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

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/clBottomSheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/bottomNavigationHeight">

        <FrameLayout
            android:id="@+id/standardBottomSheet"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:elevation="9dp"
            style="?attr/bottomSheetStyle"
            app:layout_behavior = "com.google.android.material.bottomsheet.BottomSheetBehavior"
            app:behavior_peekHeight="80dp">

        </FrameLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bttm_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_menu_nav"
        >
    </com.google.android.material.bottomnavigation.BottomNavigationView>

</RelativeLayout>

-1

Источник

user12806400 24 мар '20 в 04:08

Другие вопросы по тегам android material-design bottomnavigationview bottom-sheet

user3145960 06 фев '18 в 19:15 2018-02-06 19:15 · Accepted Answer · 2018-02-06 19:15

Насколько я понял твой вопрос, ты хочешь RecyclerView чтобы быть показан в вашем нижнем листе. Вот что делает проблему намного проще. Позвольте мне рассказать вам, как.

Вы должны иметь фиксированную высоту для нижней навигации, как это.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorClarito"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

Теперь на нижнем листе настройте RecyclerView с clipToPadding атрибут в этом. Который будет иметь некоторые отступы в нижней части вашего RecyclerView, Идея состоит в том, чтобы не иметь ничего в закрытой зоне RecyclerView который выходит с нижним листом.

Вот как вы должны объявить RecyclerView в вашем нижнем листе.

<android.support.v7.widget.RecyclerView
    android:id="@+id/my_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:paddingBottom="80dp" />

Обратите внимание, что я установил paddingBottom именно к 80dp которая является высотой навигационного представления.

Я надеюсь, что это может помочь.