Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ActionBar with rounded edges

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.

like image 296
Mateja Visočnik Avatar asked May 23 '15 20:05

Mateja Visočnik


People also ask

What is the difference between ActionBar and toolbar?

An Action bar is traditionally a part of an Activity opaque window decor controlled by the framework but a Toolbar may be placed at any level of nesting within a view hierarchy. The toolbar provides more feature than ActionBar . A Toolbar may contain a combination of elements from start to end.

What is an ActionBar?

An on-screen toolbar displaying icons that are clicked or tapped to perform various functions. For example, the menu bar at the top of an Android app is called an action bar.


1 Answers

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

enter image description here

like image 75
Bojan Kseneman Avatar answered Nov 04 '22 10:11

Bojan Kseneman