Develop Reference

Custom drawable for RadioButton breaks for API 21/22 and below

I have created custom drawable for AppCompatButton and it is working perfectly fine for API level 23 and above.
Here is custom drawable.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked" android:state_checked="false" />
</selector>
background_radio_checked -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-8dp"
android:right="-8dp"
android:top="-8dp">
<shape>
<solid android:color="#FFF1EEFF" />
<stroke
android:width="1dp"
android:color="#color/color_ask_question" />
</shape>
</item>
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_add_filled_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
background_radio_unchecked -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/color_employer_divider" />
<solid android:color="#F2F2F2" />
<corners android:topLeftRadius="#dimen/screen_margin_half_half_half" />
</shape>
</item>
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_add_empty_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
The drawables used are SVGs and have height width of 24dp.
How it looks on API 23+
But the same thing looks horrible on API level 21.
The image used in drawable stretches out to full width.
Tried removing animation but still the same results.
Not sure what wrong I'm doing or missing out.
Seems I'm using some property which is not available only from API 23 and above but not sure which one.

I'll answer by self, hopefully It'll help someone.
I was setting this drawable as background to my radiobutton and passing "#null" in button property.
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_radio_button_backgorund"
android:button="#null"
android:checked="true" />
This wasn't working, so I created two separate custom drawables for button and background.
For custom drawable for background I just used shape with border, background color, radius etc but NO ICON. And for custom drawable for Button, I used icon.
Assigning these two custom drawables in background and button makes things work in both, lollipop devices and above.
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_radio_background"
android:button="#drawable/custom_radio_button"
android:checked="true" />
-----------Custom drawable for background-----------
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked_background" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked_background" android:state_checked="false" />
</selector>
background_radio_checked_background -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-8dp"
android:right="-8dp"
android:top="-8dp">
<shape>
<solid android:color="#EBFFF7" />
<stroke
android:width="1dp"
android:color="#118F5D" />
</shape>
</item>
</layer-list>
background_radio_unchecked_background -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/color_employer_divider" />
<solid android:color="#F2F2F2" />
<corners android:topRightRadius="#dimen/screen_margin_half_half_half" />
</shape>
</item>
</layer-list>
-----------Custom drawable for button-----------
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked_button" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked_button" android:state_checked="false" />
</selector>
background_radio_checked_button -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_poll_filled_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
background_radio_unchecked_button -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_poll_empty_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
I'm still not sure why creating a single drawable which has both icon and border/background color, does not work with lollipop devices.
Suggestions, corrections on this solution are welcome.

Set an xml background for linear layout and show its press effect

I want to set following xml shape as my linear layout background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#D50000">
</stroke>
<solid
android:color="#android:color/transparent">
</solid>
</shape>
And I also want to show the press effect by these lines of code:
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:background="?android:selectableItemBackground"
But as you know, it is impossible to have two background for a view. So, What is the solution?

Try this:
<LinearLayout
android:layout_margin="16dp"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/ll_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:onClick="doSomething"
android:padding="8dp"
android:weightSum="3">
<TextView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Greeting" />
<TextView
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>
Then in drawable/ folder add:
button_normal.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#D50000">
</stroke>
</shape>
button_pressed.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid
android:color="#D50000">
</solid>
<stroke android:color="#D50000" android:width="2dp"/>
</shape>
Then create ll_background.xml:
<?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/button_pressed"/>
<item android:drawable="#drawable/button_normal"/>
</selector>
Finally for ripple create drawable-v21 folder and add ll_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#D50000">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<stroke
android:color="#D50000"
android:width="1dp" />
</shape>
</item>
</ripple>
The first three files (button_normal.xml, button_pressed.xml & ll_background.xml) will be for api < 21 and the 4th (ll_background.xml) ripple will be on all other devices including api 21 and above.

Border to RadioButton with text in Android

In my application I want to give border to my Radio Button with text.
<RadioButton
android:id="#+id/radioAndroid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="#drawable/inout_radio_button"
android:checked="true"
android:gravity="center"
android:padding="5dp"
android:layoutDirection="rtl"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_marginLeft="#dimen/margin_20dp"
android:text="1"
android:textColor="#color/color_radio_text" />
<RadioButton
android:id="#+id/radioiPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="#drawable/inout_radio_button"
android:gravity="center"
android:padding="5dp"
android:layoutDirection="rtl"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_marginLeft="#dimen/margin_20dp"
android:text="2"
android:textColor="#color/color_radio_text" />
I have put icon as below:
inout_radio_button.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/radioact" ></item>
<item android:state_checked="false" android:drawable="#drawable/radio" />
</selector>
But, i can't find way to give border around radio button.

