टूलबार पर डिफ़ॉल्ट रूप से कोई छाया नहीं?

Question

मैं समर्थन पुस्तकालय v21 से नए टूलबार के साथ अपने ऐप को अपडेट कर रहा हूं। मेरी समस्या यह है कि अगर मैंने "उन्नयन" विशेषता सेट नहीं की तो टूलबार किसी भी छाया को नहीं डालता है। क्या यह सामान्य व्यवहार है या मैं कुछ गलत कर रहा हूं?

मेरा कोड है:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">

   <android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/my_awesome_toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary"
       android:elevation="4dp"
       android:minHeight="?attr/actionBarSize"
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

   <FrameLayout
       android:id="@+id/FrameLayout1"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       .
       .
       .

और मेरी गतिविधि में - ऑनक्रीट विधि:

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

Comments

क्या आप इसे लॉलीपॉप पर चलने वाले उपकरण पर देख रहे हैं?

— rlay3

लॉलीपॉप चलाने वाले एक उपकरण पर ऊंचाई की विशेषता के कारण छाया दिखाता है लेकिन किटकैट या पुराने संस्करणों पर नहीं। हाइट्स एट्रिब्यूशन के लिए अपेक्षित व्यवहार जैसा कि डॉक्यूमेंटेशन कहता है, लेकिन मैं यह उम्मीद कर रहा था कि डिफॉल्ट रूप से, एलीवेशन एट्रीब्यूट के बिना, शैडो को कास्ट किया जाएगा जैसे कि यह हर वर्जन पर एक्शन बार करता है।

— श्रीब्राइटसाइड

मैंने यहां एक संभावित समाधान पोस्ट किया: stackoverflow.com/a/26759202/553905

— बिली

OS संस्करण (नीचे देखें) के आधार पर उचित छाया कोड लागू करने के लिए फ़ोल्डर्स / स्टाइल और x.ml का उपयोग करें।

— राडोली

Answer 1

मैंने टूलबार के लिए अपनी स्वयं की ड्रॉप छाया सेट करना समाप्त कर दिया, सोचा कि यह किसी के लिए भी उपयोगी हो सकता है:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="top"
              android:orientation="vertical">

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

    <FrameLayout android:layout_width="match_parent"
                 android:layout_height="match_parent">

        <!-- **** Place Your Content Here **** -->

        <View android:layout_width="match_parent"
              android:layout_height="5dp"
              android:background="@drawable/toolbar_dropshadow"/>

    </FrameLayout>

</LinearLayout>

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

@ रंग / color_alizarin

<color name="color_alizarin">#e74c3c</color>

Comments

यदि आप जो उपकरण चला रहे हैं, तो अपना दृश्य छुपाना न भूलें> = लॉलीपॉप के लिए, यदि आप दो छायाओं के साथ समाप्त नहीं होंगे।

— mradzinski

यह इसके लिए गलत तरीका है क्योंकि आपको 5.0 लेआउट के लिए उस दृश्य को निकालना होगा। Android का उपयोग करें: windowContentOverlay या Android: इसके बजाय अग्रभूमि।

— राडली

Google से टूलबार सामग्री डिज़ाइन के बारे में , आपको android:layout_height="4dp"इसके बजाय छाया की ऊंचाई के लिए सेट करना चाहिए 5dp। दरअसल, ऊंचाई उसी तरह की होती है, जिस तरह की छाया आप पर निर्धारित करते हैं FrameLayout।

— अंगरेजुडी एच

मुझे इस समाधान में परेशानी हो रही है क्योंकि मैं अपनी गतिविधियों के लेआउट को आपके उदाहरण में फ्रेम लेआउट में बदल देता हूं, क्या आप इसके लिए काम करने का तरीका सोच सकते हैं?

— Zach Sperske

Android पर "android: endColor =" # c7c7c7 "का उपयोग करने की सलाह देते हुए: endColor =" # 88333333 "

— मोहम्मद फैसल

Answer 2

Google ने कुछ हफ्ते पहले डिज़ाइन सपोर्ट लाइब्रेरी को जारी किया और इस पुस्तकालय में इस समस्या का एक निफ्टी समाधान है।

एक निर्भरता के रूप में डिजाइन सहायता पुस्तकालय जोड़ें build.gradle:

compile 'com.android.support:design:22.2.0'

