ฉันกำลังอัปเดตแอปของฉันด้วย Toolbar ใหม่จากห้องสมุดสนับสนุน 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);

ฉันสิ้นสุดการตั้งค่าเงาของฉันเองสำหรับแถบเครื่องมือคิดว่ามันอาจเป็นประโยชน์สำหรับทุกคนที่มองหา:

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

Google เปิดตัวห้องสมุดสนับสนุนการออกแบบเมื่อไม่กี่สัปดาห์ที่ผ่านมาและมีทางออกที่ดีสำหรับปัญหานี้ในห้องสมุดนี้

เพิ่มไลบรารีการสนับสนุนการออกแบบเป็นการอ้างอิงในbuild.gradle:

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

เพิ่มAppBarLayoutไลบรารีที่จัดทำโดยเป็น wrapper รอบ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

คุณไม่สามารถใช้คุณสมบัติการยกระดับก่อน API 21 (Android Lollipop) อย่างไรก็ตามคุณสามารถเพิ่มเงาโดยทางโปรแกรมได้ตัวอย่างเช่นการใช้มุมมองที่กำหนดเองที่วางไว้ใต้แถบเครื่องมือ

@ รูปแบบ / แถบเครื่องมือ

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

ใช้/ ค่าโฟลเดอร์เพื่อใช้สไตล์เงาที่ถูกต้องตามเวอร์ชันของระบบปฏิบัติการ

สำหรับอุปกรณ์ 5.0 ที่ต่ำกว่าให้ใช้/values/styles.xmlเพื่อเพิ่มwindowContentOverlayให้กับเนื้อหาของกิจกรรมของคุณ:

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

คุณสามารถคว้าทรัพยากรเงาของแอป IO ของ Google ได้ที่นี่: 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 ที่ว่างเปล่าดังนั้นwindowContentOverlayจะไม่ปรากฏขึ้นเช่นกัน

[อัปเดต: เปลี่ยนชื่อทรัพยากรและเพิ่ม Google shadow]

สิ่งนี้ทำงานได้ดีสำหรับฉัน:

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

หากคุณกำลังตั้งค่าToolBarเป็นActionBarแล้วเพียงแค่โทร:

getSupportActionBar().setElevation(YOUR_ELEVATION);

หมายเหตุ: ต้องเรียกหลังจากนี้ setSupportActionBar(toolbar);

ฉันเพิ่ม

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

ในคำอธิบายแถบเครื่องมือและมันเหมาะกับฉัน ใช้ 5.0+

ปัญหาของฉันคือแถบเครื่องมือไม่ได้สร้างเงาใด ๆ หากฉันไม่ได้ตั้งค่าแอตทริบิวต์ "ระดับความสูง" นั่นเป็นพฤติกรรมปกติหรือฉันกำลังทำอะไรผิดหรือเปล่า?

นั่นเป็นพฤติกรรมปกติ ดูคำถามที่พบบ่อยในตอนท้ายของโพสต์นี้

เล่นกับสิ่งนี้เป็นเวลาหลายชั่วโมงนี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน

ลบelevationแอตทริบิวต์ทั้งหมดออกจากappBarLayoutและToolbarวิดเจ็ต (รวมถึงstyles.xmlหากคุณใช้การใส่สไตล์ใด ๆ )

ตอนนี้อยู่ในกิจกรรมใช้elvationกับactionBar:

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

สิ่งนี้น่าจะใช้ได้

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>

สิ่งที่คุณต้องมี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>

สำหรับ 5.0 +: คุณสามารถใช้ AppBarLayout กับ Toolbar AppBarLayout มี "การยกระดับ" attribure

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

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>

เพิ่มในพื้นหลัง actionbar_style

<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

เพิ่มไปยัง Basetheme

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

โซลูชันส่วนใหญ่ทำงานได้ดีที่นี่ ต้องการแสดงอีกทางเลือกอื่นที่คล้ายกัน:

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'

เลย์เอาต์ของคุณสามารถมีมุมมองของ Toolbar และเงาด้านล่างคล้ายกับสิ่งนี้ (ต้องแก้ไขแน่นอน):

<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คุณลักษณะที่ใหม่เกินไปที่จะใช้ที่นี่

ฉันมีปัญหาคล้ายกันกับเงา เงาถูกวาดโดยพาเรนต์โดยตรงของ AppBarLayout ในกรณีของฉัน หากความสูงของพาเรนต์เหมือนกับของ AppBarLayout เงาจะไม่สามารถวาดได้ ดังนั้นการตรวจสอบขนาดของเลย์เอาต์หลักและการสร้างเลย์เอาต์ใหม่อาจช่วยแก้ปัญหาได้ https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/

คำตอบที่ถูกต้องคือการเพิ่ม
android: backgroundTint = "# ff00ff" ลงในแถบเครื่องมือด้วย android: background = "@ android: color / white"

ถ้าคุณใช้สีอื่นแล้วสีขาวสำหรับพื้นหลังมันจะลบเงา เป็นหนึ่งใน Google!