When i alter radio button style xml - changes dont reflect - android

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

Related

Button background selector is not showing

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"
/>

Change edittext backgroundTint Color

Here is my editext, i want to change bottom line color of edittext. i use android:backgroundTint but its only work in API 21 and above it.
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:backgroundTint="#color/edittintcolor"
android:drawableLeft="#drawable/lock"
android:hint=" Password"
android:padding="15dp"
android:textColor="#color/edittintcolor"
android:textColorHint="#color/edittintcolor"
android:textSize="18sp"
android:typeface="serif" />
I want to change this color using XML or style not in java code
bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FDEEF4" />
<corners
android:radius="15dp" />
<stroke android:width="1dip" android:color="#F9966B" />
<EditText
android:id="#+id/password"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/bd=g"
android:hint="#string/password"
android:inputType="textPassword" >
</EditText>
Create a drawable xml for your edittext background.. Use this following code..
<?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="#android:color/transparent" />
<!--background color of box-->
</shape>
</item>
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#android:color/white" />
<!-- color of edittext line -->
</shape>
</item>
</layer-list>
and set that drawable xml as your edittext background. :)
use command like below in edit text
<EditText
android:id="#+id/password"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/edittextborder"
android:hint="#string/password"
android:inputType="textPassword" >
<requestFocus />
</EditText>
then proceed with below code inside drawable folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FDEEF4" />
<corners
android:radius="15dp" />
<stroke android:width="1dip" android:color="#F9966B" />
EDEEF4 represents the tint color
We can achieve by using two ways,
Method 1:
We can design background image using selector drawable,
create backgroundEditText.xml in drawable,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false"
android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item
android:state_window_focused="false"
android:state_enabled="false"
android:drawable="#drawable/textfield_disabled" />
<item
android:state_pressed="true"
android:drawable="#drawable/textfield_pressed" />
<item
android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/textfield_selected" />
<item
android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item
android:state_focused="true"
android:drawable="#drawable/textfield_disabled_selected" />
<item
android:drawable="#drawable/textfield_disabled" />
textfield_pressed.9.png
[![textfield_pressed.9][4]][4]
textfield_selected.9.png
[![textfield_selected.9][5]][5]
We need to set backgroundEditText for EditText in layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/edit1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/edit1_text"
android:inputType="text"
android:background="#drawable/edit_text"
/>
</LinearLayout>
[![Final Output ][6]][6]
Method 2:
Using android.support.v4 support library, we can give backward compatibility.
You can use this site to generate your own EditText style.
Generate drawable and set it as background, like:
android:background="#drawable/generated_theme_edit_text"

Custom RadioButton within RadioGroup not having exclusive selection

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.

Is there any attribute for the button to make it look stylish?

I am using the following. I want to add stylish properties like color and style.
Please help
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="43dp"
android:text="OK" />
paste the following code into new xml file in drawable folder and name the file draw and
and in button give background of this xml file name
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#1F2120" />
<corners
android:bottomLeftRadius="6dp"
android:bottomRightRadius="6dp"
android:textColor="#android:color/white"
android:topLeftRadius="6dp"
android:topRightRadius="6dp" />
</shape>
this is how you can use this
<Button
android:id="#+id/force"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="15dp"
android:layout_weight="1"
android:background="#drawable/draw"
android:text="some txt"
android:textColor="#android:color/white"
android:textSize="20dp" />
<!-- Custom Style for bottom displaying confirm and cancel -->
<style name="Widget.GsMenuButton" parent="#style/Widget.Button">
<item name="android:layout_height">36px</item>
<item name="android:layout_width">82px</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
<item name="background">#drawable/gs_menu_btn</item>
<item name="android:textColor">#fff</item>
</style>
This is what i have done to make my button. It change the button background color with background attribute and change the text color with android:textColor. I think you can just add these to your button attribute.
you can add images to this button by using :
android:background="#drawable/image_name"
if you want to simply add some color to this button's background, you can do it like this:
android:background="#ff0000" // color code for red color
besides, you can specify text color like this :
android:textColor="#0000ff" // color code for blue color
if you want to change your button's background on different events like while the button is foccused, pressed etc. you need to create an xml file say mybutton_style.xml indrawable folder.
// code for mybutton_style.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/btn_image_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/btn_image_focussed" /> <!--focused -->
<item android:drawable="#drawable/btn_image_default" /> <!-- default -->
</selector>
after that you just need to specify it as your button's background:
android:background="#drawable/mybutton_style"
copy following bg.xml file in to your drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape android:shape="rectangle">
<corners android:radius="10dp" />
<gradient
android:endColor="#fffffa"
android:startColor="#ffffff"
android:angle="270" />
<solid android:color="#00aa00" />
<padding android:bottom="10.0dip" android:left="10.0dip" android:right="10.0dip" android:top="10.0dip" />
</shape></item>
<item android:state_pressed="false"><shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#ffffff" />
<gradient
android:endColor="#fffffa"
android:startColor="#ffffff"
android:angle="270" />
<padding android:bottom="10.0dip" android:left="10.0dip" android:right="10.0dip" android:top="10.0dip" />
</shape></item>
</selector>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:background="#drawable/bg"
android:layout_centerHorizontal="true"
android:layout_marginTop="43dp"
android:text="OK" />
if you want to make your button stylish but in simple way then you can try the following:
android:background="#null"
android:typeface="serif"
if you don't want simple stuff then you can customize it as you want.

Android Relative Layout Selector

How do I change the color of a Relative Layout Shape ? To work it like a button.
I tried to do it using a selector.
This is the code i used.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlGPS"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:background="#drawable/relative_selector"
>
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tvs1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_below="#+id/tvl1"
android:layout_toLeftOf="#+id/iv1"
android:text="you can here protect ... "
android:textColor="#color/gray" />
<TextView
android:id="#+id/tvl1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/iv1"
android:text="GPS"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</RelativeLayout>
relative_selector.xml In here I'm doing the changes using selector.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/relative_focus"/>
<item android:state_pressed="true" android:state_enabled="false"
android:drawable="#drawable/relative_clicked" />
<item android:drawable="#drawable/relative_background"/>
</selector>
relative_background.xml This is the shape.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<stroke android:width="1dp" android:color="#636161" />
<padding android:left="5dp"
android:top="2dp"
android:right="2dp"
android:bottom="5dp" />
<corners android:radius="6dp" />
<solid android:color="#88ffffff"
/>
</shape>
In "relative_clicked.xml" and "relative_focus.xml" I only changed the colors.
relative_focus.xml
<stroke android:width="1dp" android:color="#ffff00" />
relative_clicked.xml
<solid android:color="#88ffff00"/>
All .xml files are in drawable folder.
I want to work this like a button.Is someone having any idea?
From your selector xml:
<item android:state_pressed="true"
android:state_enabled="false"
android:drawable="#drawable/relative_clicked" />
Will it work if you remove state_enabled?
<item android:state_pressed="true"
android:drawable="#drawable/relative_clicked" />

Categories

Resources