Develop Reference

How to change background color/shape of a Radiobutton when selected/deselected

I am adding radiobuttons programatically to a RadioGroup in a for loop. I want my buttons to have a certain background color when not checked, and another when they are checked (only one can be selected at once). My problem is that I also want this background to be a rounded rectangle. I have it working partially, but whenever I select an answer, it will set that button's background to white, but it won't reset any of the other buttons.
I understand that I need some type of selector object, to add the toggle behavior that is expected from the radiogroup. I was able to find some examples of that, but they only showed how to set a solid color as a background. I need to use this rounded corner shape. So, my trouble is figuring out how to blend the two. I could be going about this completely wrong. If there is a better approach to achieving what I want, I would prefer to use that rather than salvage what I've already tried.
I was able to get close by creating two XML files, each with a shape object and its own background color. If a radiobutton is selected, its style gets set to the radio_button_checked" style. But, I know I am approaching this wrong because the other checked button does not toggle off. I can basically click all of the buttons and get them all to have white backgrounds. I know there is a better way to do this, I just don't know what it is
Here is the loop where I add the buttons, along with the change listener for radiogroup rg (rg is my RadioGroup and answers is just a HashMap of strings. They don't affect anything related to this problem. The buttonTintList line is just there to change circle color)
for(int i = 0; i < answers.size(); i++)
{
RadioButton rb = new RadioButton(context);
rb.setTextColor(ContextCompat.getColor(context, R.color.colorPrimaryDark));
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
rb.setButtonTintList(ColorStateList.valueOf(ContextCompat.getColor( context, R.color.colorAccent)));
}
rb.setBackground(context.getResources().getDrawable(R.drawable.radiobutton_style_unchecked));
rb.setText(answers.get(i));
rb.setWidth(800);
rb.setHeight(150);
rb.setTextSize(18);
rb.setLayoutParams(params);
rg.addView(rb);
}
/* Store the answer */
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton rb= (RadioButton)group.findViewById(checkedId);
answer = rb.getText().toString();
rb.setBackground(context.getResources().getDrawable(R.drawable.radiobutton_style_checked));
}
});
Here is the XML for unchecked buttons (radiobutton_style_unchecked.xml)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="6dp" />
<gradient
android:angle="45"
android:centerColor="#color/colorPrimaryLight"
android:centerX="35%"
android:endColor="#color/colorPrimaryLight"
android:startColor="#color/colorPrimaryLight"
android:type="linear" />
<padding
android:bottom="5dp"
android:left="0dp"
android:right="0dp"
android:top="5dp" />
</shape>
The style for checked buttons is exactly the same, but with white instead of colorPrimaryLight
Here is what it looks like with nothing selected:
Here is what it looks like when one item is selected.
And this is what happens when I select more than one

Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light"
android:orientation="vertical">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/radio_background"
android:padding="10dp"
android:text="Yes" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/radio_background"
android:padding="10dp"
android:text="No" />
</RadioGroup>
</LinearLayout>
#drawable/radio_background
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white" android:state_checked="true" />
<item android:drawable="#color/colorAccent" android:state_checked="false" />
</selector>
OUTPUT
UPDATE
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light"
android:orientation="vertical">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/test"
android:padding="10dp"
android:text="Yes" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/test"
android:padding="10dp"
android:text="No" />
</RadioGroup>
</LinearLayout>
#drawable/test
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/radio_selected" android:state_checked="true" />
<item android:drawable="#drawable/radio_normal" />
</selector>
#drawable/radio_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#android:color/white" />
<padding
android:bottom="5dp"
android:left="0dp"
android:right="0dp"
android:top="5dp" />
</shape>
#drawable/radio_normal
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#color/colorAccent" />
<padding
android:bottom="5dp"
android:left="0dp"
android:right="0dp"
android:top="5dp" />
</shape>
OUTPUT

I suggest you have 3 drawable xml
radio_checked.xml(the effect you want to be checked)
radio_unchecked.xml (the effect you want to be unchecked)
radio_custom_drawable.xml
In this xml you have to do something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/radio_checked" />
<item android:state_checked="false"
android:drawable="#drawable/radio_unchecked" />
</selector>
And then in your code change this
rb.setBackground(context.getResources().getDrawable(R.drawable.radiobutton_style_checked));
to
rb.setBackground(context.getResources().getDrawable(R.drawable.radio_custom_drawable));

