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));

How do I set constraints and programmatically increase image in proportion to text size?

This is perhaps a bit hard to explain, so I included a picture to show you what I mean.
I have three images in Android Studio. They should all be alined to match and the middle part should expand as the text on top of the graphic expands (the middle height should equal the text height I suppose). Have been sitting with this for awhile now but don't get anywhere.
Do I add code in xml? Something like android:layout_height="#id/textView"
Is it better to do relative constraints in xml or constraints in UI?
In xml, how do I do relative constraints to other children? I know code like android:layout_alignParentTop, android:layout_alignChildTop, but how do I set distance to children?

If I read this correctly, you want the centre image and text view to adjust height based on the height of the text. The simplest way of doing that would be using your middle image as a stretchable background to the text view and similarly for the header and footer views, preferably using 9-patch PNG images.
Solution 1: Using 9-patch PNG images
Here is an example XML with 9-patches to show how this works.
N.B. The example contains two layouts, each enclosing a single TextView with header and footer views. The first TextView has a single line of text, the second has two lines.
<LinearLayout
android:layout_width="320dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/top" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="32sp"
android:padding="5dp"
android:gravity="center_horizontal"
android:text="A line of text"
android:background="#drawable/middle" />
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/bottom" />
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="10dp" />
<LinearLayout
android:layout_width="320dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/top" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="32sp"
android:padding="5dp"
android:gravity="center_horizontal"
android:text="A line of text\nAnother line of text"
android:background="#drawable/middle" />
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/bottom" />
</LinearLayout>
Nine-Patches
top.9.png:
middle.9.png:
bottom.9.png:
Example output
Solution 2: All XML
Alternatively, you could do it all in XML using <shape> and <layer-list> drawables instead of the 9-patch PNG images. Here is a modified version of the above to work with XML drawables.
This example shows rounded corners on the border as an added bonus, but beware it can be tricky to draw complex compound shapes using XML as there are only a small number of primitive shapes you can use.
Note also that this version relies on the addition of dimension resources to ensure everything matches up.
res/values/dimens.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android" >
<dimen name="layout_width">320dp</dimen>
<dimen name="header_height">15dp</dimen>
<dimen name="header_inset_height">5dp</dimen>
<dimen name="inset">5dp</dimen>
<dimen name="inset_width">310dp</dimen>
<dimen name="footer_height">15dp</dimen>
<dimen name="corner_radius">10dp</dimen>
<dimen name="inset_radius">5dp</dimen>
</resources>
res/drawable-nodpi/header.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#ffff00ff" />
<corners
android:radius="#dimen/corner_radius"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
<size
android:width="#dimen/layout_width"
android:height="#dimen/header_height" />
</shape>
</item>
<item
android:top="#dimen/inset"
android:left="#dimen/inset"
android:right="#dimen/inset">
<shape android:shape="rectangle">
<solid android:color="#ffffff00" />
<corners
android:radius="#dimen/inset_radius"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
<size
android:width="#dimen/inset_width"
android:height="#dimen/header_inset_height" />
</shape>
</item>
</layer-list>
res/drawable-nodpi/body.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#ffff00ff" />
<size android:width="#dimen/layout_width"/>
</shape>
</item>
<item
android:left="#dimen/inset"
android:right="#dimen/inset">
<shape android:shape="rectangle">
<solid android:color="#ffffff00" />
<size android:width="#dimen/inset_width" />
</shape>
</item>
</layer-list>
res/drawable-nodpi/footer.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#ffff00ff" />
<corners
android:radius="#dimen/corner_radius"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
<size
android:width="#dimen/layout_width"
android:height="#dimen/footer_height" />
</shape>
</item>
<item
android:bottom="#dimen/inset"
android:left="#dimen/inset"
android:right="#dimen/inset">
<shape android:shape="rectangle">
<solid android:color="#ffffff00" />
<corners
android:radius="#dimen/inset_radius"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
<size
android:width="#dimen/inset_width"
android:height="#dimen/header_inset_height" />
</shape>
</item>
</layer-list>
res/layout/activity_main.xml:
<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:gravity="center"
android:fitsSystemWindows="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="#dimen/layout_width"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="#dimen/header_height"
android:background="#drawable/header" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="32sp"
android:padding="5dp"
android:gravity="center_horizontal"
android:text="A line of text"
android:background="#drawable/body" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/footer_height"
android:background="#drawable/footer" />
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="10dp" />
<LinearLayout
android:layout_width="#dimen/layout_width"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="#dimen/header_height"
android:background="#drawable/header" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="32sp"
android:padding="5dp"
android:gravity="center_horizontal"
android:text="A line of text\nAnother line of text"
android:background="#drawable/body" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/footer_height"
android:background="#drawable/footer" />
</LinearLayout>
</LinearLayout>
Example output:

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>

android:listSelector after notifyDataSetChanged(), color disappears

I'm having a slight issue here with this listview:
<ListView android:id="#+id/employees_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="2dp"
android:paddingRight="1dp"
android:background="#drawable/borderlist"
android:choiceMode="singleChoice"
android:listSelector="#48ad82"
android:layout_below="#id/employees_header">
</ListView>
Which contains this layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row_employee"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="13dp"
android:paddingBottom="13dp"
android:descendantFocusability="blocksDescendants">
<RadioButton android:id="#+id/radio_employee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:focusable="false"/>
<TextView
android:id="#+id/text_employeename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_toRightOf="#id/radio_employee"
android:layout_marginTop="3dp"
android:layout_marginLeft="5dp"
android:focusable="false" />
</RelativeLayout>
EDIT2: Simplifying the question as much as I can:
When I select an element on the list, it changes color due to the android:listSelector. When I call notifyDataSetChanged() in the code, that color disappears until I scroll the list up or down. How can I make the color not disappear?
Someone answered to use a selector like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape>
<solid android:color="#48ad82" />
</shape>
</item>
<item>
<shape>
<solid android:color="#unselectedcolor" />
</shape>
</item>
</selector>
I set this selector as a background. It does not work at all. The color of the elements do not even change when I select them
Edit1: To specify, the color re-appears when I scroll the list.

Add this code to your RelativeLayout:
android:background="#drawable/list_item_selector"
Add this file to your drawable folder
list_item_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape>
<solid android:color="#48ad82" />
</shape>
</item>
<item>
<shape>
<solid android:color="#unselectedcolor" />
</shape>
</item>
</selector>
EDIT: And remove android:listSelector="#48ad82" from your ListView