android 上的标题栏布局样式

Title bar like style for layout on android

我想使用线性布局创建这样的自定义标题栏。我不知道如何在底部获得 3D/shodow 效果。有什么建议吗?

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="0dp"/>
        </shape>
    </item>
    <item android:bottom="1dp" android:top="1dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#019BD9"/>
            <corners android:radius="0dp"/>
        </shape>
    </item>
</layer-list>

您可以集成 appcompact

<android.support.v7.widget.Toolbar
    android:id=”@+id/my_awesome_toolbar”
    android:layout_height=”wrap_content”
    android:layout_width=”match_parent”
    android:minHeight=”?attr/actionBarSize”
    android:background=”?attr/colorPrimary” />

http://android-developers.blogspot.ro/2014/10/appcompat-v21-material-design-for-pre.html

要使用工具栏,只需将其添加到您的布局中即可。

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        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" />

在 java 文件中将其作为 mToolBar 引用。

然后做小代码

setSupportActionbar(mToolBar);

注意:setSupportActionbar() 仅在扩展 ActionBarActivity 或 AppCompactActivity 时可用。而不是唯一的 Activity

[备选]

如果您不想使用工具栏。 只需在您想要阴影的位置添加以下视图即可。

<View
      android:layout_width="match_parent"
      android:layout_height="5dp"
      android:background="@drawable/toolbar_dropshadow" />

这里是 toolbar_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>