Show circle over back button on action bar

Question

I have a custom action bar. I create action bar layout with button and TextView. I want, when user press back button, change view of back button. like gmail app that user click on back button, a rectangle shows over back button but I want shows circle over back button. I want to link images but I have not allow.

I don't know how can calculate radius of circle for any size of devices. Thanks for advises and sorry for my poor english.

Please give me any Screen Shot so i get any idea for that also — Rajan Bhavsar, Jun 23 '15 at 09:12
Thanks for quick reply. http://tinypic.com/r/25aoily/8 this url shows my mean — TestAndroid, Jun 23 '15 at 09:16
this will help you http://stackoverflow.com/questions/9252354/how-to-customize-the-back-button-on-actionbar — Remees M Syde, Jun 23 '15 at 09:22
I think, you can't understand my mean. I can to change layout of back button but I want to create circle over button. i think this is a new button and set with selector but i don't know how can find circle's radius. Thanks :) — TestAndroid, Jun 23 '15 at 09:27
http://android-developers.blogspot.in/2014/10/implementing-material-design-in-your.html... this will help you to get that effect — Jackson Chengalai, Jun 23 '15 at 09:32
Hi TestAndroid May be you need like of this:https://github.com/traex/RippleEffect — Rajan Bhavsar, Jun 23 '15 at 09:34
@Jackson Chengalai thanks for your link. This is good document for designing application :) — TestAndroid, Jun 24 '15 at 05:48

score 1 · Accepted Answer · answered Jun 23 '15 at 09:31

The easiest way is to do two different icons one with circle around and another one without it. Then you won't have any problem with the sizes of devices.

You can do it with a selector like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/your_icon_with_circle"/>
    <item android:drawable="@drawable/your_icon_without_circle" />
</selector>

And then you can set the selector into the button background

Show circle over back button on action bar

1 Answers1