带有阴影的曲线安卓工具栏

Question

我需要为工具栏或卡片视图添加弧形底部视图。

我尝试过的方法：

bg_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" />
    </item>
    <item
            android:bottom="0dp"
            android:left="-100dp"
            android:right="-100dp"
            android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

将此设置为工具栏的背景会取消应用程序栏的高程（阴影）。此外，如果将此背景应用于CardView，则会设置背景但阴影不符合背景形状。

请参见下面的图像，我希望阴影环绕曲线。

- Hamza Ahmed Khan

Answer 1

我使用了arcView来完成这个任务

依赖实现 'com.github.florent37:shapeofview:1.3.2'

<com.github.florent37.shapeofview.shapes.ArcView
        android:layout_width="match_parent"
        android:layout_height="155dp"
        android:elevation="5.0dp"
        app:shape_arc_cropDirection="outside"
        app:shape_arc_height="35dp"
        app:shape_arc_position="bottom">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="155dp"
            android:background="@color/colorPrimary"
            android:elevation="5dp" />

    </com.github.florent37.shapeofview.shapes.ArcView>

请查看附图

- Kailash Chouhan

---

谢谢。ArcView为我完成了这项工作。 - Hamza Ahmed Khan

Answer 2

尝试使用以下布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        app:elevation="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/test1"
        android:gravity="center"
        android:padding="@dimen/_10sdp"
        android:text="My Title"
        android:textSize="@dimen/_20ssp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

</android.support.constraint.ConstraintLayout>

test1.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" />
    </item>
    <item
        android:bottom="0dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="#50CCCCCC" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>//Background Color
        </shape>
    </item>
</layer-list>

输出：

- Mehul Kabaria

---

非常感谢您的回答，Mehul。我尝试了您的代码，但视图没有显示任何高程/阴影。 - Hamza Ahmed Khan

@HamzaAhmedKhan：请更新答案并检查test.xml。现在你可以显示阴影了。 - Mehul Kabaria

我很感激你的努力，但这更像是视图的边框/轮廓而不是渐变阴影。 - Hamza Ahmed Khan

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

来自 https://dev59.com/Cq3la4cB1Zd3GeqPIi_F#51536488

- golkarm