web-dev-qa-db-ja.com

androidでtablayoutとツールバーに下の影を追加する方法

こんにちは、（スカイプのように）タブレイアウトの下に影を追加する必要があります。

shadow_skype

私のアクティビティ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>

Android:elevation="10dp"をTablayoutに追加すると、影が下と上に追加されました。画像を見る...

enter image description here

これどうやってするの ？前もって感謝します。

androidxmltoolbarshadowandroid-elevation
14
puko

Tablayout（0dp-25dp）に標高を追加するだけです。標高の詳細については、 材料設計 ガイドラインをご覧ください。

Android:elevation="10dp"

編集：
タブレイアウトとツールバーの両方に追加します

<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"/>
33
Drilon Blakqori

これは、ツールバーの下に影を追加するのに最適なオプションです

目的のviewのtablayoutの下に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>

次に、このようなドロウアブルでxmlを作成します
@ 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>

startcolorとendcolorを変更して、適用したい

9
Quick learner

デフォルトで影を持つ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>
4
shahrukhamd

実際には非常に簡単な解決策があります。ツールバーと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>

これは私にとって完璧に機能し、App-/ToolbarとTabLayoutを組み合わせる一般的な方法です。

2
Moritz Hertler

TabLayoutとToolbarの間に単純なビューを追加してみてください。そのビューの背景を、影を模したグラデーションとして設定します。

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

Tablayoutに標高を追加します。 材料設計

Android:elevation="15dp"
0
Jaydip Umaretiya