ImageView selector with layer-list - android

The goal of my selector (applied to an ImageView) is to change both color background and image when the state is pressed. The following xml works correctly. The problem is that changing the size of the background also scales up the drawable in the center. How can I keep the the drawable size and the background independent?
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="false">
<layer-list>
<item>
<shape android:shape="oval">
<size android:width="100dp" android:height="100dp"/>
<solid android:color="#android:color/black"/>
</shape>
</item>
<item android:drawable="#drawable/ic_white"/>
</layer-list>
</item>
<item android:state_enabled="true" android:state_pressed="true">
<layer-list>
<item android:drawable="#android:color/white" />
<item android:drawable="#drawable/ic_black" />
</layer-list>
</item>
</selector>

Related

Change 1 button color after being selected out of 4 buttons there are, and then change to normal again if other button selected

So i have 4 buttons, and i want to make if one button is clicked by the user it will change its color to red and stay that way until if the user pressed the other 3 buttons
enter image description here
i have read other post about this, but they showed to me to use selector state_selected and etc, but it doesnt work for me. and the other use setBackground in the java code, but i will be using 8 buttons and probably more, and its not going to be efficient to do it that way, is there any more efficient way to do this?
this is the code i have on the drawable xml
<?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" >
<solid android:color="#color/red_maroon"/>
<stroke android:color="#color/red_maroon" android:width="1dp"/>
<corners android:radius="8dp"/>
</shape>
</item>
<item android:state_selected="true">
<shape android:shape="rectangle" >
<solid android:color="#color/red_maroon"/>
<stroke android:color="#color/red_maroon" android:width="1dp"/>
<corners android:radius="8dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/white"/>
<stroke android:color="#color/red_maroon" android:width="1dp"/>
<corners android:radius="8dp"/>
</shape>
</item>
</selector>
If selector state_selected does not work, check if your button style has this attribute: <item name="android:selectable">true</item>
The style:
<style name="AppButtonOutlineSelectable" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="shapeAppearance">#style/AppButtonShape</item>
<item name="strokeColor">#color/color_selectable_button_stoker_selector</item>
<item name="android:selectable">true</item>
<item name="strokeWidth">1dp</item>
<item name="backgroundTint">#color/color_selectable_button_bg</item>
</style>
<style name="AppButtonShape" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerSize">8dp</item>
</style>
And use color selector under color directory, not drawable selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/red" android:state_selected="true" />
<item android:color="#color/white" />
</selector>
The button:
<com.google.android.material.button.MaterialButton
android:id="#+id/btn"
style="#style/AppButtonOutlineSelectable"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Set onClick:
btn.setOnClickListener {
btn.isSelected = btn.isSelected.not()
}

Android Button with bottom margin and state_pressed

Is there a way to create Android Button that have bottom margin when state_pressed is false, and that have rounded corners without bottom margin when state_pressed is true?
I have this, but it's without bottom margin when state_pressed is false:
<?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">
<solid android:color="#B5B5B5" />
<corners android:radius="10dp" />
</shape>
</item>
<item android:state_pressed="false">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
</selector>
EDIT: Added pictures
android:state_pressed="false"
android:state_pressed="true"
<selector xmlns:android="schemas.android.com/apk/res/android">
<item android:drawable="#drawable/drawable_for_pressed_state" android:state_pressed="true"/>
<item android:drawable="#drawable/drawable_for_normal_state" android:state_pressed="false"/>
</selector>
Add this code your drawable folder and use separate button drawables for the different button state

Not able to change radio button circle color in android

I am using radioButton in my app but by default my radioButton color is black and when I select it that turns to color accent color that I have mentioned in my color.xml but I want to change radioButton initial color and selected color to white color. How I am able to do so. I tried background color but it changes background color property. Please help.
First Put this code in style.xml
<!-- custom style -->
<style name="radionbutton"
parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:button">#drawable/rb_drawable</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
</style>
Now make rb_drawable.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="true"/>
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="false"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="true"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="false"/>
</selector>
Now make 2 more files for radio button check/uncheck in drawable folder
radio_unchecked.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
radio_checked.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
</item>
<item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
<shape android:shape="oval">
<solid android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
</item>
</layer-list>
Finally change style of radio button in layout xml
<RadioButton
android:layout_width="wrap_content"
style="#style/radionbutton"
android:checked="false"
android:layout_height="wrap_content"
/>

How to change the textColor if button press Android

