So stellen Sie die Höhe auf Unten Navigation

Question

So durch die support V25. Wir haben eine neue Komponente namens Bottom Navigation.

die Design-Richtlinien folgen, die Bottom Navigation des elevation sollte 8dp (https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-specs)

sein, aber ich kann die elevation es nicht gesetzt.

Jeder Vorschlag, Beispiel würde geschätzt werden. Vielen Dank!

UPDATE XML CODE

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

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

<FrameLayout 
    android:id="@+id/contentFrame" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_above="@id/bottom_navigation" 
    android:background="#EDEDED"/> 

Answer 1

So, jetzt (25.1.0) können wir die android:background von BNV zu @android:color/white setzen müssen, um den Schatten zu haben. Es wird nicht angezeigt, wenn Sie eine andere Farbe (dh Ihre Grundfarbe)

Answer 2

Ich hatte das gleiche Problem und eine @android:color/white als OP vorgeschlagen wurde, war in meinem Fall nicht akzeptabel. Da wir also keinen "Schatten" mit Höhe und Hintergrund bekommen können, müssen wir ihn hacken.

Mein Ansatz ist das Hinzufügen einer Schattenansicht innerhalb des Rahmenlayouts, um die Höhe zu "imitieren".

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

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

<FrameLayout 
    android:id="@+id/contentFrame" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_above="@id/bottom_navigation" 
    android:background="#EDEDED"/> 

    <some.kind.of.pager.or.other.content.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 

    <View 
     android:id="@+id/shadow_view" 
     android:layout_width="match_parent" 
     android:layout_height="4dp" 
     android:layout_gravity="bottom" 
     android:background="@drawable/shadow_gradient" /> 

</FrameLayout> 

wo der Hintergrund der Schatten Blick nichts anderes als eine Form Steigung ist, die über dem Boden nav Ansicht nur über allen anderen positioniert ist, so etwas wie:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient 
     android:angle="90" 
     android:endColor="@android:color/transparent" 
     android:startColor="#8f000000" /> 
</shape> 

Hope this jemand hilft.

Answer 3

Das funktioniert! Beachten Sie, dass Sie die Farbe der unteren Leiste ändern kann mit:

"app:itemBackground="@color/white" 

aber man muss hinzufügen:

android:background="@android:color/white" 

Complete:

<android.support.design.widget.BottomNavigationView 
    android:id="@+id/navigation" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:background="@android:color/white" 
    app:elevation="4dp" 
    app:itemBackground="@color/white" 
    app:itemIconTint="@color/grey" 
    app:itemTextColor="@color/grey" 
    app:menu="@menu/my_navigation_items" />