एक ड्रॉप छाया उत्पन्न करने के लिए AppBarLayoutअपने Toolbarलेआउट के आसपास एक रैपर के रूप में पुस्तकालय द्वारा आपूर्ति जोड़ें ।

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
       <android.support.v7.widget.Toolbar
           .../>
    </android.support.design.widget.AppBarLayout>

यहाँ परिणाम है:

डिज़ाइन समर्थन लाइब्रेरी के साथ बहुत सारे अन्य ट्रिक्स हैं।

1. http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
2. http://android-developers.blogspot.in/2015/05/android-design-support-library.html

AndroidX

ऊपर के रूप में लेकिन निर्भरता के साथ:

implementation 'com.google.android.material:material:1.0.0'

तथा com.google.android.material.appbar.AppBarLayout

Comments

AppBarLayoutएक आवरण के रूप में चारों ओर Toolbarसेट करना मेरे लिए कोई छाया निर्धारित नहीं करता है। ध्यान दें कि मैं एक नेविगेशन दराज का उपयोग नहीं करता हूं। यह क्यों काम नहीं करता है पर कोई विचार?

— avb

@ avb1994 यह सुनिश्चित करने के लिए नहीं कह सकता, मैंने इसे बिना किसी नाविक के परीक्षण किया है। क्या आप इसे लेआउट फ़ाइल के साथ एक प्रश्न के रूप में पोस्ट कर सकते हैं?

— बिनॉय बाबू

मेरा सवाल देखें: stackoverflow.com/questions/31115531/… आपकी टिप्पणी के लिए धन्यवाद

— avb

आपको 'com.android.support:support-v4:22.2.0' संकलन 'com.android.support:appcompat-v7:22.2.0' संकलन की आवश्यकता नहीं है, क्योंकि 'com.android.support संकलन करें। डिजाइन: 22.2.0 'उन पर निर्भर करता है

— एंड्री

ध्यान दें कि यह केवल लॉलीपॉप और इसके बाद के संस्करण के लिए काम करता है। यह पूर्व लॉलीपॉप से ​​काम नहीं करेगा क्योंकि यह केवल ViewCompat.setElevation () का उपयोग कर रहा है।

— अमीरुल ज़ीन

Answer 3

आप API 21 (Android लॉलीपॉप) से पहले ऊंचाई की विशेषता का उपयोग नहीं कर सकते। हालाँकि आप छाया को प्रोग्रामेटिक रूप से जोड़ सकते हैं, उदाहरण के लिए टूलबार के नीचे रखे कस्टम दृश्य का उपयोग करते हुए।

@ लेआउट / उपकरण पट्टी

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/blue"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

<View
    android:id="@+id/toolbar_shadow"
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:background="@drawable/toolbar_dropshadow" />

@ Drawable / toolbar_dropshadow

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

अपनी गतिविधि लेआउट में <include layout="@layout/toolbar" />

Comments

आप @layout/toolbarपूर्ण लेआउट फ़ाइल के साथ उदाहरण तय कर सकते हैं ?

— डैनियल गोमेज़ रिको

@ लेआउट / टूलबार के दो मूल विचार क्यों हैं? क्या आप कृपया पूरा उदाहरण प्रदान कर सकते हैं?

— RED_

Answer 4

ओएस संस्करण के आधार पर सही छाया शैली लागू करने के लिए फ़ोल्डरों का उपयोग करें / मान ।

5.0 उपकरणों के तहत , अपनी गतिविधि के मुख्य भाग में WindowContentOverlay जोड़ने के लिए /values/styles.xml का उपयोग करें:

<style name="MyViewArea">
    <item name="android:foreground">?android:windowContentOverlay</item>
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
</style>

फिर शामिल करने के लिए अपने थीम को बदलकर अपनी खुद की कस्टम छाया जोड़ें:

<item name="android:windowContentOverlay">@drawable/bottom_shadow</item>

आप यहां Google के IO ऐप शैडो रिसोर्स को पकड़ सकते हैं: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png

5.0 उपकरणों के लिए और बाद में , कस्टम हेडर का उपयोग करके अपने टूलबार में उन्नयन जोड़ने के लिए /values-v21/styles.xml का उपयोग करें :

<style name="MyViewArea">
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

ध्यान दें कि दूसरे मामले में, मुझे एक खाली MyViewArea स्टाइल बनाना था ताकि विंडोकॉन्टेंटऑवरले भी दिखाई न दे।

[अपडेट: संसाधन नाम बदले और Google छाया जोड़ा।]

Comments

क्या मुझे पता है कि MyBody और MyHeader क्या है? मुझे उन्हें कहां लागू करना चाहिए?