I have a specific need to texcolorlist put the drawable with the background button.
My textColor:
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#android:color/black" />
<item android:state_checked="true" android:color="#android:color/black" />
<item android:color="#8e000000"/>
</selector>
My Button State:
<?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">
<gradient
android:angle="90"
android:endColor="#005b7f"
android:startColor="#051725"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#e6e6e6"
android:startColor="#b3b3b3"/>
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
</item>
</selector>
I know that in this way I can put the button color: android:textColor="#drawable/button_text_color"
I wonder if the button text color can be put directly into My Button State.
This is something, but it does not work:
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:textColor="#000000">
<gradient
android:angle="90"
android:endColor="#e6e6e6"
android:startColor="#b3b3b3"/>
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
</item>
</selector>
You need to define selector also to the text color:
android:textColor="#drawable/yourselector"
Here example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:color="#color/blue" />
<item android:state_focused="true" android:state_pressed="true" android:color="#color/red" />
<item android:state_focused="false" android:state_pressed="true" android:color="#color/green" />
</selector>
Edit: I didn't saw I refereed to that possibility. I don't think what you want is possible, because what you define in your selector refer to the android attribute you assign it. Since the attribute is background there is no meaning to text color there.
I wonder if the button text color can be put directly into My Button State.
No, it cannot. Drawable XML resources can not set properties on the elements they are applied to. What you might be interested in, is using a Style.
values/styles.xml
<style name="MyButtonStyle">
<item name="android:textColor">#drawable/button_text_color</item>
<item name="android:background">#drawable/button_background</item>
</style>
MyLayout.xml
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/MyButtonStyle"/>
This question was answered before:
Android customized button; changing text color
Hope it will help.

Android tabs textcolor selector ignores state_pressed

I have created my own android theme to change the look of the actionbar tabs. The problem is that textcolor selector seems to ignore state_pressed attribute, so the color of tab text is always the same, even if this tab is pressed. There is no problem with other states, for example state_selected is correctly recognized and selected tab has text color, which is different from unselected tabs text color.
What is more, i have also created selector for tabs background and it works fine with state_pressed (if the tab is pressed, it's backround color is changed).
There are some pieces of my code:
styles.xml:
<style name="Theme.MyTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarTabStyle">#style/Theme.MyTheme.TabStyle</item>
<item name="android:actionBarTabTextStyle">#style/Theme.MyTheme.TabTextStyle</item>
</style>
...
<style name="Theme.MyTheme.TabStyle"
parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/background_selector</item>
</style>
<style name="Theme.MyTheme.TabTextStyle"
parent="#android:style/Widget.Holo.Light.ActionBar.TabText">
<item name="android:textColor">#color/textcolor_selector</item>
</style>
background_selector.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:state_pressed="false">
<shape>
<solid android:color="#00ff00"/>
</shape>
</item>
<item android:state_selected="false" android:state_pressed="true">
<shape>
<solid android:color="#0000ff"/>
</shape>
</item>
<item android:state_selected="true" android:state_pressed="false">
<shape>
<solid android:color="#ff0000"/>
</shape>
</item>
<item android:state_selected="true" android:state_pressed="true">
<shape>
<solid android:color="#ffff00"/>
</shape>
</item>
</selector>
textcolor_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_pressed="false"
android:color="#ff0000"/>
<item android:state_selected="true" android:state_pressed="true"
android:color="#0000ff"/>
<item android:state_selected="false" android:state_pressed="false"
android:color="#ffff00"/>
<item android:state_selected="false" android:state_pressed="true"
android:color="#00ff00"/>
</selector>
I have tried everything without success - state_pressed attribute seems to be ignored, but only in textcolor_selector. Please, help me understand and solve this problem.
Review the Customize the Text Color section of the ActionBar Styling documentation - it mentions that Note: The custom style applied to titleTextStyle should use TextAppearance.Holo.Widget.ActionBar.Title as the parent style. - perhaps a change there might help correct the problem.
Another place to look would be here under the Example theme section - it shows an example of android:actionBarTabTextStyle that might help get things sorted for you.
Try this in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<shape>
<corners android:radius="0dp" />
<solid android:color="#color/white" />
<stroke android:width="1dp" android:color="#color/color_700" />
<padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" />
</shape>
</item>
<item android:state_enabled="false">
<shape>
<corners android:radius="0dp" />
<solid android:color="#color/color_100" />
<stroke android:width="1dp" android:color="#color/bloqueado" />
<padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" />
</shape>
</item>
</selector>

Categories

Resources