टैब लेआउट में नीचे छाया कैसे जोड़ें

Question

हाय मुझे अपने टैब लेआउट (जैसे स्काइप में) के नीचे छाया जोड़ने की आवश्यकता है।

मेरे गतिविधि 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> 

जब मैं Tablayout को android:elevation="10dp" जोड़ने के लिए, छाया जोड़ा गया है नीचे और शीर्ष .. मैं सिर्फ नीचे की जरूरत है। छवि देखें ...

मैं यह नहीं कैसे कर सकते हैं? अग्रिम धन्यवाद।

Answer 1

बस अपने Tablayout (0dp - 25dp) पर ऊंचाई जोड़ें। ऊंचाई के बारे में अधिक जानकारी के लिए material design दिशानिर्देश पढ़ें।

android:elevation="10dp" 

संपादित करें:
TabLayout और टूलबार के बीच एक सरल दृश्य जोड़ने के लिए दोनों अपने 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"/> 

Answer 2

प्रयास करें। उस दृश्य के लिए पृष्ठभूमि को ढाल के रूप में सेट करें जो छाया की नकल करता है।

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> 

Answer 3

यहाँ चाल है आप उपकरण पट्टी के नीचे एक दृश्य का उपयोग करें और के रूप में यू की आवश्यकता होती है

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

तरह अनुकूलित कर सकते हैं तो यह

तरह drawable में एक 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> 

एसए बदलें आरटी रंग और अंत रंग के रूप में आप

Answer 4

अपने Tablayout में ऊंचाई जोड़ें। बस एक AppBarLayout के अंदर टूलबार और TabLayout डाल: Material Design

android:elevation="15dp" 

Answer 5

वहाँ वास्तव में एक काफी सरल समाधान है। उदाहरण के लिए:

<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-/टूलबार और TabLayout गठबंधन करने के लिए है।

Answer 6

आप AppBarLayout में एक बच्चे जो डिफ़ॉल्ट रूप से एक छाया के रूप में TabLayout जोड़ सकते हैं या आप एप्लिकेशन द्वारा छाया गहराई निर्दिष्ट कर सकते हैं: ऊंचाई = "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>