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>
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 have two text views inside a Linear Layout with a horizontal orientation. Now I want to have the following things for each text view:
An icon at left - implemented using android:drawableLeft="#drawable/ic_lightbulb_outline_blue_24dp"
A round border around the text view - implemented using android:background="#drawable/round_border"
Also, need that ripple effect on touching a touch item
The 3rd point is implemented in other text views using the att.
android:background="?selectableItemBackground"
android:clickable="true"
But there is already a background att. for the round border. Now my question is how to achieve that ripple effect? Is using following att. only way:
android:foreground="?selectableItemBackground"
Android shows this att. is not supported in lower api versions so worried.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/vision_mission"
android:gravity="center"
android:layout_margin="8dp"
android:padding="8dp"
android:textSize="16sp"
android:onClick="openVisionMission"
android:drawableLeft="#drawable/ic_lightbulb_outline_blue_24dp"
android:background="#drawable/round_border"
android:clickable="true"
android:focusable="true"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/team"
android:textSize="16sp"
android:drawableLeft="#drawable/ic_people_blue_24dp"
android:background="#drawable/round_border"
android:clickable="true"
android:focusable="true"
android:padding="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:gravity="center"/>
</LinearLayout>
You can achieve ripple effect and text view rounded background at the same time using the following code.
Custom ripple drawable, it require API level 21+
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/grey">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#android:color/holo_blue_dark" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#android:color/holo_blue_dark" />
</shape>
</item>
</ripple>
After that set background of your text view
android:background="#drawable/custom_ripple"
For pre lollypop ie. below API level 21
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#color/colorDarkGray"/>
</shape>
</item>
<item android:state_pressed="false">
<shape android:shape="rectangle">
<solid android:color="#color/colorButtonGreen"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/colorButtonGreenFocused"/>
</shape>
</item>
</selector>
It is not exactly what you are looking for.
You can achieve easily something similar with a MaterialButton with a OutlinedButton style.
Something like:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
app:icon="#drawable/ic_add_24px"
android:text="...."
.../>
You can customize the padding between the icon and the text, the textColor, the strokeWidth, the strokeColor and also the color selector used for the app:rippleColor
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
app:icon="#drawable/ic_add_24px"
app:strokeColor="#color/primaryDarkColor"
app:strokeWidth="2dp"
app:iconPadding="16dp"
.../>
you can change your background drawable with selector tag
<?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:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
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>
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 am trying to create a EditText as below
Question:
How can i write a selector for this and set as background
I do not want to place a image
You need to use a <layer-list> to accomplish what you want. Taken from this answer
res/drawable/text.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="#000000" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
<item android:bottom="3px" android:left="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
res/layout/activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/editText1"
android:background="#drawable/text"
android:layout_width="170dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="30dp"
android:ems="10"
android:gravity="center_horizontal"
android:padding="2dp"
android:password="true" />
</RelativeLayout>
Expected Output:
This would work
Layout
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:layout_margin="5dp"
android:paddingLeft="5dp"
android:hint="Email"
android:background="#drawable/test_edit"
android:id="#+id/editText" />
Layer_list
<item android:drawable="#color/lightBlue"/>
<item android:drawable="#color/darkBlue" android:left="2dp" android:bottom="2dp" />
Color
darkBlue #ff1ca9ff
lightBlue #ffb6f1ff
Not sure if this may help you but I would just create through the xml and use the Android 4.4 theme to style it L shaped. I would then set the background color to blue. This is how it done:
Create the color.xml file, to enter the color values you need.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="dodgerblue">#1E90FF</color>
<color name="lightskyblue_1">#B0E2FF</color>
</resources>
Then, in your EditText, set the color as follows
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="asdsadasdasd"
android:textColor="#color/lightskyblue_1"
android:background="#color/dodgerblue"
/>
If you need more colors, here is a useful link.
Hope this helps :)