0

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>
pats
  • 1,273
  • 2
  • 20
  • 43
  • You have to use toolbar.. – Moinkhan Jun 12 '15 at 11:29
  • Have you heard about the new Toolbar concept that Android has released after API 21. That will give you this shadow. Let me know if you need more help. – Saraschandraa Jun 12 '15 at 11:29
  • That is the toolbar/ ActionBar, dont reinvent the wheel, as for the shadow, use setElevation on API 21 and above, and for below API 21 use the `android:foreground` tag of FrameLayout. You can grab the shadow.png image from iosched app on github, it lies in the xxhdpi folder. – Skynet Jun 12 '15 at 11:32
  • Thanks for your response. The title bar will not help me. I am planing to use the same bar at different places as a header style not just as a title bar at top. So need a style solution for a linear layout. – pats Jun 12 '15 at 11:34

2 Answers2

1

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

Raluca Lucaci
  • 2,058
  • 3
  • 20
  • 37
  • What about the shadow? – Skynet Jun 12 '15 at 11:33
  • Thanks for your response. The title bar will not help me. I am planing to use the same bar at different places as a header style not just as a title bar at top. So need a style solution for a linear layout – pats Jun 12 '15 at 11:39
  • Hmm ...you all are sure? Because I think this won t be a best practice. To have a component that shows like a title bar at the middle of the screen or somewhere else can confuse the user . Please check with the designer or with ur client why they really need this – Raluca Lucaci Jun 12 '15 at 11:42
  • http://stackoverflow.com/questions/30275134/how-to-add-a-toolbar-in-the-bottom-of-the-screen - i found this - maybe it will help you – Raluca Lucaci Jun 12 '15 at 11:44
  • I use it as a header, there wont be any navigation or anything else. This for contrast the content from header. Sorry if I confused u. My problem is with how to show the depth. – pats Jun 12 '15 at 11:45
1

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>
Moinkhan
  • 12,732
  • 5
  • 48
  • 65
  • See my alternative solution. I hope it helps. – Moinkhan Jun 12 '15 at 11:41
  • Thanks, My problem is with how to show the depth. not how to shade a bar. I think the bar is solid color in that image shown above – pats Jun 12 '15 at 11:46
  • Ok my second alternative solution is not for toolbar. You can put the view bottom of your LinearLayout where you want to show the depth. – Moinkhan Jun 12 '15 at 11:48
  • I didnt get you. Would u mind improving or changing my code above. I am going to apply that to a linear layout. thanks – pats Jun 12 '15 at 11:54
  • Its in the original post above. Only thing is I assign that xml to android:background="@drawable/background_with_shadow" of a linear layout which has just a textview to show the text. – pats Jun 12 '15 at 11:57
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80381/discussion-between-pats-and-moinkhan). – pats Jun 12 '15 at 11:59