如何在appbarlayout中制作带有圆角和高程的工具栏？喜欢这张照片

Posted 2023-04-18

【中文标题】如何在appbarlayout中制作带有圆角和高程的工具栏？喜欢这张照片

【英文标题】：How to make toolbar with rounded corners and elevation inside appbarlayout? Like this picture

【发布时间】：2019-01-03 07:16:28

【问题描述】：

这是我尝试创建的带有圆角工具栏的代码，如图所示。

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_
    android:layout_
    android:layout_margin="12dp"
    android:background="@android:color/transparent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_
        android:layout_
        android:background="@drawable/bg_actionbar" />

</android.support.design.widget.AppBarLayout>

bg_actionbar.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@color/white" />
<corners android:radius="16dp" />
</shape>

【参考方案1】：

在AppBarLayout中设置app:elevation="0dp"

并将android:elevation="4dp" 设置为Toolbar

并且还将 'android:layout_margin="4dp"' 设置为工具栏，这将帮助您显示阴影。

所以你的布局会是这样的

<android.support.design.widget.AppBarLayout
 android:id="@+id/appBar"
 app:elevation="0dp"
 android:layout_
 android:layout_
 android:layout_margin="12dp"
 android:background="@android:color/transparent">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:elevation="4dp"
    android:layout_margin="4dp"
    android:layout_
    android:layout_
    android:background="@drawable/bg_actionbar" />

【讨论】：

感谢您的支持，我也试过了，但它只适用于Api 21及更高版本，低于api 21呢？

如果您正在考虑这些设备，那么您必须在 photo shop 中创建一个带有这种阴影的图像 bg 并设置为背景

【参考方案2】：

你可以试试：

<android.support.design.widget.AppBarLayout
    android:layout_
    android:layout_
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="0dp">

    <android.support.v7.widget.CardView
        android:layout_
        android:layout_
        android:layout_margin="20dp"
        app:cardCornerRadius="14dp"
        app:cardElevation="20dp">

        <android.support.v7.widget.Toolbar
            android:layout_
            android:layout_>

            <TextView
                android:layout_
                android:layout_
                android:text="ElementApp"
                android:textSize="24sp"
                android:textStyle="bold" />
        </android.support.v7.widget.Toolbar>
    </android.support.v7.widget.CardView>
</android.support.design.widget.AppBarLayout>

输出将是：The output Image

【参考方案3】：

您可以使用以下 xml 文件作为背景，并根据需要提供特定的半径：

shadowfile.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#18000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#05000000" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#10000000" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#15000000" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20000000" />
            <corners android:radius="4dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="0dp" />
        </shape>
    </item>
</layer-list>

注意：这里一项等于一层，您可以根据需要添加或删除

在布局或工具栏中使用：

android:background="@drawable/shadowfile"  

【参考方案4】：

你可以在没有 appbarlayout 的情况下使用工具栏

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:elevation="4dp"
        android:layout_
        android:layout_
        android:background="@drawable/bg_actionbar" />

【参考方案5】：

你为什么不用cardview包装它