— चोक यान चेंग

मैंने नाम अपडेट किए: MyHeader अब MyToolbar है और MyBody MyViewArea है। आप इस तरह से xml लेआउट में स्टाइल असाइन कर सकते हैं: style = "@ style / MyToolbar"।

— राडली

MyViewArea को क्या लागू किया जाता है?

— ज़च स्पर्सके

आपका पृष्ठ / निकाय / दृश्य क्षेत्र।

— राडली

मुझे लगता है android:foregroundकि एपीआई 23 से पहले केवल फ्रेमलैट पर काम करता है।

— androidguy

Answer 5

इसने मेरे लिए बहुत अच्छा काम किया:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primary"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:minHeight="?attr/actionBarSize" />

</android.support.v7.widget.CardView>

Comments

यदि छाया खींचने के लिए पूर्व लॉलीपॉप कार्डव्यू पैड पर यह काम कैसे हो सकता है? यह वही है जो मुझे मिलता है: i.imgur.com/BIj8env.png इस उत्तर ने मेरे लिए काम किया और यह इस एक से कमियों से ग्रस्त नहीं है: stackoverflow.com/questions/26575197/…

— Aspir Dev

वास्तव में, आप AppBarLayout के साथ बेहतर हैं क्योंकि इस उत्तर में stackoverflow.com/a/31026359/1451716 मेरा उत्तर पुराना है, इससे पहले AppBarLayout जारी किया गया था

— इस्लाम ए। हसन

क्या यह भी कानूनी है? यह टूलबार के साथ उपयोग करने वाला नहीं है। हे भगवान!

— user155

Answer 6

आप seting रहे हैं, तो ToolBarके रूप में ActionBarतो बस फोन:

getSupportActionBar().setElevation(YOUR_ELEVATION);

नोट: इसके बाद कॉल करना होगा setSupportActionBar(toolbar);

Comments

क्या यह सिर्फ मेरे लिए है, या क्या नेविगेशन ड्रावर टूलबार की ऊंचाई को रीसेट करता है? मैंने इसे 0 पर सेट करने की कोशिश की, और यह काम कर गया, लेकिन फिर जब मैं नेविगेशन ड्रॉअर को खींचता हूं, तो मुझे लगता है कि इसमें फिर से छाया है ...

— android डेवलपर

setElevation()हालांकि केवल API-21 + के लिए परिभाषित किया गया है।

— सबिन सेबेस्टियन

@ सेबस्टियन समर्थन एक्शनबार ऊंचाई पिछले एपीआई के लिए भी काम करता है।

— रॉबर्टो बी।

आंतरिक रूप से जो उपयोग करता है ViewCompat.setElevation()और इस प्रकार केवल एपीआई 21 और ऊपर पर काम करेगा।

— बॉटलियाप

Android का उपयोग करें: WindowContentOverlay या Android: एपीआई के तहत 21 के लिए अग्रभूमि।

— राडेल

Answer 7

मैंने कहा

<android.support.v7.widget.Toolbar
...
android:translationZ="5dp"/>

टूलबार विवरण में और यह मेरे लिए काम करता है। 5.0+ का उपयोग करना

Answer 8

मेरी समस्या यह है कि अगर मैंने "उन्नयन" विशेषता सेट नहीं की तो टूलबार किसी भी छाया को नहीं डालता है। क्या यह सामान्य व्यवहार है या मैं कुछ गलत कर रहा हूं?

वह सामान्य व्यवहार है। इस पोस्ट के अंत में एफएक्यू भी देखें ।

Answer 9

घंटों तक इसके साथ रहा, यहाँ मेरे लिए क्या काम किया।

विजेट और विगेट्स elevationसे सभी विशेषताओं को हटा दें ( यदि आप कोई स्टाइल लागू कर रहे हैं)।appBarLayoutToolbarstyles.xml

अब गतिविधि के अंदर, elvationअपने पर लागू करें actionBar:

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);

यह काम करना चाहिए।

Comments

क्या होगा अगर मैं AppBarLayout पर ऊंचाई चाहता हूं, क्योंकि यह ढह सकता है / विस्तार कर सकता है?

— Android डेवलपर

setElevationपिक्सेल के रूप में एक पैरामीटर लेता है। आपको इसे उचित रूप से रूपांतरित करना होगा, जैसे(int) (3.0 / Resources.getSystem().getDisplayMetrics().density)

— Ely

Answer 10

