How to add bottom shadow to tab layout or Toolbar in android

廉价感情. 提交于 2020-02-10 13:37:28

问题


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

My activity 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...

How can i do this ? Thanks in advance.


回答1:


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

android:elevation="10dp"

EDIT:
add it to both your tablayout and toolbar

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


This is a Great option to add shadow below Toolbar

Add a view below the tablayout of your desired layout

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

<?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 startcolor and endcolor as u want to apply




回答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"

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


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

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




回答5:


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

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:


Add elevation into your Tablayout. Material Design

android:elevation="15dp"



回答7:


Use app:elevation="0dp" to remove the shadow.



来源:https://stackoverflow.com/questions/34675791/how-to-add-bottom-shadow-to-tab-layout-or-toolbar-in-android

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!