I've seen some SO questions and they gave some possible methods to achieve what I want. For example:
Use colorControlHighlight attribute in styles.xml.
Here is my styles-v21.xml:
<style name="SelectableItemBackground">
<item name="android:colorControlHighlight">#5677FC</item>
<item name="android:background">?attr/selectableItemBackground</item>
</style>
And my widget:
<TextView
android:id="#+id/tv_take_photo_as_bt"
android:layout_width="280dp"
android:layout_height="48dp"
android:text="#string/act_take_photo"
style="#style/SelectableItemBackground"/>
And it doesn't work. I also tried to add parent="Theme.AppCompat to "SelectableItemBackground" style, or change to colorControlHighlight(no android: prefix)", or change to ?android:attr/selectableItemBackground, neither is useful.
Use backgroundTint attribute in layout.
So I add android:backgroundTint="#5677FC" to my TextView. Still useless. Then I tried to change android:backgroundTintMode to src_in and src_atop, and they never make a difference.
So, how can I change ripple color when I use ?attr/selectableItemBackground as background. I only focus on Lollipop and above. Thank you in advance!
Finally I find the solution: instead of using android:colorControlHighlight directly in theme SelectableItemBackground, I should write another style:
<style name="SelectableItemTheme">
<item name="colorControlHighlight">#color/ripple_color</item>
</style>
Then:
<style name="SelectableItemBackground">
<item name="android:theme">#style/SelectableItemTheme</item>
<item name="android:background">?attr/selectableItemBackground</item>
</style>
Finally add style="#style/SelectableItemBackground" to View in layout.xml.
UPDATED ON 2016/8/26
After N's release, I found that sometimes we cannot use this method to set ripple color for some kind of View(for example, the CardView). Now I highly recommend developers using RippleDrawable, which can also be declared in xml. Here is an example:
I want to show a ripple effect when user touches/clicks a CardView above API21, and of course there should be another kind of feedback before Lollipop. So I should write:
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foreground="#drawable/selectable_item_background"/>
and selectable_item_background in drawable folder:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:drawable="#android:color/transparent" />
<item android:drawable="#color/color_clicked" />
</selector>
selectable_item_background in drawable-v21 folder:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ripple_black" />
</selector>
finally, the ripple_black in drawable(or drawable-v21) folder:
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/color_clicked"
tools:ignore="NewApi" /> <!--you can remove this line if it's in v21 folder-->
That's it. For other views, maybe you should use android:background="#drawable/selectable_item_background". Don't forget to set an OnClickListener, OnTouchListener or something like those for them, otherwise ripple won't show.
Ripple effect on pre- and Lollipop+ devices
harrane and Liuting are right. The accepted answer is not the best way.
Let me show in code how to change ripple color for pre-Lollipop versions and higher
Your AppTheme should inherit from any AppCompat theme and contain colorControlHighlight attribute (without 'android:' prefix)
<!-- Application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="colorControlHighlight">#40ffffff</item>
</style>
Your view should contain clickable="true" (or should have a click listener set programmatically) and background should be "?attr/selectableItemBackgroundBorderless" or "?attr/selectableItemBackground" :
<LinearLayout
...
android:clickable="true"
android:background="?attr/selectableItemBackgroundBorderless"/>
Note: that if your parent view has white background you won't see ripple effect since it's white. Change colorControlHighlight value for a different color
Also, if you want different ripple colors on different activities you can set personal theme for each activity in Manifest file, for example:
<activity
android:name="com.myapp.GalleryActivity"
android:theme="#style/RedRippleTheme"
/>
Different ripple colors for different fragments in the same activity?
You can change attributes of Activity Theme for each fragment in runtime. Just overwrite them before fragment was inflated with your custom style and apply to a current Theme:
in values/styles.xml
<style name="colorControlHighlight_blue">
<item name="colorControlHighlight">#color/main_blue_alpha26</item>
</style>
Then, in your fragment before inflation in onCreateView():
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
return view;
}
This style will work only for this fragment
Different ripple color for different Views? (Lollipop +)
You can change the ripple color for each view seperately using
colorControlHighlight attribute, it doesn't work if you apply them to a view directly:
<TextView
...
colorControlHighlight="#40ffffff"/> <!-- DOESN'T WORK -->
you should apply it as a theme:
<TextView
...
android:theme="#style/colorControlHighlight_blue"/>
P.S. Also, sometimes this approach helps if you have unknown issues with ripple and you can't figure it out.
In my case, I used 3rd party sliding lib which messed up ripple effects for the entire layout and adding explicitly this theme to all clickable views worked out for me.
It's showing ripple effect with color on API +21, and simple gray background on press for API -21.
Add this style:
<style name="AppTheme.MyRipple">
<item name="colorControlHighlight">#color/your_color</item>
<item name="android:background">?selectableItemBackgroundBorderless</item>
</style>
And set it to the view:
<Button
...
android:theme="#style/AppTheme.MyRipple" />
Use the below steps:
1. Make changes to button view in your layout.xml
2. Add new styles in styles.xml
your_layout.xml
<Button
android:id="#+id/setup_submit_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/action_sign_in"
android:textStyle="bold"
android:background="#color/colorPrimary"
android:textColor="#color/white"
style="#style/SelectableItemBackground"
android:foreground="?android:attr/selectableItemBackground"/>
-The style attribute calls the style that we created.
-Foreground attribute calls the andorid's default selectable attribute.
styles.xml
<style name="SelectableItemTheme">
<item name="colorControlHighlight">#color/white</item>
</style>
<style name="SelectableItemBackground">
<item name="android:theme">#style/SelectableItemTheme</item>
<item name="android:background">?attr/selectableItemBackground</item>
</style>
The accepted answer is wrong.
The correct way to use is what Liuting mentioned in the comment.
Use colorControlHighlight instead of android:colorControlHighlight for changing the default colorControlHighlight from AppCompat
* Please refer to http://android-developers.blogspot.co.uk/2014/10/appcompat-v21-material-design-for-pre.html in the Theming section *
This code works for me to create a ripple:
public static void setRippleDrawable(View view, int normalColor, int touchColor) {
try {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
RippleDrawable rippleDrawable = new RippleDrawable(ColorStateList.valueOf(touchColor), view.getBackground(), null);
view.setBackground(rippleDrawable);
} else {
StateListDrawable stateListDrawable = new StateListDrawable();
stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, new ColorDrawable(touchColor));
stateListDrawable.addState(new int[]{android.R.attr.state_focused}, new ColorDrawable(touchColor));
stateListDrawable.addState(new int[]{}, new ColorDrawable(normalColor));
view.setBackground(stateListDrawable);
}
} catch (Exception e) {
Log.e(LOG_TAG, "" + e);
}
}
I did not found any way to modify the selectableItemBackground attribute.
That's why I did it like above.
In dark black theme(Or any other) app try to use like below
first create ripple_effect.xml in drawable folder and add code like
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#f5f5f5">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f5f5f5" />
</shape>
</item>
</ripple>
then set background to your Any view like Linear layout, Button, TextView etc.
<TextView
android:id="#+id/tvApply"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ripple_effect"
android:clickable="true"
android:text="APPLY"
android:textColor="#FFFFFF"
android:gravity="center"
android:textSize="#dimen/_8sdp"
android:padding="#dimen/_8sdp"
android:focusable="true" />
Use the foreground attribute as selectableItemBackground
and background attribute as the color you want.
android:foreground="?attr/selectableItemBackground"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/white"
Related
I have been using the new MaterialButton class. I want different colors on the button when the user clicks the button.
I have been using selector drawables for this purpose since the very beginning, however it doesn't appear to be working on MaterialButton.
<com.google.android.material.button.MaterialButton
android:layout_width="0dp"
android:text="#string/login"
style="#style/Widget.Mohre.Button"
android:layout_height="wrap_content"
app:cornerRadius="#dimen/card_corner_radius"
android:padding="#dimen/unit_large"
android:id="#+id/loginBtn"/>
My Widget.Mohre.Button style
#color/textColorWhite
#drawable/mohre_button_selector
#style/TextAppearance.Button
#animator/button_state_list_anim
My selector drawable
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/mohre_button_pressed" android:state_pressed="true" />
<item android:drawable="#drawable/mohre_button_selected" android:state_enabled="false" android:state_pressed="false" />
<item android:drawable="#drawable/mohre_button_normal" />
My individual drawables are just rectangle shapes with different colors like these
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp"></corners>
<solid android:color="#3a516a"></solid>
</shape>
The button doesn't take on the colors at all from the selector drawable. It just shows the default accent color of the application
With the normal way (setting the selector drawable as background of the button), it won't work as expected if you are using Theme.MaterialComponents.
You can use Theme.AppCompat.DayNight.NoActionBar as an alternative, but if you don't want to use that theme, then simply use:
<androidx.appcompat.widget.AppCompatButton
................/>
You will get the same result as it was working with the Appcompat theme even if you are using latest Material themes!
as explained in this medium post https://medium.com/over-engineering/hands-on-with-material-components-for-android-buttons-76fa1a92ec0a we can use ColorStateList to change color or background of Button.
For me working solution for now was to set backgroundTint to null and backgroundTintMode to add like this:
<style name="Button.XYZ" parent="Button">
<item name="shapeAppearance">?attr/shapeAppearanceLargeComponent</item>
<item name="drawableTint">#color/ColorXYZ</item>
<!-- background drawable -->
<item name="backgroundTint">#null</item>
<item name="backgroundTintMode">add</item>
<!-- background drawable -->
<item name="android:background">#drawable/XYZ</item>
<!-- Color drawable -->
<item name="android:textColor">#color/XYZ</item>
</style>
And also using the style in xml not in theme
If you want a button that has a custom background (to apply <selector> e.g), but your theme is set up to use Theme.MaterialComponents (which is nowadays, 2021), you could switch the XML element in the layout to be <android.widget.Button> instead of <Button>. This should cause the Material Components for Android to ignore that element, and you can manipulate this button normally with respect to XML attributes.
I want to color my button that is defined in a fragment. I created new style (which I use as a theme in the button) and defined "colorAccent" for enabled state, "colorButtonNormal" for disabled and parent of this style is "Widget.AppCompat.Button". I want it to be coloured exactly as it is written in colorButtonNormal when button is disabled.
<style name="Material.Button.Primary" parent="#style/Widget.AppCompat.Button">
<item name="android:colorButtonNormal">#color/color_disabled</item>
<item name="colorAccent">#color/color_primary</item>
</style>
<Button
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button_text"
android:textAppearance="#style/AppTheme.Text"
android:theme="#style/Material.Button.Primary" />
When the button is enabled it has correct color from colorAccent. When user clicks on it, it becomes disabled and should be gray (#b2b2b2) but it becomes a little bit lighter (#E7E7E7). It seems like it takes color that I defined and mixes with white color.
I tried to change style's parent and did some changes in style and button's attributes as it is written in some guides from the internet but nothing worked. My current solution is to set colorButtonNormal to #000000. When button is disabled, it becomes #B9B9B9.
Forgive me if I am wrong but as far I understand correctly, you want to achieve different colours for enabled/disabled states.
UPDATE
For keeping the material effect you can use styling with Widget.AppCompat.Button.Colored and create theme with specified colours:
<Button
.
.
.
style="#style/Widget.AppCompat.Button.Colored"
android:theme="#style/CustomButton"/>
And create theme, where colorButtonNormal is for disabled state
<style name="CustomButton" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/color_disabled</item>
<item name="colorAccent">#color/color_enabled</item>
</style>
Old without material effect
You can try using selector like:
custom_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#color/color_disabled" />
<item android:state_enabled="true" android:drawable="#color/color_enabled/>
</selector>
and then in your xml for button:
<Button
.
.
.
android:background="#drawable/custom_button" />
I have a LinearLayout with that has multiple TextViews and want to set up a default global color for that layout only without having to add a textColor field inside each TextView. Also, if it's possible, would it also be possible to override the color value by adding it inside the TextView? i.e. If I set blue as a default color and black for a single TextView, would the blue change to black?
To set the default global TextView colors, first you can create your own theme in AndroidManifest.xml file for the following items:
textColorPrimary - for Large texts
textColorSecondary - for Medium texts
textColorTertiary - for Small texts
textColorHint - for Hint texts
For example, in AndroidManifest.xml:
<style name="TextViewTheme" parent="android:Widget.TextView">
<!-- Set the default global color for TextViews to Holo Blue Dark -->
<item name="android:textColorPrimary">#android:color/holo_blue_dark</item>
<item name="android:textColorSecondary">#android:color/holo_blue_dark</item>
<item name="android:textColorTertiary">#android:color/holo_blue_dark</item>
<item name="android:textColorHint">#android:color/holo_blue_dark</item>
</style>
Next, set the theme style on your LinearLayout. You can also override the default for a single TextView to black color, like the following which set the first TextView Hint text color to black in activity_main.xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:theme="#style/TextViewTheme">
<TextView
android:id="#+id/phone_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/phone_tv"
android:textColor="#android:color/black"
android:textColorHint="#android:color/black" />
<TextView
android:id="#+id/email_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/email_tv" />
</LinearLayout>
Hope this helps!
You can override default text colors for the entire application by setting textColorPrimary and textColorSecondary in your parent in styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="textColorPrimary">#color/black</item>
<item name="textColorSecondary">#color/grey</item>
</style>
If your TextViews are indeed very many to the extent that calling setTextColor() on each of them would be a herculean task, why not use a view that supports an adapter (i.e ListView, RecyclerView etc). Your TextViews would show up the exact same way as you intend them to appear with the LinearLayout.
While using an adapter, you can set up a model TextView layout and set a global textColor for all the TextViews. You can override this global textcolor in your adapter by using simple if and else statements.
I hope this helps.. Merry coding!
This code will work even if you add or remove TextViews from your layout. Just put it in your activity's onCreate();
LinearLayout layout = (LinearLayout)findViewById(R.id.layout);
for (int i = 0; i < layout.getChildCount(); i++) {
View v = layout.getChildAt(i);
if (v instanceof TextView) {
((TextView) v).setTextColor(Color.BLACK);
}
}
change the color to what you like.
If you want after this code you can change the color for any specific TextView.
Pretty late answer but this does the trick.
Inside style.xml lately changed to themes.xml
<style name="ErrorStyle">
<item name="android:textColor">#FF0000</item>
</style>
Then inside your xml layout
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/ErrorStyle">
.. All of your TextView
</LinearLayout>
Using this approach we can use other xml variation such as night mode, etc... and we still have te possibility to override the internal TextViews.
I have some styles set up to work on different API's (one for v21 and one for anything below that). I want to have a style for my ImageButton but it doesn't seem to be working out the way I expect.
The style for the v-21 is
<style name="BorderlessImageButton" parent="AppTheme.BorderlessImageButton">
<item name="android:background">?android:attr/selectableItemBackgroundBorderless</item>
<item name="android:tint">#color/secondary_text</item>
</style>
The style that will be used for all other API's below v-21 is
<style name="BorderlessImageButton" parent="AppTheme.BorderlessImageButton"/>
<style name="AppTheme.BorderlessImageButton" parent="#android:style/Widget.ImageButton">
<item name="android:tint">#color/secondary_text</item>
<item name="android:background">#color/borderless_button_background</item>
</style>
Here is my xml resource
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#id/date_picker"
android:background="#null"
android:padding="10dp"
android:src="#drawable/ic_today_white_24dp"
android:theme="#style/BorderlessImageButton" />
If I run this on a device that has v-21 or v-22, the button doesn't visually react to my touch as I would expect using the ?android:attr/selectableItemBackgroundBorderless. Also, on any device below v-21, the button still doesn't react to the selector resource I have set up for it.
res/color/borderless_button_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/accent" />
<item android:color="#color/transparent"/>
</selector>
Please help me get my button to react properly to touch based on which API the user has on their device.
Thanks
You need to apply your style with
style="#style/BorderlessImageButton"
The attribute android:theme is used for activities, see this.
UPDATE
Since Android 5.0, or using AppCompat 22.1.0+ (api 11+), you can also use a ThemeOverlay and use android:theme on single views. You can read about this technique here. Thanks to Ian for this.
I have some clickable views and I want to set the default available background that is present on list click (in ICS is a blue color). I have tried putting as background this:
android:background="#android:drawable/list_selector_background"
but it is not the default blue I have by default (the one I used is orange). What is the drawable used by default on android as click selector?
Thanks
This works for me:
android:background="?android:attr/selectableItemBackground"
It's list_selector_holo_dark or the equivalent holo light version; and these are the defaults in Honeycomb and above. list_selector_background is the non-holo version, used in Gingerbread and below.
EDIT: I believe (but can't confirm) that the platform agnostic selector is ?android:attr/listSelector
If you are using appcompat-v7, you can just use ?attr/selectableItemBackground.
There is a way to combine all the valid answers:
Define a attribute (eg. in values/attrs.xml):
<attr name="clickableItemBackground" format="reference"/>
In your platform dependent theme section (eg. in values/styles.xml or values/themes.xml) declare this:
<style name="Theme.Platform" parent="#android:style/Theme.Whatever">
<item name="clickableItemBackground">#android:drawable/list_selector_background</item>
</style>
In your platform dependent theme section for api-11+ (eg. in values-v11/styles.xml or values-v11/themes.xml) declare this:
<style name="Theme.Platform" parent="#android:style/Theme.Holo.Whatever">
<item name="clickableItemBackground">?android:attr/selectableItemBackground</item>
</style>
Then use ?attr/clickableItemBackground wherever needed.
A solution similar to flx's answer, but without additional attribute definition.
Platform independent style used for pre-Holo devices (in res\values\styles.xml):
<style name="SelectableItem">
<item name="android:background">#android:drawable/list_selector_background</item>
</style>
Style for Holo devices (API Level 14+) (in res\values-v14\styles.xml):
<style name="SelectableItem">
<item name="android:background">?android:attr/selectableItemBackground</item>
</style>
Apply style to needed view, e.g., LinearLayout:
<LinearLayout
style="#style/SelectableItem"
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
</LinearLayout>
This works fine on api 11 and above. But as noted it wont work on previous versions.
android:background="?android:attr/selectableItemBackground"
Here is a solution to have it run on all versions running android.
Add the appropriate colors within the colors.xml which is located within your values folder. It should appear as such:
<color name="white">#ffffff</color>
<color name="blue">#7ecce8</color>
Create an xml selector file. Here I named it button_selection.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="#color/blue"/> <!--pressed -->
<item android:state_focused="true" android:drawable="#color/blue"/> <!-- focused -->
<item android:drawable="#color/white"/> <!-- default -->
</selector>
Go to your view or button and set the newly created button_selection.xml as its background.
android:background="#drawable/button_selection"
Alternatively,
android:background="?android:attr/listChoiceBackgroundIndicator
if you just want the items to highlight blue (or whatever the current default is) while they are clicked.
Setting Background restricts you from choosing a background color or drawable later!
So my advice is to add this style to your styles.xml:
<style name="TouchableView">
<item name="android:foreground">?android:attr/selectableItemBackground</item>
</style>
And then on every view you only need to add:
android:theme="#style/TouchableView"
Like ANY VIEW!
<TextView
android:id="#+id/my_orders"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:theme="#style/TouchableView"
android:background="#color/white"
android:gravity="left"
android:padding="10dp"
android:text="#string/my_orders"
android:textColor="#color/gray"
android:textSize="14sp" />
Don't forget to add onClickListener to see the results.
In short - android:background="?selectableItemBackground" ;)