Spinner in the bottom bar

Question

Я пытаюсь создать нижний планшет, где он содержит 5 предметов, которые имеют 3 вида текста и 2 прядильника в нижней панели. Тем не менее, я не могу настроить такой же дизайн - пожалуйста, просмотрите изображения.

Первое изображение - как я хочу его получить, а второе изображение - как я получаю. Другая проблема заключается в том, что я получаю пространство в правой части фильтра на некоторых устройствах.

Вот мой дизайн-макет

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@color/colorPrimary" 
    android:orientation="horizontal"> 

    <TextView 
     android:id="@+id/checkindate" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:drawableTop="@drawable/calender" 
     android:text="CHECK IN DATE" 
     android:textAppearance="?android:attr/textAppearanceSmall" 
     android:textColor="#fff" /> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="match_parent" 
     android:layout_marginBottom="5dp" 
     android:layout_marginTop="5dp" 
     android:background="#30000000" /> 


    <TextView 
     android:id="@+id/checkintime" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:drawableTop="@drawable/timer" 
     android:text="CHECK IN TIME" 
     android:textAppearance="?android:attr/textAppearanceSmall" 
     android:textColor="#fff" /> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="match_parent" 
     android:layout_marginBottom="5dp" 
     android:layout_marginTop="5dp" 
     android:background="#30000000" /> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="5dp" 
     android:layout_weight="1" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/hrs" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:src="@drawable/clock" /> 

     <Spinner 
      android:id="@+id/hrspinner" 
      android:layout_width="wrap_content" 
      android:layout_height="20dp" /> 
    </LinearLayout> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="match_parent" 
     android:layout_marginBottom="5dp" 
     android:layout_marginTop="5dp" 
     android:background="#30000000" /> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="5dp" 
     android:layout_weight="1" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/rooms" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:src="@drawable/roomshr" /> 

     <Spinner 
      android:id="@+id/roomspinner" 
      android:layout_width="wrap_content" 
      android:layout_height="20dp" /> 
    </LinearLayout> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="match_parent" 
     android:layout_marginBottom="5dp" 
     android:layout_marginTop="5dp" 
     android:background="#30000000" /> 

    <TextView 
     android:id="@+id/filter" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:drawableTop="@drawable/filterr" 
     android:text="FILTER" 
     android:textAppearance="?android:attr/textAppearanceSmall" 
     android:textColor="#fff" /> 

</LinearLayout> 

Answer 1

Это плохой дизайн. Нижняя навигация должна быть для изменения экрана. Вот какой-то библиотеки
https://github.com/aurelhubert/ahbottomnavigation

Вот проектной документации от Google
https://material.google.com/components/bottom-navigation.html#

По моему мнению, фильтр лучше ставить на ToolBar или ActionBar.

---

Отредактировано:

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