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

时间:2018-07-26 10:10:47

标签: android android-layout android-actionbar android-toolbar

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

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        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>

This what I'm trying to create This is what I'm getting

5 个答案:

答案 0 :(得分:4)

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

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

所以您的布局将是这样

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

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

答案 1 :(得分:0)

您可以尝试:

  

  

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

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

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                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

答案 2 :(得分:0)

您可以使用以下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"  

答案 3 :(得分:0)

您可以使用不带appbarlayout的工具栏

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

答案 4 :(得分:0)

为什么不用cardview包装