ImageButton not changing image

I have an image button:
<ImageButton
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageButton"
android:layout_weight="0.5"
android:layout_column="2"
android:background="#null"
android:src="#drawable/gender_choice"/>
the gender_choice.xml is as follows:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/male_gender"
android:state_checked="true" />
<item
android:drawable="#drawable/female_gender"
android:state_checked="false"/>
</selector>
For some reason when I run the application and click on the button it doesn't change. Is there something I have to implement in an on click listener?

try using your drawable as background not src and see if it works that way.
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageButton"
android:layout_weight="0.5"
android:layout_column="2"
android:background="#drawable/gender_choice"/>
also try changing your drawable and use state_selected and state_pressed insteead of state_checked :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/male_gender" android:state_selected="true" />
<item android:drawable="#drawable/male_gender" android:state_pressed="true" />
<item android:drawable="#drawable/female_gender" />
</selector>

Figured it out guys, so I switched to a ToggleButton, the big issue here is that the background stretched it so it was far too big for the TableRow. Put in a FrameLayout for it though and that solved everything.
So here is my FrameLayout with the ToggleButton which makes a call to gender_choice.xml created in the res/drawable folder.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_column="2">
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/gender_choice"
android:textOn=""
android:textOff=""
android:id="#+id/toggleButton"
android:layout_gravity="center"/>
</FrameLayout>
Inside gender_choice.xml is a simple selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/male_gender"
android:state_checked="true" />
<item
android:drawable="#drawable/female_gender"
android:state_checked="false"/>
</selector>
That's basically all there was too it, I can't believe I spent like 4 hours on this.

How to fully customize Radio button in android

i'm trying to create fully customize radio button in my app (android).
i have 3 radio button that helps the user pick size, this is why each radio button is in different size (L,M,S). i have one picture i want to be shown in each radio button in different size. when the user pick the relevant size it should change the background of it.
i'm having very hard time with it and running in with lots of problems...
this is the Radio group (i tried different methods in each button to check what is right)
*this is inside a relative layout
<RadioGroup
android:id="#+id/pizzaSizeRadioGroup"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/Largesize"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginRight="10dp"
android:adjustViewBounds="true"
android:button="#drawable/size_selector"
android:contentDescription="#string/largesize"
android:padding="1dp"
android:scaleType="fitCenter" />
<RadioButton
android:id="#+id/Mediumsize"
android:layout_width="26dp"
android:layout_height="26dp"
android:adjustViewBounds="true"
android:background="#drawable/size_selector"
android:contentDescription="#string/mediumsize"
android:padding="3dp"
android:scaleType="fitCenter" />
<RadioButton
android:id="#+id/Smallsize"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginLeft="10dp"
android:adjustViewBounds="true"
android:button="#drawable/size_selector"
android:contentDescription="#string/smallsize"
android:padding="2dp"
android:scaleType="fitCenter" />
</RadioGroup>
and i built a selector
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/size_select"
android:state_checked="true"
android:state_pressed="true" />
<item
android:drawable="#drawable/size_select"
android:state_pressed="true" />
<item
android:drawable="#drawable/size_select"
android:state_checked="true" />
<item
android:drawable="#drawable/size_unselect" />
</selector>
and XML objects - size_select
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/pizzasize">
<shape android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#A9D0F5" />
</shape>
</item>
</layer-list>
and size_unselect
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/pizzasize">
<shape android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
this is what i get (left is L then M and then S)

how to customize image button in android

i am new in android development , it very difficult to design customized user interface in
android . i have a image button that have default shap is ractangle i need do it as
rounded
shap please help me .
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#82B210"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".SettingActivity" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/makeconfess" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton1"
android:layout_alignRight="#+id/imageButton1"
android:layout_below="#+id/imageButton1"
android:layout_marginTop="27dp"
android:text=" Make a\nConfess"
android:textColor="#FFFFFF"
android:textAppearance="?android:attr/textAppearanceMedium" />

