Tôi đang cập nhật ứng dụng của mình với Thanh công cụ mới từ thư viện hỗ trợ v21. Vấn đề của tôi là thanh công cụ không tạo bóng bất kỳ nếu tôi không đặt thuộc tính "độ cao". Đó có phải là hành vi bình thường hay tôi đang làm gì đó sai?

Mã của tôi là:

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

Và trong Hoạt động của tôi - phương pháp OnCreate:

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

Tôi đã kết thúc việc thiết lập bóng thả của riêng mình cho thanh công cụ, nghĩ rằng nó có thể hữu ích cho bất cứ ai tìm kiếm nó:

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

@ màu / màu_alizarin

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

Google đã phát hành thư viện Hỗ trợ thiết kế một vài tuần trước và có một giải pháp tiện lợi cho vấn đề này trong thư viện này.

Thêm thư viện Hỗ trợ thiết kế làm phụ thuộc trong build.gradle:

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

Thêm AppBarLayoutđược cung cấp bởi thư viện dưới dạng một trình bao bọc xung quanh Toolbarbố cục của bạn để tạo bóng đổ.

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

Đây là kết quả:

Có rất nhiều thủ thuật khác với thư viện hỗ trợ thiết kế.

1. http://inthecheesefactory.com/blog/android-design-support-l Library-cadelab / vi
2. http://android-developers.blogspot.in/2015/05/android-design-support-l Library.html

AndroidX

Như trên nhưng với sự phụ thuộc:

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

và com.google.android.material.appbar.AppBarLayout

Bạn không thể sử dụng thuộc tính độ cao trước API 21 (Android Lollipop). Tuy nhiên, bạn có thể thêm bóng theo chương trình, ví dụ: bằng cách sử dụng chế độ xem tùy chỉnh được đặt bên dưới Thanh công cụ.

@ bố trí / thanh công cụ

<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 / thanh công cụ_showshadow

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

trong cách bố trí hoạt động của bạn <include layout="@layout/toolbar" />

Sử dụng / giá trị thư mục để áp dụng kiểu bóng chính xác dựa trên phiên bản HĐH.

Đối với các thiết bị dưới 5.0 , hãy sử dụng /values/styles.xml để thêm windowContentOverlay vào phần hoạt động của bạn:

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

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

Sau đó thêm bóng tùy chỉnh của riêng bạn bằng cách thay đổi Chủ đề của bạn để bao gồm:

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

Bạn có thể lấy tài nguyên bóng của ứng dụng IO của Google tại đây: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png

Đối với các thiết bị 5.0 trở lên , hãy sử dụng /values-v21/styles.xml để thêm độ cao vào thanh công cụ của bạn bằng cách sử dụng kiểu tiêu đề tùy chỉnh:

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

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

Lưu ý rằng trong trường hợp thứ hai, tôi phải tạo kiểu MyViewArea trống để windowContentOverlay cũng không hiển thị.

[Cập nhật: đã thay đổi tên tài nguyên và thêm bóng Google.]

Điều này làm việc cho tôi rất tốt:

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

Nếu bạn đang thiết lập ToolBarnhư vậy ActionBarthì chỉ cần gọi:

getSupportActionBar().setElevation(YOUR_ELEVATION);

Lưu ý: Điều này phải được gọi sau setSupportActionBar(toolbar);

Tôi đã thêm

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

trong mô tả thanh công cụ và nó hoạt động cho tôi. Sử dụng 5.0+

Vấn đề của tôi là thanh công cụ không tạo bóng bất kỳ nếu tôi không đặt thuộc tính "độ cao". Đó có phải là hành vi bình thường hay tôi đang làm gì đó sai?

Đó là hành vi bình thường. Cũng xem Câu hỏi thường gặp ở cuối bài này .

Đã đùa giỡn với điều này trong nhiều giờ, đây là những gì làm việc cho tôi.

Xóa tất cả các elevationthuộc tính khỏi appBarLayoutvà Toolbarcác widget (bao gồm cả styles.xmlnếu bạn đang áp dụng bất kỳ kiểu dáng nào).

Bây giờ trong hoạt động, áp dụng elvationtrên actionBar:

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

Điều này nên làm việc.

Bạn cũng có thể làm cho nó hoạt động với RelativeLayout. Điều này làm giảm bố cục lồng nhau một chút;)

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

Tất cả bạn cần là một android:margin_bottomtương đương với android:elevationgiá trị. Không AppBarLayout, clipToPaddingvv yêu cầu.

Thí dụ:

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

Đối với 5.0 +: Bạn có thể sử dụng AppBarLayout với Thanh công cụ. AppBarLayout có sự "nâng cao".

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

thêm vào nền 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>

name = "displayOptions"> useLogo | showHome | showTitle | showCustom

thêm vào Basetheme

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

Hầu hết các giải pháp hoạt động tốt ở đây. Muốn hiển thị khác, thay thế tương tự:

lớp:

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'

Bố cục của bạn có thể có Chế độ xem Thanh công cụ và bóng cho nó, bên dưới, tương tự như thế này (tất nhiên cần sửa đổi):

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

res / drawable-v21 / tool_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"/>

res / drawable / tool_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"/>

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

kiểu tệp

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

ChínhActivity.kt

class MainActivity : AppCompatActivity() {

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

Mẫu đầy đủ ở đây , vì tôi nhận thấy IDE có lỗi nói foregroundthuộc tính quá mới để sử dụng ở đây.

Tôi đã có vấn đề tương tự với cái bóng. Cái bóng được vẽ bởi cha mẹ trực tiếp của AppBarLayout trong trường hợp của tôi. Nếu chiều cao của cha mẹ giống với AppBarLayout thì bóng không thể được vẽ. Vì vậy, kiểm tra kích thước của bố trí cha mẹ và có thể bố trí lại có thể giải quyết vấn đề. https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/

Câu trả lời đúng sẽ là thêm
android: backgroundTint = "# ff00ff" vào thanh công cụ với android: background = "@ android: color / white"

Nếu bạn sử dụng màu khác thì màu trắng cho nền nó sẽ xóa bóng. Rất vui!