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

Posted

技术标签:

【中文标题】如何在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包装它

【讨论】:

以上是关于如何在appbarlayout中制作带有圆角和高程的工具栏?喜欢这张照片的主要内容,如果未能解决你的问题,请参考以下文章

如何绘制带有边框和高程的CardView到Canvas?

如何在 android 中制作带有圆角的 EditText 组件

如何在android中制作带有圆角的自定义对话框

如何删除具有圆形背景的`AppBarLayout`角落中的空白

如何制作带有圆角边框的选择下拉菜单?

如何制作左上圆角和左下圆角的形状?