web-dev-qa-db-de.com

Android Untere Navigationsleiste mit Schlagschatten

Ich implementiere Bottom Navigation Bar in Android App mit Googles Support Design Library v25.1. . Gibt es eine Möglichkeit, Schlagschatten hinzuzufügen Effekt, wie aktuell Android native Google Photos App?

enter image description here

androidandroid-support-libraryandroid-support-designandroid-bottomnav
17
Jan Slominski

Mit der einfachen Ansicht und ihrem Hintergrund können Sie Ihren eigenen Schatten direkt über der unteren Leiste zeichnen:

<View
    Android:layout_width="match_parent"
    Android:layout_height="4dp"
    Android:layout_above="@id/bottom_bar"
    Android:background="@drawable/shadow"/>

drawable/shadow.xml:

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <gradient
        Android:startColor="#1F000000"
        Android:endColor="@Android:color/transparent"
        Android:angle="90" />
</shape>

Bei dieser Vorgehensweise treten auch keine Kompatibilitätsprobleme auf.

75
Alexander Bilchuk

Mithilfe der Ansicht können Sie jeder Ansicht Schatten hinzufügen

<TextView
Android:id="@+id/myview"
...
Android:elevation="2dp"

Android:background="@drawable/myrect" />

Weitere Informationen finden Sie unter this

4
SGR

Für diejenigen, die Material Component verwenden - dies wurde behoben von com.google.Android.material:material:1.1.0-alpha09.

Verfügbar seit 1.1.0-alpha05: https://github.com/material-components/material-components-Android/releases/tag/1.1.0-alpha05

Verwenden Android:elevation="4dp" Höhenschatten einstellen.

Vergessen Sie auch nicht, clipChildren="false" in Ihrem Hauptlayout, sonst wird der Schatten überschrieben.

2
guy.gc

Für diejenigen, die ein CoordinatorLayout mit der unteren Navigationsleiste (oder BottomAppBar) verwenden, können Sie Folgendes verwenden, um einen Schatten über der Leiste anzuhängen:

<View
    Android:layout_width="match_parent"
    Android:layout_height="4dp"
    Android:background="@drawable/shadow"
    app:layout_anchor="@+id/toolbar"
    app:layout_anchorGravity="top"/>

Offensichtlich ersetzen Sie die @+id/toolbar mit der ID der unteren Navigationsleiste

2
Andy S