web-dev-qa-db-fra.com

Android Barre de navigation inférieure avec ombre portée

J'implémente barre de navigation inférieure dans Android utilisant bibliothèque de conception de support de Google v25.1. . Existe-t-il un moyen d'ajouter une ombre portée) effet, identique à l'actuel Android application native Google Photos?

enter image description here

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

Vous pouvez dessiner votre propre ombre juste au-dessus de la barre inférieure en utilisant la vue simple et son arrière-plan:

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

En outre, il n'y a aucun problème de compatibilité si vous utilisez cette approche.

75
Alexander Bilchuk

Vous pouvez utiliser l'élévation pour ajouter des ombres à n'importe quelle vue

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

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

Reportez-vous this pour plus d'informations

4
SGR

Pour ceux qui utilisent le composant de matériau - cela a été corrigé par com.google.Android.material:material:1.1.0-alpha09.

Disponible depuis 1.1.0-alpha05: https://github.com/material-components/material-components-Android/releases/tag/1.1.0-alpha05

Utilisation Android:elevation="4dp" pour définir l'ombre d'élévation.

N'oubliez pas non plus de définir clipChildren="false" sur votre mise en page principale, sinon l'ombre sera remplacée.

2
guy.gc

Pour ceux qui utilisent un CoordinatorLayout avec la barre de navigation inférieure (ou BottomAppBar), vous pouvez utiliser ce qui suit pour attacher une ombre au-dessus de la barre:

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

Évidemment, remplacez le @+id/toolbar avec l'ID de la barre de navigation inférieure

2
Andy S