Title bar like style for layout on android

2.1k views Asked by At

I want to create a custom title bar like this using a linear layout. I can not work out how to get that 3D/shodow effect at the bottom. Any suggestions?

enter image description here

<?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>
2

There are 2 answers

6
Moinkhan On BEST ANSWER

To use Toolbar just add it in your layout.

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

reference it on java file as mToolBar.

and do the small code

setSupportActionbar(mToolBar);

Note: setSupportActionbar() is only available when you extend ActionBarActivity or AppCompactActivity. instead the only Activity

[Alternative]

And if you don't want to go with the Toolbar. just add the below view where you want shadow.

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

and here is toolbar_dropshadow drawable

<?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>
5
Raluca Lucaci On

You can integrate 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