I have a RadioGroup having 3 Radio Buttons. By default , when I click the radio button, it turns Blue. I need to change the color, say , when I click the first one, it should turn to Yellow, the 2nd one Blue and the 3rd one to Green.
I have seen some tutorials to customize by styling the radio buttons, like Is it possible to change the radio button icon in an android radio button group but it hides all the buttons.
Here is my XML .
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/studentImage"
android:layout_alignParentRight="true"
android:layout_alignRight="#+id/studentImage"
android:layout_alignTop="#+id/studentImage"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/rb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible" />
<RadioButton
android:id="#+id/rb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible" />
<RadioButton
android:id="#+id/rb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible" />
</RadioGroup>
You can use a statelist drawable like I wrote below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/color_pressed" /> <!-- pressed -->
<item android:drawable="#drawable/default_button" /> <!-- default -->
</selector>
color_pressed and deafult_button would be your drawables for each button's state, you could have multiple selectors for each radio button
Related
I want to have two image buttons one for men and one for women. when you select one of them, it becomes highlighted. i have written some parts of the code but i don't know what to to next. until now, it doesn't change when you click the button.
drawable/btn_selector_gender_men:
<?xml version="1.0" encoding="utf-8"?>
<selector android:exitFadeDuration="#android:integer/config_shortAnimTime"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_man_active" android:state_activated="true" />
<item android:drawable="#drawable/ic_man" />
</selector>
i have set above code as the background of my button:
<ImageButton android:id="#id/gender_man_button" android:background="#drawable/btn_selector_gender_men" android:layout_width="wrap_content" android:layout_height="wrap_content" />
another button same as above for women...
layout:
<ImageButton android:id="#id/gender_woman_button" android:background="#drawable/btn_selector_gender_women" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<View android:background="#color/app_color_grayLight" android:layout_width="1.0dip" android:layout_height="fill_parent" android:layout_margin="2.0dip" />
<ImageButton android:id="#id/gender_man_button" android:background="#drawable/btn_selector_gender_men" android:layout_width="wrap_content" android:layout_height="wrap_content" />
I'm trying to my custom RadioButton that I trying to make to look like this:
So I did custom drawables that respond to the RadioButton status and used it as background. This is alright.
The problem is that I'm not been able to center the images that I set through the android:button atribute.
Here is how I'm trying to use it in my layout.
<RadioGroup
android:id="#+id/presenter_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="4dp"
android:gravity="center"
>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/cluster_centered"
android:gravity="center"
android:padding="8dp"
android:background="#drawable/presenter_radiobutton_left"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
android:background="#drawable/presenter_radiobutton_right"
android:button="#drawable/fire"
/>
</RadioGroup>
With this I'm getting this as result:
I've already tried to define a drawable that sets the gravity to center, but nothing changed. Here is the custom drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/cluster" android:gravity="center"/>
</item>
</selector>
So, how could I center the button images?
PS: I can't set each kind of button as background because it'll be dynamic in the future, so the only thing that could be in background is the blue shape.
My solution was to set android:button=#null, then set the image that I want into the android:drawableLeft attribute. So my RadioButton code is like this:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
android:background="#drawable/presenter_radiobutton_left"
android:button="#null"
android:drawableLeft="#drawable/fire"
/>
"on center" solution is
...
<RadioButton>
...
android:button="#null"
android:foreground="#drawable/your_selector_for_center_drawable"
android:background="#drawable/your_selector_for_background_drawable"
android:foregroundGravity="center"
I am using RadioButton in my layout. Where i have provided background to the RadioButton. Below is the code
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:background="#drawable/rb_spain"
android:id="#+id/am_rb_spain" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:background="#drawable/rb_germany"
android:layout_marginLeft="#dimen/margin_15"
android:layout_marginRight="#dimen/margin_15"
android:id="#+id/am_rb_german" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:background="#drawable/rb_english"
android:id="#+id/am_rb_english" />
</RadioGroup>
RadioButton background drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="#drawable/ic_spain" />
<item android:state_checked="true" android:drawable="#drawable/ic_spain_pressed" /> //pressed image is Large in size
<item android:drawable="#drawable/ic_spain" /> <!-- default -->
</selector>
I have saved the selection in TinyDB so that app will remember my selection whenever i open my app. But whenever i open my app the default selected RadioButton background Appears Large.
I have taken all the images of same size in drawable's with same padding.
First flag is Default selected here. But it appear to be slightly large in size
Now i have pressed 2nd flag. But first flag is not coming to its normal state.
You should change your android:button="#null" to android:button="#drawable/rb_germany" and remove background from each RadioButton. It will run fine.
Your updated RadioButton should be like:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/rb_spain"
android:id="#+id/am_rb_spain" />
I want this kind of look. They don't seem like tabs so I believe they are buttons.
I am able to acheive the similar type with toggle button by keeping a selector in drawable.
<ToggleButton
android:id="#+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/custom_selector"
android:textOn=" Button1 Button2"
android:textOff=" Button1 Button2" />
But they have only two values and by clicking on the selected tab gets the other selected and the present one unselected. But I want exactly like tab. So can someone please help me achieve it? Thanks in advance.
You have to create selector for all button and use RadioGroup with selector background and null button..
Follow #Andru answer for create Selector..
Below is RadioGroup code.
<RadioGroup
android:id="#+id/rdogrp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:gravity="center"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn1Selector"
android:button="#null"
android:checked="true"
android:gravity="center" />
<RadioButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn2Selector"
android:button="#null"
android:gravity="center" />
<RadioButton
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn3Selector"
android:button="#null"
android:gravity="center" />
<RadioButton
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn4Selector"
android:button="#null"
android:gravity="center" />
</RadioGroup>
here is sample code for btn1Selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn1_selected" android:state_checked="true" />
<item android:drawable="#drawable/btn1_normal" android:state_checked="false"/>
</selector>
you can do something like this, instead of toggle button use normal buttons.
if "Data" button clicked do like this
data(View v)
{
databtn.setBackgroundResource(R.drawable.image1);
w_chartbtn.setBackgroundResource(R.drawable.image2);
H_chartbtn.setBackgroundResource(R.drawable.image2);
}
if "H-chart" button clicked
H_chart(View v)
{
databtn.setBackgroundResource(R.drawable.image2);
w_chartbtn.setBackgroundResource(R.drawable.image2);
H_chartbtn.setBackgroundResource(R.drawable.image1);
}
Use simple button instead of toogle button. And set background like this:
I am giving example for 1 button:
android:background="#drawable/data_button_select_state"
And add a xml file in your 'drawable' folder named data_button_select_state:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/data_image_selected_state"
android:state_selected="true" />
<item android:drawable="#drawable/data_image_selected_state"
android:state_pressed="true" />
<item android:drawable="#drawable/data_image_without_selected" />
</selector>
Now add code in java file like this:
when data button clicked:
data_button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
data_button.setActivated(true);
H_chart_button.setActivated(false);
w_chart_button.setActivated(false);
hc_chart_button.setActivated(false);
}
});
change other button like this as well. This will might help you...
Suppose I have a footer like the following in my app, defined in a XML file such as footer.xml:
<LinearLayout android:id="#+id/llfooter"
android:layout_weight="1" android:layout_width="fill_parent"
android:orientation="horizontal" android:layout_height="0dp"
android:visibility="visible" android:background="#drawable/fbg"
android:weightSum="5.0" android:gravity="center"
android:layout_margin="0dp">
<Button android:id="#+id/home" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/home" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/issue" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#android:drawable/ic_menu_send" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/browse" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#android:drawable/ic_menu_slideshow" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/search" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/search" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:layout_height="wrap_content" android:id="#+id/favorite"
android:background="#drawable/favorite" android:layout_width="wrap_content"
android:focusable="true"
android:clickable="true"
android:layout_weight="1"
android:textColor="#FFFFFF" android:padding="10px"></Button>
</LinearLayout>
Now, the problem is that home, issue, browse, etc. are PNG icons, and when I tap on them, user can't have feedback of touching, because they stay unchanged.
I would like to change background colour on pressing them (e.g. just a bit lighter). I know I can write down XML drawables () one per button, such as the following
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/bgalt" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/bgalt" />
<item android:drawable="#drawable/bgnorm" />
</selector>
.. but if I have 10 buttons (say, 5 for footer, 5 for header) I should create other 10 buttons with altered background (so more work with graph editor and .apk heavier because of more raster icons.. ).
Is there a way to create (even in java) a ligher color "onClick" and normal color "onRelease" instead, with only one icon per feature in resources?
Any suggestions?
Tnx in advance.
Gabo
Use an ImageButton, and set the android:src parameter to the button drawable with a transparent background, then set the android:background value to a selector drawable that changes color when selected for example.
That way you have a set of drawables for your icons and one drawable only for the background which changes according to the state of your button
you can get button bitmap in onTouch in the code and change color, but it's bad idea.
selector is best solution.