[翻译]  How to add bottom shadow to tab layout

[CHINESE]  如何将底部阴影添加到选项卡布局


Hi i need add shadow under my tab layout (like in skype).

嗨,我需要在我的标签布局下添加阴影(如在Skype中)。

shadow_skype

My activity xml:

我的活动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>

When i add android:elevation="10dp" to Tablayout, shadow was added bottom and top .. I need just bottom. See image...

当我向Tablayout添加android:elevation =“10dp”时,阴影被添加到底部和顶部..我只需要底部。见图片......

enter image description here

How can i do this ? Thanks in advance.

我怎样才能做到这一点 ?提前致谢。

6 个解决方案

#1


22  

Just add elevation to your Tablayout (0dp - 25dp). Read the material design guidelines for more information about elevation.

只需向Tablayout添加高程(0dp - 25dp)即可。有关高程的更多信息,请阅读材料设计指南。

android:elevation="10dp"

EDIT:
add it to both your tablayout and toolbar

编辑:将它添加到您的tablayout和工具栏

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

#2


3  

You can add TabLayout as a child in AppBarLayout which has a shadow by default or you can specify the shadow depth by app:elevation="xdp"

你可以在AppBarLayout中添加TabLayout作为子项,默认情况下有阴影,或者你可以通过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>

#3


3  

This is a Great option to add shadow below Toolbar

这是在工具栏下添加阴影的一个很好的选项

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

then create a xml in drawable like this
@drawable/toolbar_dropshadow:

然后像这样在@ drawable / toolbar_dropshadow中创建一个可绘制的xml:

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

Change the start color and end color as u want to apply

根据您的要求更改开始颜色和结束颜色

#4


2  

There is actually a quite simple solution: Just put the Toolbar and the TabLayout inside of an AppBarLayout. For example:

实际上有一个非常简单的解决方案:只需将工具栏和TabLayout放在AppBarLayout中。例如:

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

This works perfectly for me and it's the common way to combine the App-/Toolbar and the TabLayout.

这对我来说非常有效,这是组合App- / Toolbar和TabLayout的常用方法。

#5


1  

Try to add a simple View between TabLayout and Toolbar. Set background for that View as gradient which mimics shadow.

尝试在TabLayout和工具栏之间添加一个简单的视图。将该视图的背景设置为模仿阴影的渐变。

Shadow.xml

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>

#6


0  

Add elevation into your Tablayout. Material Design

在Tablayout中添加高程。材料设计

android:elevation="15dp"

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2018 ITdaan.com 粤ICP备14056181号