I am trying to implement a custom RadioButton, and the styling is working as I would expecting, however, the selection highlighting is not exclusive. Meaning, I can have two buttons within the same group highlighted at the same time.
Edit
This the state before I select the second button:
This a visual of the issue I'm getting - note I'd only like one selected:
Below is the code for the background selector of my RadioButton:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_checked="true"
android:state_pressed="false"
android:drawable="#drawable/toggle_button_selected"/>
<item
android:state_checked="false"
android:state_pressed="false"
android:drawable="#drawable/toggle_button_unselected"/>
<item
android:state_checked="true"
android:state_pressed="true"
android:drawable="#drawable/toggle_button_selected"/>
<item
android:state_checked="false"
android:state_pressed="true"
android:drawable="#drawable/toggle_button_unselected"/>
</selector>
Below is my implementation in the group:
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/toggle_button_selector"
android:button="#android:color/transparent"
android:checked="true"
android:padding="10dp"
android:text="Test" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/toggle_button_selector"
android:button="#android:color/transparent"
android:padding="10dp"
android:text="Test1" />
</RadioGroup>
Any thoughts?
Edit
Drawables:
toggle_button_unselected.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#color/dark_purple" />
<stroke
android:width="1dp"
android:color="#color/dark_purple" />
</shape>
toggle_button_selected.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#color/purple" />
<stroke
android:width="1dp"
android:color="#color/dark_purple" />
</shape>
The only thing I can think of is that the RadioButtons should have different ids.
Related
I have a weird problem here.
so I decided to practice making Custom Radio Button like Pills, and then it did not work like what I coded.
I set the color with Black and White for the text, but my Radio button text turns Pink. Eyy yo, what is going on here?
Here's my code:
My RadioGroup:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rumah"
android:padding="15dp"
android:background="#drawable/radio_selector"
android:button="#drawable/radio_selector_null"
android:gravity="center"
android:textColor="#drawable/radio_selector_text"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:text="Apartemen"
android:padding="15dp"
android:background="#drawable/radio_selector"
android:button="#drawable/radio_selector_null"
android:gravity="center"
android:textColor="#drawable/radio_selector_text"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:text="Kos"
android:padding="15dp"
android:background="#drawable/radio_selector"
android:button="#drawable/radio_selector_null"
android:gravity="center"
android:textColor="#drawable/radio_selector_text"/>
radio_selector_null.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#android:color/transparent" />
</selector>
radio_selector.xml:
<?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/radio_pill_true" />
<item android:state_checked="false"
android:drawable="#drawable/radio_pill_false" />
</selector>
radio_pill_true.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">`
<solid android:color="?colorPrimary" /> <-- Green
<corners android:radius="50dp" />
</shape>
radio_pill_false.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">`
<solid android:color="#F3F3F3" /> <-- White
<corners android:radius="50dp" />
</shape>
radio_selector_text.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#color/white" />
<item android:state_checked="false"
android:drawable="#color/black_28" />
</selector>
The radio_selector_text.xml file should be present in color/ res directory and not in drawable/ directory
The colors in the file should defined using android:color="#color/black_28"
I am trying to give the selector to the RadioButton of android:button but not able to showing that button in the preview as well as the real device, My goal is to make the android:button would be the custom.
I have to RadioGroup with two RadioButton.
I have tried this solution also https://stackoverflow.com/a/12432722/6869491
But still not able to get the desired solution.
<RadioGroup
android:id="#+id/radio_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/padding_25"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/sub_const"
app:layout_constraintEnd_toEndOf="#id/sub_const"
app:layout_constraintStart_toStartOf="#id/sub_const"
app:layout_constraintTop_toBottomOf="#id/pay_amt_et">
<RadioButton
style="#style/MyRadioButtonStyle"
android:id="#+id/manual_rb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="#string/manual"
android:textColor="#color/textcolor"
android:textSize="#dimen/fontsize_16"
/>
<RadioButton
style="#style/MyRadioButtonStyle"
android:id="#+id/recurring_rb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Recuring"
android:textColor="#color/textcolor"
android:textSize="#dimen/fontsize_16"
/>
</RadioGroup>
And here is the radio button selector, that is radio_btn_selector.
<item android:state_checked="true" android:state_window_focused="false"
android:drawable="#drawable/radio_btn_active" />
<item android:state_checked="false" android:state_window_focused="false"
android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="true" android:state_pressed="true"
android:drawable="#drawable/radio_btn_active" />
<item android:state_checked="false" android:state_pressed="true"
android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="true" android:state_focused="true"
android:drawable="#drawable/radio_btn_active" />
<item android:state_checked="false" android:state_focused="true"
android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="false" android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="true" android:drawable="#drawable/radio_btn_active" />
And here is the radio_btn_active.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/colorWhite" />
<stroke
android:width="#dimen/padding_2"
android:color="#color/grey_darker" />
</shape>
</item>
<item
android:bottom="#dimen/padding_30"
android:end="#dimen/padding_30"
android:start="#dimen/padding_30"
android:top="#dimen/padding_30">
<shape android:shape="oval">
<solid android:color="#color/primary_edtext_light" />
</shape>
</item>
</layer-list>
And this is radio_btn_un_selected.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorWhite" />
<stroke
android:width="#dimen/padding_2"
android:color="#color/grey_darker" />
</shape>
And Given the style as well.
<style name="MyRadioButtonStyle"
parent="#android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">#drawable/radio_btn_selector</item>
</style>
Whats I am making wrong please guide me.
I think you missed to set RadioButton's android:background="#drawable/radio_btn_selector" property.
<RadioButton
android:id="#+id/manual_rb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="#string/manual"
android:textColor="#color/textcolor"
android:textSize="#dimen/fontsize_16"
android:button="#android:color/transparent"
android:background="#drawable/radio_btn_selector"
/>
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>
Im trying to make custom Radio buttons. Found an article which looked great (Article) but when i try doing what is said here, it doesnt update at all. Would a base theme prevent me from making custom radio buttons? My code below:
Layout xml
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/radioGroup"
android:background="#drawable/country_select_radio_button">
<RadioButton
android:id="#+id/ke_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/SouthAfrica"
android:layout_alignStart="#+id/SouthAfrica"
android:layout_alignTop="#+id/SouthAfrica"
android:layout_marginTop="35dp"
android:background="#drawable/country_select_radio_button"
android:text="Kenya"
android:layout_gravity="center_horizontal"
android:checked="false" />
<RadioButton
android:id="#+id/za_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btn_za"
android:layout_centerHorizontal="true"
android:layout_marginBottom="125dp"
android:text="South Africa"
android:checked="true"
android:layout_gravity="center_horizontal" />
</RadioGroup>
button style xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/b"
android:state_checked="true"
android:state_pressed="true" />
<item
android:drawable="#drawable/a"
android:state_pressed="true" />
<item
android:drawable="#drawable/a"
android:state_checked="true" />
<item
android:drawable="#drawable/b" />
a.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#fff" />
<stroke
android:width="2dp"
android:color="#FF0000" />
b.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#FF0000" />
<stroke
android:width="2dp"
android:color="#555555" />
no matter what i change, the style of the button stays the default?
what am i doing wrong?
u need to set the android button property in your xml
<RadioButton
android:id="#+id/ke_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/radio_button_selector"
android:padding="#dimen/text_padding"
android:paddingLeft="10dp"
/>
wher radio_button selector is your custom xml file for radio button
please use below selector xml file
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radiobutton1" android:state_checked="false"/>
<item android:drawable="#drawable/radiobutton2" android:state_checked="true"/>
<item android:drawable="#drawable/radiobutton1"/>
</selector>
put 2 images for testing as radiobutton1 and radiobutton2 and test
I have a ListView where I've implemented a Cards UI-type look to it. If an item in the ListView is in the "selected" or "pressed" state, there is a white border around the item. I would like the entire view to have the blue color, but not sure how to achieve that:
ListView item layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<RelativeLayout
android:id="#+id/itemLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:background="#drawable/bg_cards_ui"
>
<TextView
android:id="#+id/title"
android:layout_alignParentTop="true"
android:paddingBottom="4dip"
/>
<TextView
android:id="#+id/summary"
android:paddingBottom="4dip"
android:layout_below="#id/text"
/>
<TextView
android:id="#+id/siteName"
android:layout_below="#id/summary"
/>
<TextView
android:id="#+id/date"
android:layout_below="#id/summary"
/>
</RelativeLayout>
</FrameLayout>
bg_card_ui.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle" android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp"
/>
</shape>
</item>
<item>
<selector>
<item android:state_pressed="true" android:drawable="#color/my_blue_color" />
<item android:state_selected="true" android:state_pressed="false" android:drawable="#color/my_blue_color" />
<item android:state_activated="true" android:state_selected="false" android:state_pressed="false" android:drawable="#color/my_blue_color" />
<item android:state_selected="false" android:state_pressed="false" android:drawable="#android:color/transparent" />
</selector>
</item>
</layer-list>
Check this out:ListView - Highlight sub layout of item. I've implemented exactly what I think you're looking to do.
Basically, for what you've got, you need to have the selector reference a background xml file in the "drawable" property of the each item. You would need at least two background xml files, one for normal state and one for pressed which has the color changes you want. Should work after that.