ActionBar with rounded edges

Question

I would like to know, if it is possible to make my ActionBar have rounded edges, more specifically only the top ones (top-left, top-right). I did some searching, but most of the methods are outdated and did not work for me. I am using AppCompat support library v22.1.1.

I have made an image of what I am trying to achieve, but my reputation is too low to upload images so I tried to describe as best as I could with words. If I have missed out any relevant information, let me know.

Answer 1

Yes, it is possible by using a shape drawable.

First create actionbar_foreground.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <solid android:color="#2C5AA9"/>
    <corners
        android:radius="0.1dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"/>

</shape>

And then the background for the ActionBar. This color will be seen where the edges are rounded. I had trouble since I was using a light theme, where the decor view is white in color, so I made this "hack"

actionbar_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#FF000000"/>
</shape>

And now you just layer them (put one over the other). Bottom layer is the background. This is what I called actionbar_layer_list.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/actionbar_background"/>
    <item android:drawable="@drawable/actionbar_foreground"/>

</layer-list>

And now just define a style for your app in the styles.xml

 <!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="CustomActionBarTheme" parent="@style/AppTheme">
        <item name="actionBarStyle">@style/CustomActionBar</item>
    </style>


    <!-- ActionBar styles -->
    <style name="CustomActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/actionbar_layer_list</item>
        <item name="titleTextStyle">@style/CustomActionBarTextStyle</item>
    </style>

And apply it in the AndroidManifest.xml

And it looks something like this