web-dev-qa-db-fra.com

Comment ajouter une ombre inférieure à la mise en page

Bonjour, j'ai besoin d'ajouter des ombres sous la disposition de mes onglets (comme dans Skype). 

 shadow_skype

Mon activité xml:

    <RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">
    <Android.support.v7.widget.Toolbar xmlns:local="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:minHeight="?attr/actionBarSize"
        Android:background="@color/splashGreenTop"
        local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    <Android.support.design.widget.TabLayout
        Android:id="@+id/tab_layout"
        Android:layout_below="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="?attr/colorPrimary"
        Android:elevation="0dp"
        Android:minHeight="?attr/actionBarSize" />
    <FrameLayout
        Android:layout_width="match_parent"
        Android:layout_below="@+id/tab_layout"
        Android:id="@+id/tabContainer"
        Android:layout_height="match_parent" />
</RelativeLayout>

Lorsque j’ai ajouté Android:elevation="10dp" à Tablayout, une ombre a été ajoutée en bas et en haut. Il me faut juste en bas. Voir l'image ...

 enter image description here

Comment puis-je faire ceci ? Merci d'avance.

androidxmltoolbarshadow
13
puko

Ajoutez simplement l’altitude à votre Tablayout (0dp - 25dp). Lisez les instructions Conception du matériau pour plus d'informations sur l'altitude.

Android:elevation="10dp"

MODIFIER:
Ajoutez-le à la fois à votre tablayout et à votre barre d’outils

<Android.support.v7.widget.Toolbar xmlns:local="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:minHeight="?attr/actionBarSize"
    Android:background="@color/splashGreenTop"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    Android:elevation="10dp" />
<Android.support.design.widget.TabLayout
    Android:id="@+id/tab_layout"
    Android:layout_below="@+id/toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="?attr/colorPrimary"
    Android:minHeight="?attr/actionBarSize" 
    Android:elevation="10dp"/>
27
Drilon Blakqori

C'est une excellente option pour ajouter des ombres sous la barre d'outils.

 <RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">
    <Android.support.v7.widget.Toolbar xmlns:local="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:minHeight="?attr/actionBarSize"
        Android:background="@color/splashGreenTop"
        local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    <Android.support.design.widget.TabLayout
        Android:id="@+id/tab_layout"
        Android:layout_below="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="?attr/colorPrimary"
        Android:elevation="0dp"
        Android:minHeight="?attr/actionBarSize" />

       <View
        Android:layout_width="match_parent"
        Android:layout_height="5dp"
        Android:layout_below="@+id/tab_layout"
        Android:background="@drawable/toolbar_dropshadow" />
    <FrameLayout
        Android:layout_width="match_parent"
        Android:layout_below="@+id/tab_layout"
        Android:id="@+id/tabContainer"
        Android:layout_height="match_parent" />
</RelativeLayout>

puis créez une xml dans drawable comme ceci
@ drawable/toolbar_dropshadow: 

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

Changez la couleur de départ et la couleur de fin à appliquer

7
Quick learner

Vous pouvez ajouter TabLayout en tant qu'enfant dans AppBarLayout qui a une ombre par défaut ou vous pouvez spécifier la profondeur de l'ombre par app: elevation = "xdp" 

   <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:elevation="xdp">

        <Android.support.v7.widget.Toolbar 
        ...
        />

        <Android.support.design.widget.TabLayout 
        ...
        />

    </Android.support.design.widget.AppBarLayout>
4
shahrukhamd

Il existe en fait une solution assez simple: Il suffit de placer la barre d’outils et le TabLayout dans un AppBarLayout. Par exemple:

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ToolbarTheme"
        app:titleTextAppearance="@style/ThemeOverlay.AppCompat.ActionBar"
        Android:background="@color/colorPrimary"/>

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tab_layout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/colorPrimary"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</Android.support.design.widget.AppBarLayout>

Cela fonctionne parfaitement pour moi et c'est la manière habituelle de combiner la barre d'outils et la tabLayout.

2
Moritz Hertler

Essayez d'ajouter une vue simple entre TabLayout et Toolbar. Définissez l'arrière-plan de cette vue en tant que dégradé imitant l'ombre.

Shadow.xml 

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

Ajoutez une élévation à votre Tablayout. Conception matérielle

Android:elevation="15dp"
0
Jaydip Umaretiya