Apply background parameter to the RadioButton directly (no need to surround it with external layout):
android:background="#drawable/background"
Where the background looks like:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<stroke
android:width="1px"
android:color="#android:color/black"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
Also apply the padding to the each of check mark images:
Inactive:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/radio"
android:left="6dp"
android:right="6dp"/>
</layer-list>
Active:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/radioact"
android:left="6dp"
android:right="6dp"/>
</layer-list>
And selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/active" android:state_checked="true"/>
<item android:drawable="#drawable/inactive" android:state_checked="false"/>
</selector>

Use a Layout around your RadioButton and set a backgroundDrawable with a custom border
create border.xml and put it into drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dip"
android:color="#android:color/black" />
<corners android:radius="10dp"/>
</shape>
and then use it in your Layout
<RelativeLayout
android:background="#drawable/border">
// your radiogroup
</RelativeLayout>

Android Button With Background Color And Ripple Effect

I have an android button, where I want to give it a background color and both ripple effect
my ripple xml is as below.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#BDA0CB"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#BDA0CB" />
</shape>
</item>
</ripple>
and my button is
<Button android:id="#+id/Button_activity_login_ViewProfile" style="?android:textAppearanceSmall"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginTop="16dp" android:text="Save"
android:textStyle="bold"
android:layout_marginLeft="#dimen/margin_left"
android:layout_marginRight="#dimen/margin_right"
android:textColor="#ffffffff"
android:fontFamily="sans-serif"
android:background="#ff7e51c2" />
To give the ripple effect I have to remove background color...Is there a way I can keep both.

This can be achieve by adding the android:drawable in your ripple.xml.
First add this to your color.xml. Assuming that #ff7e51c2 is the background color you want for your button.
...
<color name="btn_bg_color">#ff7e51c2</color>
....
Then create a drawable for the button background(/drawable/btn_bg.xml):
<?xml version="1.0" encoding="utf-8"?><shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="2dp" />
<solid
android:color="#color/btn_bg_color" />
</shape>
Then use the drawable in your ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#drawable/btn_bg"/>
</ripple>

You can do something like this in the xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple"/>
Change your ripple.xml in the the drawable/ folder as follows:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>

create ripple_effect.xml in your drawable folder
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#1182bc"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#1182bc" />
</shape>
</item>
</ripple>
use this xml as your view's background like below
android:background="#drawable/ripple_effect"
hope this will help ..

Create two different versions of xml file so that it will work on Pre Lollipop devices.
drawable/button_effect.xml :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3ab5d6"/>
<corners android:radius="3dp"/>
</shape>
drawable-v21/button_effect.xml:-
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:tools="http://schemas.android.com/tools"
android:color="#635a5a"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="lollipop">
<item android:drawable="#drawable/round_button" />
</ripple>
Create shaped drawable in drawable folder
drawable/round_button.xml :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3ab5d6"/>
<corners android:radius="3dp"/>
</shape>
You can do something like this in the layout.xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_effect"/>

Android set background color button pressed

I would like to change the background color of my ImageButton on pressed event.
Here is what i am done :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#color/rose_normal" />
<solid
android:state_pressed="true"
android:color="#color/rose_fonce" />
<stroke
android:width="1sp"
android:color="#color/rose_fonce" />
</shape>
My button is well in "rose_normal" color, but never in "rose_fonce" color on press.
Where is the problem ?
EDIT : PROBLEM SOLVED :
Create one xml file called background_rounded_button.xml :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rounded_button_rose_fonce" android:state_selected="true"></item>
<item android:drawable="#drawable/rounded_button_rose_fonce" android:state_pressed="true"></item>
<item android:drawable="#drawable/rounded_button_rose_normal"></item>
</selector>
rounded_button_rose_fonce.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#color/rose_fonce" />
<stroke
android:width="1sp"
android:color="#color/rose_fonce" />
</shape>
rounded_button_rose_normal.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#color/rose_normal" />
<stroke
android:width="1sp"
android:color="#color/rose_fonce" />
</shape>
And finally, apply background for the button :
<ImageButton
android:id="#+id/all_annonce_button_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/background_rounded_button.xml"
android:padding="16dp"
android:src="#drawable/ic_action_search" />

The problem is that you are not using a selector, but a shape.
Try this code (button_selector.xml, put it in your drawable folder):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/rose_fonce" android:state_selected="true"></item>
<item android:drawable="#color/rose_fonce" android:state_pressed="true"></item>
<item android:drawable="#color/rose_normal"></item>
</selector>
When setting this selector as the background of a Button, it will have the "rose_normal" color in normal state, and the "rose_fonce" color when pressed or selected.
Example:
<Button
android:background="#drawable/button_selector" />