아래쪽 탐색 모음 안에 FAB이 잘리지 않도록하십시오.

Question

아래쪽 탐색 모음과 FAB를 겹치려고합니다. 내 내비게이션 바는 다음과 같이 할 :

을하지만 그 대신 그것과 같이 버튼을 차단 :

가 어떻게이 FAB 방지 할 차단되는? 여기 내 XML는 다음과 같습니다

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.mobgen.designsprintapp.ui.main.MainActivity"> 

    <LinearLayout 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:orientation="vertical"> 

     <android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

     <android.support.design.widget.BottomNavigationView 
      android:id="@+id/navigation" 
      android:layout_width="match_parent" 
      android:layout_height="56dp" 
      android:background="?android:attr/windowBackground" 
      android:backgroundTint="@color/colorPrimary" 
      app:itemBackground="@color/colorPrimary" 
      app:itemIconTint="@color/nav_item_color_state" 
      app:itemTextColor="@android:color/black" 
      app:menu="@menu/navigation" > 

      <android.support.design.widget.FloatingActionButton 
       android:id="@+id/tools" 
       android:layout_width="56dp" 
       android:layout_height="56dp" 
       android:layout_gravity="center" 
       android:layout_marginBottom="8dp" 
       android:elevation="6dp" 
       android:scaleType="center" 
       app:srcCompat="@drawable/play" /> 
      </android.support.design.widget.BottomNavigationView> 
    </LinearLayout> 
</android.support.design.widget.CoordinatorLayout> 

Answer 1

귀하의 문제가 명시 적으로 폭과 FloatingActionButton의 어이 매개 변수를 지정했는지, 그것은 어떤 너비/높이를 취할 수 없습니다 반면. app:fabSize 매개 변수는 fab에 대해 auto, mini 및 normal의 3 가지 크기를 지정합니다.

남기기 layout_width

과 같은 wrap_contentlayout_height 및 (목록이나 다른 파라미터)를 app:fabSize="normal"를 사용하여 원하는 크기를 지정 팹.

fab에 내부 패딩이 있기 때문에 BottomNavigationView의 높이를 wrap_content으로 지정하십시오. 바깥 쪽 레이아웃 외부의 아이가 산만 해지지 않도록

---

는 둘러싸 ViewGroup에 android:clipChildren="false"을 적용합니다.

Answer 2

문제는 버튼이 내비게이션 막대입니다. 바깥쪽으로 이동하여 완전히 보이게하고 네비게이션 바 위에 을 붙이십시오.

<LinearLayout 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:orientation="vertical"> 

     <android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

     <android.support.design.widget.BottomNavigationView 
      android:id="@+id/navigation" 
      android:layout_width="match_parent" 
      android:layout_height="56dp" 
      android:background="?android:attr/windowBackground" 
      android:backgroundTint="@color/colorPrimary" 
      app:itemBackground="@color/colorPrimary" 
      app:itemIconTint="@color/nav_item_color_state" 
      app:itemTextColor="@android:color/black" 
      app:menu="@menu/navigation" > 

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

     <android.support.design.widget.FloatingActionButton 
       android:id="@+id/tools" 
       android:layout_width="56dp" 
       android:layout_height="56dp" 
       android:layout_gravity="center" 
       android:layout_marginBottom="8dp" 
       android:elevation="6dp" 
       android:layout_anchor="@id/navigation" 
       android:layout_anchorGravity="top|center" 
       android:scaleType="center" 
       app:srcCompat="@drawable/play" /> 
    </LinearLayout>