To create a circle shape of button firstly you have to create an xml in drawable folder
circle_shape_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#666666"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>
use this xml in button background as
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_shape_drawable"
android:text="#string/hello_world" />

You can define a Button or ImageButton with a xml file and save it into the drawable folder. In this way you can provide different states for your button (pressed, focused, normal, ...).
For example:
<?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/btn_action_hover" />
<item android:state_selected="true" android:drawable="#drawable/btn_action_hover" />
<item android:state_focused="true" android:drawable="#drawable/btn_action_hover" />
<item android:drawable="#drawable/btn_action_normal" />
</selector>
To be sure your button will be displayed correctly on any resolution/screen size, I would suggest to use 9 patch drawables as explained in http://developer.android.com/tools/help/draw9patch.html.

in the drawable folder in the res folder
Create a android xml file and named as cbutton.xml
Then enter the bellow code
<?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/pressselected">
</item>
<item android:state_focused="true"
android:drawable="#drawable/presshighlight">
</item>
<item android:drawable="#drawable/press"></item>
</selector>
Then set this file as background of your ImageButton like in below.
<LinearLayout xmlns:android = http://schemas.android.com/apk/res/android
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="Click to view Custom Button Action"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/press"
android:layout_gravity="center"
android:layout_marginTop="30dp"
/>
</LinearLayout>

xml to create a button in Android
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:background="#drawable/one" />
<! -- android:background property is used to apply background to a to button. And #drawable/one means there is a image name as one in your drawable folder we are applying it as background to this button. -->
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Code to define rounded corner button
<? xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"> //Defines the shape of button you wants
<solid android:color="#eeffff"/>
<corners android:bottomLeftRadius="8dp" //how much curve you want from bottom left corner
android:bottomRightRadius="8dp"//how much curve you want from bottom right corner
android:topLeftRadius="8dp""//how much curve you want from top left corner
android:topRightRadius="8dp"/> "//how much curve you want from top right corner
</shape>
default shape of button is rectangle so now I will tell you how to create round button
For that you again need to create an xml file in your drawable folder, and name it as button_shape.xml
The codes for button_shape.xml are as follows:
Code to define button shapes
<? xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android=http://schemas.android.com/apk/res/android android:shape="oval" >
//There are many other shapes also available they are rectangle,ring,line and oval
<solid android:color="#ffcccc"/> //applying the colour to the button.
<stroke android:width="2dp"
android:color="#ffffff"/>
</shape>

Problem creating a custom ListView selector

When I try clicking on a a listview item no selector is shown. Here is my ListView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/streamRelativeLayout">
<ListView android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="#+id/streamListView" android:cacheColorHint="#00000000" android:fadingEdge="none" android:listSelector="#drawable/swipeview_list_selector"> </ListView>
<TextView android:layout_centerInParent="true" android:layout_height="wrap_content" android:id="#+id/noStreamTextView" android:layout_width="wrap_content" android:text="No Stream Available" android:visibility="invisible"></TextView>
<ProgressBar android:layout_centerInParent="true" android:layout_height="wrap_content" android:id="#+id/streamProgressBar" android:layout_width="wrap_content"></ProgressBar>
</RelativeLayout>
Here is my selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_focused="true"
android:drawable="#drawable/stocks_gradient" />
<item android:state_pressed="true"
android:drawable="#drawable/stocks_gradient" />
<item android:state_focused="true"
android:drawable="#drawable/stocks_gradient" />
</selector>
Here is the gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ECECEC"
android:centerColor="#F6F6F4"
android:endColor="#F8F8F6"
android:angle="90"
android:dither="true"
/>
</shape>
I am also setting the background color to alternate in getView()
int colorPos = position % colors.length;
v.setBackgroundColor(colors[colorPos]);

If you mean that selected item is not displayed the way you want, then that's because you missed the state_selected case:
<item android:state_selected="true" android:drawable="..."/>

The first issue I see is that all of your states use the same drawable, so you wouldn't see a change when you click on it. And you haven't accounted for all of the cases, for example you have no default state.

i need to set the selectorontop property to true.