In my layout I have an AppCompatRadioButton. With app:buttonTint I make the button white. If I checked the AppCompatRadioButton the fill color of the circle is also white. How can I change only the fill color of the circle when the button is checked? Example: On click the circle is furthermore white and the fill color of the circle would be change to red.
Step 1 If you want you change just a color you can use theme.
styles.xml
<style name="MyCheckBox" parent="Theme.AppCompat.NoActionBar">
<item name="colorControlNormal">#d1d1d1</item> <!-- normal border color change as you wish -->
<item name="colorControlActivated">#359e1d</item> <!-- activated color change as you wish -->
<item name="android:textColor">#FFFF3F3C</item> <!-- checkbox text color -->
</style>
In Your Layout
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Text"
android:theme="#style/MyCheckBox"
android:textSize="16dp" />
Step 2 If you want to change icon of rabio button
In Your Layout
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Text"
android:button="#drawable/cb_selector"
android:textSize="16dp" />
Your drawable
<?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/icon_tick" />
<item android:state_checked="false" android:drawable="#drawable/icon_un_tick" />
</selector>
You can use custom layer
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Text"
android:button="#drawable/selector_radio"
android:textSize="16dp" />
selector_radio.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_layer" android:state_checked="true"></item>
<item android:drawable="#drawable/radio_ring_checked"></item>
</selector>
radio_layer.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/radio_ring_checked"/>
<item android:drawable="#drawable/radio_ring_unchecked"/>
</layer-list>
radio_ring_checked.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="4"
android:shape="ring"
android:thickness="2dp"
android:useLevel="false" >
<solid android:color="#color/ash" />
<size
android:height="30dp"
android:width="30dp" />
</shape>
radio_ring_unchecked.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="1000"
android:shape="ring"
android:thickness="4dp"
android:useLevel="false" >
<solid android:color="#color/colorPrimaryButton" />
<size
android:height="18dp"
android:width="18dp" />
</shape>
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 have created selector buttons using MaterialButtonToggleGroup.
I want to add padding between stroke and drawable.
This is what I’m getting:
This is what I want:
As you can see in the above image there is padding between stroke and selector drawable.
Here is the XML code:
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/toggleContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:checkedButton="#id/btnOutline"
android:paddingVertical="4dp"
app:selectionRequired="true"
app:singleSelection="true">
<com.google.android.material.button.MaterialButton
android:id="#+id/btnOutline"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#drawable/button_selector"
android:text="#string/outline"
android:textSize="15sp"
android:drawablePadding="2dp"
android:textAllCaps="false"
android:textColor="#drawable/selector_color"
app:strokeColor="#color/selector_btn_toggle" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btnMain"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#drawable/button_selector"
android:text="#string/main"
android:textAllCaps="false"
android:drawablePadding="2dp"
android:textSize="15sp"
android:textColor="#drawable/selector_color"
app:strokeColor="#color/selector_btn_toggle" />
</com.google.android.material.button.MaterialButtonToggleGroup>
As you can see in the code I'm using android:drawablePadding="2dp", but this is not working.
I'm using a backgroundTint to set the selector drawable.
Drawable button_selector code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/selector_btn_toggle" android:state_checked="true"/>
</selector>
Create a layer-list, to add item padding, drawablepPadding works for compound drawable not for background, create below
selected_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#FFFFFF"/>
</shape>
</item>
<item android:top="3dp" android:bottom="3dp" android:right="3dp" android:left="3dp">
<shape>
<solid android:color="#color/selector_btn_toggle"/>
</shape>
</item>
</layer-list>
then set it your button_selectpr
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/selected_background" android:state_checked="true"/>
</selector>
Create a login page. but I don't know what problem this code
login button don't work change color when I clicked!
I want to when I click then change color button
why doesn't changed that 'LOGIN' button?
how I can solve this?
activity_login.xml
<?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"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_login"
android:clickable="true"
android:gravity="center"
android:paddingLeft="32dp"
android:paddingRight="32dp">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/icon_user" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="LOGIN"
android:textColor="#fff"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
selector xml ->
btn_login.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="#4DAEEA" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#00ff00" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#999" />
<corners android:radius="30dp" />
</shape>
</item>
</selector>
you should make LinearLayout behave like a button by adding style and removing background , follow these steps
<LinearLayout
......
style="#style/btn_stand"
.......
>
</LinearLayout>
My style definition for the button:
<style name="btn_stand" parent="AppBaseTheme">
<item name="android:background">#drawable/btn_stand_sel</item>
<item name="android:textColor">#drawable/btn_stand_text_color</item>
<item name="android:minHeight">48dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
</style>
My #drawable/btn_stan_sel file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- disabled state -->
<item android:drawable="#drawable/btn_stand_disabled" android:state_enabled="false"/>
<!-- enabled and pressed state -->
<item android:drawable="#drawable/btn_stand_pressed" android:state_enabled="true" android:state_pressed="true"/>
<!-- enabled and focused state -->
<item android:drawable="#drawable/btn_stand_focused" android:state_enabled="true" android:state_focused="true"/>
<!-- enabled state -->
<item android:drawable="#drawable/btn_stand_enabled" android:state_enabled="true"/>
</selector>
My drawable file repeated for each state just with different colors for each state:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/stroke" />
<solid android:color="#color/blue" />
<corners android:radius="6dp" />
</shape>
this was an example that works for me , hope you use it and choose the color you want
Add android:focusable="true"to your linear layout xml code.
In the event that that doesn't work, you can try to replace android:background=#drawable/btn_login with android:foreground="?android:attr/selectableItemBackground".
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>
I have an ImageButton and a LinearLayout wrapping that button, like this:
<LinearLayout
android:id="#+id/homeButtonLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/p_buttons_background"
android:orientation="vertical" >
<ImageButton
android:id="#+id/homeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:background="#drawable/home_icon"
android:onClick="goBackToCameraScreen" />
</LinearLayout>
I put a background around the ImageButton in the LinearLayout, as you can see above.
I want to be able to change that background (that is, the background of the LinearLayout, not the background of the ImageButton) when the user clicks on the ImageButton. I could do that programmatically, but I want to do that via XML. I could easily change the background of the ImageButton by writing a selector, like this:
<?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/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
That's EXACTLY what I want, except that I want to change the LinearLayout background, and not the ImageButton background. How can I create a XML selector just like the one above, but that actually changes the background of the LinearLayout instead of the ImageButton background??
Thank you in advance!! =)
Set the selector to your LinearLayout and add android:descendantFocusability="blocksDescendants" to it.
In selector, replace all button backgrounds with layout backgrounds.
<LinearLayout
android:id="#+id/homeButtonLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/layout_bg_selector"
android:orientation="vertical"
android:descendantFocusability="blocksDescendants">
<ImageButton
android:id="#+id/homeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:background="#drawable/home_icon"
android:onClick="goBackToCameraScreen" />
</LinearLayout>
selector layout_bg_selector.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="#F0F0F0" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#00F000" /> <!-- focused -->
<item android:drawable="#0000F0" /> <!-- default -->
</selector>
I think the questioner is dead by now :XD
but this is the solution
add this two lines of code to your layout:
android:clickable = "true"
and
android:focusable = "true"
the main sample is
we have this constraint layout like :
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutSample"
android:layout_width="150dp"
android:layout_height="120dp"
android:background="#drawable/layout_selector"
android:clickable="true"
android:focusable="true">
</androidx.constraintlayout.widget.ConstraintLayout>
and the ( layout_selector.xml ) like this :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_pressed" android:state_pressed="true" /> <!-- pressed -->
<item android:drawable="#drawable/bg_focused" android:state_focused="true" /> <!-- focused -->
<item android:drawable="#drawable/bg_default" /> <!-- default -->
</selector>
and for ( bg_pressed.xml ) and ( bg_focused.xml ) and ( bg_default.xml ) as we used in selector before we need to declare them in drawable folder like :
bg_pressed.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#ffffff" />
<stroke
android:width="2dp"
android:color="#00ff00" />
</shape>
bg_focused.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#ffffff" />
<stroke
android:width="2dp"
android:color="#ff0000" />
</shape>
bg_default.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#ffffff" />
</shape>
now put your image view or something else inside the layout and try
some clicks :) (read the question!)
hope this will help you ...