आप इसके साथ काम भी कर सकते हैं RelativeLayout। यह लेआउट को थोड़ा कम करता है;)

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar" />

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_below="@id/toolbar"
        android:background="@drawable/toolbar_shadow" />
</RelativeLayout>

Answer 11

आप सभी की जरूरत मूल्य के android:margin_bottomबराबर है android:elevation। नहीं AppBarLayout, clipToPaddingआदि की आवश्यकता है।

उदाहरण:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_marginBottom="4dp"
    android:background="@android:color/white"
    android:elevation="4dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--Inner layout goes here-->

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>

Comments

कुछ भी काम नहीं किया, सिवाय इसके, सही बिंदु पर और समझ में भी आता है

— डीजेपी

Answer 12

5.0 + के लिए: आप टूलबार के साथ AppBarLayout का उपयोग कर सकते हैं। AppBarLayout में "उत्थान" विशेषता है।

 <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:elevation="4dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <include layout="@layout/toolbar" />
    </android.support.design.widget.AppBarLayout>

Comments

पिछले संस्करणों के बारे में क्या?

— Android डेवलपर 10

Answer 13

actionbar_background.xml

    <item>
        <shape>
            <solid android:color="@color/black" />
            <corners android:radius="2dp" />
            <gradient
                android:startColor="@color/black"
                android:centerColor="@color/black"
                android:endColor="@color/white"
                android:angle="270" />
        </shape>
    </item>

    <item android:bottom="3dp" >
        <shape>

            <solid android:color="#ffffff" />
            <corners android:radius="1dp" />
        </shape>
    </item>
</layer-list>

एक्शनबार_स्टाइल बैकग्राउंड में जोड़ें

<style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid">
    <item name="background">@drawable/actionbar_background</item>
    <item name="android:elevation">0dp</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:layout_marginBottom">5dp</item>

नाम = "displayOptions"> useLogo | showHome | showTitle | showCustom

बसेटेमे में जोड़ें

<style name="BaseTheme" parent="Theme.AppCompat.Light">
   <item name="android:homeAsUpIndicator">@drawable/home_back</item>
   <item name="actionBarStyle">@style/Theme.ActionBar</item>
</style>

Answer 14

अधिकांश समाधान यहां ठीक काम करते हैं। एक और, समान विकल्प दिखाना चाहेंगे:

Gradle:

implementation 'androidx.appcompat:appcompat:1.0.0-rc02'
implementation 'com.google.android.material:material:1.0.0-rc02'
implementation 'androidx.core:core-ktx:1.0.0-rc02'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

आपके पास लेआउट में टूलबार दृश्य और इसके लिए एक छाया हो सकता है, नीचे, इसके समान (पाठ्यक्रम के संशोधन की आवश्यकता):

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:titleTextAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"/>

    <include
        layout="@layout/toolbar_action_bar_shadow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

रेस / drawable-V21 / toolbar_action_bar_shadow.xml

<androidx.appcompat.widget.AppCompatImageView
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:src="@drawable/msl__action_bar_shadow"/>

रेस / drawable / toolbar_action_bar_shadow.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:foreground="?android:windowContentOverlay" tools:ignore="UnusedAttribute"/>

रेस / drawable / msl__action_bar_shadow.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:dither="true"
            android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#00000000"
                android:startColor="#33000000" />

            <size android:height="10dp" />
        </shape>
    </item>

</layer-list>

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar as Toolbar)
    }
}

पूर्ण नमूना यहां , जैसा कि मैंने देखा है कि IDE में यह कहने का एक बग है कि foregroundयहां उपयोग किया जाना बहुत नया है।

Answer 15

मुझे छाया के साथ भी ऐसी ही समस्या थी। छाया मेरे मामले में AppBarLayout के प्रत्यक्ष माता-पिता द्वारा खींची गई है। यदि माता-पिता की ऊंचाई AppBarLayout के समान है, तो छाया को खींचा नहीं जा सकता है। इसलिए पैरेंट लेआउट और शायद लेआउट रीमेक के आकार की जाँच करने से समस्या हल हो सकती है। https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/

Answer 16

एंड्रॉइड के साथ टूल बार में
android: backgroundTint = "# ff00ff" जोड़ने का सही उत्तर होगा : बैकग्राउंड = "@ android: color / white"

यदि आप अन्य रंग का उपयोग करते हैं तो पृष्ठभूमि के लिए सफेद यह छाया को हटा देगा। अच्छा लगा एक गूगल!