I am trying to have a button changing color (background and text) when I click on it. Like, by default the button has a grey background and white text color, when you click on it, the background become white and text grey. When you reclick on it, it come back to grey background and white text color.
I tried this:
androidx.appcompat.widget.AppCompatButton
style="#style/AppTheme.Button"
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:minWidth="60dp"
android:padding="11dp"
android:textColor="#color/button_text_color"
android:layout_margin="7dp"/>
The AppThemeButton is :
<style name=AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
<item name="android:textSize">16sp</item>
<item name="android:letterSpacing">0.06</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#drawable/corner_shape</item>
<item name="android:textAllCaps">false</item>
</style>
then my corner_shape is
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape>
<corners android:radius="15dp" />
<solid android:color="#color/brand04" />
</shape>
</item>
<item android:state_enabled="true">
<shape>
<corners android:radius="15dp" />
<solid android:color="#color/brand01" />
</shape>
</item>
</selector>
and the button_text_color as below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/brand05" android:state_enabled="true"/>
<item android:color="#color/white"/>
</selector>
I was trying to play with enable and disable which was a terrible idea as when I set the button to enable=false I cannot reverse back as I cannot act using the click listener..
Any idea. I am kind of looking of for a toogle function for the color.
Thanks
Related
Hello Learned Friends,
I am using Material Design Theme but I need to overried its statePressed so that when the button is clicked it changes color (highlighted for a moment) as demonstrated below.
For this I have a drawable which I set on the buttons as follows
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape>
<solid android:color="#color/primaryColor" />
<stroke android:color="#color/primaryDarkColor" android:width="#dimen/stroke_width"/>
<corners android:radius="#dimen/corner_radius" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="#color/secondaryColor" />
<stroke android:color="#color/secondaryLightColor" android:width="#dimen/stroke_width" />
<corners android:radius="#dimen/corner_radius" />
</shape>
</item>
I also got a ThemeOverlay to override the state pressed
<style name="ThemeOverlay.Red.UnitedStates" parent="">
<item name="android:colorPressedHighlight">#color/secondaryColor</item>
</style>
Unfortunately when I click the buttons the highlight doesn't happen.
What could I be missing?
This is Material Theme XML
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryVariant">#color/primaryLightColor</item>
<item name="colorPrimaryDark">#color/primaryDarkColor</item>
You can use just the app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/custom_button_selector"
../>
with:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/red600" android:state_pressed="true"/>
<item android:color="?attr/colorPrimary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>
Normal state:
Pressed state:
I have this button XML, which has transparent background and when clicked, the color changes, so that it shows a "click effect".
Drawable XML:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- press-->
<item android:drawable="#android:color/transparent" android:state_pressed="false" />
<!-- focused-->
<item style="#style/AppTheme" android:drawable="#color/color_primary" android:state_pressed="true" />
<!-- normal-->
<item android:drawable="#android:color/transparent" />
</selector>
My question is, how to put border on this button? Or an XML example so you have the same result. Thank you!
create a drawable, similar to this, selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ff0000"/>
<stroke
android:width="1dp"
android:color="#00ff00" />
</shape>
then change this line
<item
style="#style/AppTheme"
android:drawable="#color/color_primary"
android:state_pressed="true" />
to
<item
style="#style/AppTheme"
android:drawable="#drawable/selected"
android:state_pressed="true" />
the solid is the background color and the border is the stroke, you can create drawables that are used in the diferent states of the selector
You can do something like this:
1. First create a drawable file like this:
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<!--make button border solid color, nontransparent-->
<stroke android:color="#stroke color" android:width="2dp"/>
<corners android:radius="2dp"/>
</shape>
then in your provided code replace these lines:
<!-- press-->
<item android:drawable="path to above drawable" android:state_pressed="false" />
<!-- focused-->
<item style="#style/AppTheme" android:drawable="#color/color_primary" android:state_pressed="true" />
<!-- normal-->
<item android:drawable="path to above drawable" />
as
<!-- press-->
<item android:drawable="path to above drawable" android:state_pressed="false" />
<!-- focused-->
<item style="#style/AppTheme" android:drawable="#color/color_primary" android:state_pressed="true" />
<!-- normal-->
<item android:drawable="path to above drawable" />
Iv've been trying to match a button solid color with its border color while also adding a ripple effect. I've have a matching border and solid color (without a ripple) but when I add the ripple it seems to add a border of its own thats slightly darker. Below are the styles and drawable,
drawable-v21/my_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#ff0000"
tools:ignore="NewApi">
<item>
<shape
android:shape="rectangle">
<corners
android:radius="2dp" />
<stroke
android:width="1dp"
android:color="#ff0000" />
<solid
android:color="#ffffff" />
</shape>
</item>
</ripple>
styles.xml
<style name="Border_Button">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#000000</item>
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">true</item>
<item name="android:layout_marginLeft">16dp</item>
<item name="android:layout_marginRight">16dp</item>
<item name="android:background">#drawable/my_btn</item>
</style>
and layout.xml
<Button
style="#style/Border_Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="Click" />
Does anyone know how this border color can be overridden with the ripple or is there is some other way to achieve this (only XML preferrably)?
Newbie in Android.
I have the following defined in res/drawable/ for a button in a menu that's defined in style.xml
<style name="menu_icon">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">#dimen/menu_item_height</item>
<item name="android:background">#drawable/menu_item_bg_sel</item>
</style>
Now, menu_item_bg_sel in drawable has two different color gradients for 2 states that I am interested in- pressed and selected.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item>
<shape>
<gradient android:angle="180"
android:endColor="#color/background_menu_gray_selected2"
android:centerColor="#color/background_menu_gray_selected1"
android:startColor="#color/background_menu_gray_selected" />
</shape>
</item>
</layer-list>
</item>
<item android:state_selected="true">
<layer-list>
<item>
<shape>
<gradient android:angle="180" android:endColor="#color/background_menu_home2"
android:centerColor="#color/background_menu_home1"
android:startColor="#color/background_menu_home" />
</shape>
</item>
</layer-list>
</item>
<item android:drawable="#color/transparent"/>
However, when I press the button (that transient state) the button still creates the gradient taking colors from the selected_state only.
What am I doing wrong? Any ideas?
state_selected is commonly used when navigating using d-pads or maybe a pen like what Samsung Notes so I suggest not to use state_selected since when you press automatically it will be selected or gain focus although selected and focus are kind or different. I suggest to use state_pressed, state_focused and state_hovered instead.
For more info click here
You can use this code. You can copy paste this code into one drawable file. You can assign different drawable files or define shapes in this file itself for the different states.I have assigned a drawable file for the focused state as an example.
simple_button_states.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:drawable="#drawable/rounded_edittext_focused"
/>
<!--pressed -->
<item
android:state_pressed="true" />
<!--selected -->
<item
android:state_selected="true" />
<!-- focused -->
<item
android:drawable="#drawable/rounded_edittext_unfocused"/>
</selector>
round_edittext_focused.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<solid android:color="#FFFFFF" />
<stroke
android:width="2dp"
android:color="#color/CornflowerBlue" />
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp"
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp"
/>
</shape>
Finally assign the background of the actual button as the drawable file that you have declared above.
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/simple_button_states"
/>
Hope this helps
i am trying to change the color of text inside a button.
So for example i have a button which is filled with white and the text is blue. When i click on the button i want these two colors to swap (text inside the button becomes white and the button blue).
I have tried something like this:
<item style="#style/ButtonText_Menue_Clicked" android:drawable="#drawable/button_menue_default" android:state_focused="true"></item>
<item style="#style/ButtonText_Menue" android:drawable="#drawable/button_menue_default" ></item>
but it actually does nothing.
Is there any way to do what i want, or do i have to do some stuff in the onclik event (but then there is the problem how to set the colors back when the "click is gone" )
Create a selector resource in res/color for the text color and a button selector in res/drawable as below...
text_color.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#800000" />
<item
android:state_pressed="false"
android:color="#4C5" />
</selector>
button_color.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="#4C5"/>
</shape>
</item>
<item
android:state_pressed="false">
<shape android:shape="rectangle" >
<solid android:color="#800000"/>
</shape>
</item>
</selector>
Add the button to the layout
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:textColor="#color/text_color"
android:background="#drawable/button_color"/>