Hi so I am little confused and wondering if anyone could point me in the right direction.
Go and use Google Play Store on Lollipop and pre-lollipop
You will see on lollipop that selectable views have the ripple effect.
On pre-lollipo, you get this highlight effect.
How is this done?
At the moment in my app, I have a drawable-v21 directory that contains this selector
It basically does the ripple on top of my background
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask" android:drawable="#android:color/white"/>
<item android:drawable="#color/colorAccentWith92PercentOpacity"/>
</ripple>
However, other answers say to use
android:background="?attr/selectableItemBackground"
To get the highlight effect on pre-lollipop but this overrides my background. How could i set this on top of my current background?
Also do i have to create a ripple drawable (in drawble-v21) for every kind of button in my app? How would I do this for recycler view items?
What makes this question unique
I do not want ripple for pre-lollipop I am asking how devs efficiently make their button do ripple on lollipop and a hight light effect on pre
Option 1
Define colorControlHighlight in your theme and as long you're using default appcompat-v7 buttons the highlight color should work out-of-the-box.
Option 2
This is an example of how I backported Material button style with a bit of crossfade animation and shadows without using external libraries. May it help you on your way.
Provided the button will be white text over dark background (#color/control_normal) with light highlight:
values/themes.xml
Here I'll override default button style for the whole theme:
<style name="AppTheme" parent="Base.AppTheme">
<item name="buttonStyle">#style/Widget.AppTheme.Button</item>
</style>
values/integers.xml
<!-- Some numbers pulled from material design. -->
<integer name="button_pressed_animation_duration">100</integer>
<integer name="button_pressed_animation_delay">100</integer>
values-v21/styles.xml
Button style for Lollipop which understands theme overlays and uses ripple by default. Let's just have it color the ripple with appropriate paint:
<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
<!-- On Lollipop you can define theme via style. -->
<item name="android:theme">#style/ThemeOverlay.AppTheme.Button</item>
</style>
<style name="ThemeOverlay.AppTheme.Button" parent="ThemeOverlay.AppCompat.Dark">
<!-- The magic is done here. -->
<item name="colorButtonNormal">#color/control_normal</item>
</style>
values/styles.xml
Before Lollipop it gets tricky.
<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_normal_background</item>
</style>
drawable/button_normal_background.xml
Thi is the composite drawable of the whole button.
<inset
xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_button_inset_horizontal_material"
android:insetTop="#dimen/abc_button_inset_vertical_material"
android:insetRight="#dimen/abc_button_inset_horizontal_material"
android:insetBottom="#dimen/abc_button_inset_vertical_material">
<layer-list>
<!-- Shadow. -->
<item
android:drawable="#drawable/button_shadow"
android:top="-0dp"
android:bottom="-1dp"
android:left="-0dp"
android:right="-0dp"/>
<item
android:drawable="#drawable/button_shadow_pressable"
android:top="-0dp"
android:bottom="-3dp"
android:left="-1dp"
android:right="-1dp"/>
<!-- Background. -->
<item android:drawable="#drawable/button_shape_normal"/>
<!-- Highlight. -->
<item>
<selector
android:enterFadeDuration="#integer/button_pressed_animation_duration"
android:exitFadeDuration="#integer/button_pressed_animation_duration">
<item
android:drawable="#drawable/button_shape_highlight"
android:state_focused="true"
android:state_enabled="true"/>
<item
android:drawable="#drawable/button_shape_highlight"
android:state_pressed="true"
android:state_enabled="true"/>
<item
android:drawable="#drawable/button_shape_highlight"
android:state_selected="true"
android:state_enabled="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
</item>
<!-- Inner padding. -->
<item android:drawable="#drawable/button_padding"/>
</layer-list>
</inset>
drawable/button_shadow.xml
This is the shadow when not pressed.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp"/>
<solid android:color="#2000"/>
</shape>
drawable/button_shadow_pressable.xml
This is the extended shadow in pressed state. The result effect will look crude when you look up close but it's good enough from distance.
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="UnusedAttribute"
android:enterFadeDuration="#integer/button_pressed_animation_duration"
android:exitFadeDuration="#integer/button_pressed_animation_duration">
<item
android:state_pressed="true"
android:state_enabled="true">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="3dp"
android:topRightRadius="3dp"/>
<solid android:color="#20000000"/>
</shape>
</item>
<item android:drawable="#android:color/transparent"/>
</selector>
drawable/button_shape_normal.xml
This is the main button shape.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/abc_control_corner_material"/>
<solid android:color="#color/control_normal"/>
</shape>
drawable/button_padding.xml
Just additional padding to be absolutely consistent with the Material button.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
<padding
android:left="#dimen/abc_button_padding_horizontal_material"
android:top="#dimen/abc_button_padding_vertical_material"
android:right="#dimen/abc_button_padding_horizontal_material"
android:bottom="#dimen/abc_button_padding_vertical_material"/>
</shape>
drawable/button_shape_highlight.xml
This is the highlight button shape drawn over normal button shape.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/abc_control_corner_material"/>
<solid android:color="#color/control_highlight"/>
</shape>
#color/control_highlight can point to
#color/ripple_material_dark - translucent white, use over dark background
#color/ripple_material_light - translucent black, use over light background
Any other color you define.
You can set a background of your views in this way:
android:background="#drawable/touch_selector"
Create a version without ripple for pre lollipop:
drawable/touch_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
<item android:state_pressed="true"
android:drawable="#color/grey"
/>
<!-- For ListView in SINGLE_CHOICE_MODE, it flags the active row -->
<item android:state_activated="true"
android:drawable="#color/light_green" />
<!-- Default, "just hangin' out" state. -->
<item android:drawable="#android:color/transparent" />
</selector>
Now do the same for lollipop and above,
but with ripple effect:
crete drawable-v21/touch_selector.xml
It will look like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
<item android:state_pressed="true">
<ripple android:color="#color/grey" />
</item>
<!-- For ListView, when the view is "activated". In SINGLE_CHOICE_MODE, it flags the active row -->
<item android:state_activated="true"
android:drawable="#color/light_green" />
<!-- Default, "just hangin' out" state. -->
<item android:drawable="#android:color/transparent" />
</selector>
That's it.
Now you are having ripple effect at lollipop and above devices and highlight at pre lollipop.
Edit:
In case of using in a ListView - use created above as a background of ListView item
Related
I created custom button based on a MaterialButton that is semi-transparent (primaryColorDisabled) when pressed and disabled. Now, I would like to have its ripple effect to turn the button from its primaryColor to the primaryColorDisabled instead of the MaterialButton's default highlighted color.
My colors only differ only in alpha and are defined:
<color name="primaryColor">#283593</color>
<color name="primaryColorDisabled">#A0283593</color>
To my custom button I apply the following style:
<style name="CustomButton" parent="Widget.MaterialComponents.Button">
<item name="android:background">#drawable/custom_background</item>
</style>
Below are the recursive definitions of my drawables. I removed not pertinent bits like namespace, padding, margins, etc.
#drawable/custom_background:
<selector>
<item android:state_enabled="false"
android:drawable="#drawable/custom_disabled" />
<item android:state_pressed="true"
android:drawable="#drawable/custom_disabled" />
<item android:drawable="#drawable/custom_ripple" />
</selector>
#drawable/custom_disabled:
<inset>
<shape
android:shape="rectangle"
android:tint="#color/primaryColorDisabled" >
<solid android:color="#color/primaryColor" />
</shape>
</inset>
#drawable/custom_ripple:
<ripple android:color="?attr/colorControlHighlight">
<item android:drawable="#drawable/custom_enabled" />
</ripple>
#drawable/custom_enabled:
<inset>
<shape
android:shape="rectangle" >
<solid android:color="#color/primaryColor" />
</shape>
</inset>
Now, I tried changing in #drawable/custom_ripple the color from ?attr/colorControlHighlight to my #color/primaryColorDisabled, but then when I click on my button nothing changes: no ripple and no even 'state_pressed' look. Any ideas how to achieve that?
i'm trying to make a simple rounded button like this
starting from this
The problem is that i don't want to lose the style (the ripple and the color change when you press it and the shadow). that would happen using a state-drawable as background.
How can i achieve it?
Just use the MaterialButton in the Material Components library with the app:cornerRadius attribute.
Something like:
<com.google.android.material.button.MaterialButton
android:text="NORMAL"
app:cornerRadius="16dp"
../>
<android.support.v7.widget.AppCompatButton
style="#style/buttonApp"
android:text="Normal" />
in res>values>styles.xml put this. and change padding, colors if you need.
<style name="buttonApp" parent="#style/Widget.AppCompat.Button.Borderless">
<item name="android:layout_height">#dimen/appButtonHeight</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:gravity">center</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingTop">10dp</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:textColor">#color/colorWhite</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16sp</item>
<item name="android:background">#drawable/bg_button_orange</item>
</style>
You will get required press effect by 1 drawable for post 21 version, like below, but pre 21 version do not support ripple effect so you have to make some drawables background for press and non press effect, i have included final solution here
bg_button_orange.xml in res>drawables-v21>
(this is after 21 version android)
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/colorGreenAlpha" />
<corners android:radius="15dp" />
</shape>
</item>
<item android:drawable="#drawable/bg_button_not_selected" />
</ripple>
bg_button_orange.xml in res>drawables>
(this is for pre 21 version android)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_button_selected" android:state_pressed="true" />
<item android:drawable="#drawable/bg_button_selected" android:state_focused="true" />
<item android:drawable="#drawable/bg_button_selected" android:state_selected="true" />
<item android:drawable="#drawable/bg_button_not_selected" />
</selector>
bg_button_not_selected.xml in res>drawables
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorGreenLight" />
<corners android:radius="#dimen/appButtonRadius" />
</shape>
bg_button_not_selected.xml in res>drawables
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorGreen" />
<corners android:radius="#dimen/appButtonRadius" />
</shape>
put in res>values>dimens.xml
<dimen name="appButtonHeight">60dp</dimen>
<dimen name="appButtonRadius">30dp</dimen>
put in res>values>colors.xml
<color name="colorGreen">#009688</color>
<color name="colorGreenAlpha">#b0009688</color>
<color name="colorGreenLight">#27d4c4</color>
Button height should be double than button radius to get exact round corners.
You will get button like belo image with ripple effect on post 21 version and press effect before 21 version.
Here is the link to what I have in mind.
https://dribbble.com/shots/1407665-Categories/attachments/204971
Is there a popular library anyone knows that can manage this, otherwise I am alright with going the customizing route.
I have my 9 buttons defined in my XML no problem.
Next I know I have to create a xml file in the drawable folder like "button_shape.xml". Then I add this to my code:
android:background="#drawable/button_shape"
I make my button have an image, I assume with:
android:drawableTop="#drawable/buttonImage"
I guess lastly is how do I create a shape that keeps the bottom colour a consistent size with the text. While allowing different button sizes. Also can I easily alternate the colours by setting the style on each button and defining them as so:
<style name ="ButtonTheme.Custom1" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_blue_light</item>
<item name="colorPrimaryDark">#android:color/holo_blue_dark</item>
</style>
<style name ="ButtonTheme.Custom2" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_green_light</item>
<item name="colorPrimaryDark">#android:color/holo_green_dark</item>
</style>
<style name ="ButtonTheme.Custom3" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_red_light</item>
<item name="colorPrimaryDark">#android:color/holo_red_dark</item>
</style>
<style name ="ButtonTheme.Custom4" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_orange_light</item>
<item name="colorPrimaryDark">#android:color/holo_orange_dark</item>
</style>
<style name ="ButtonTheme.Custom5" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_blue_bright</item>
<item name="colorPrimaryDark">#android:color/holo_blue_light</item>
</style>
My custom shape so far is this, which is close; but how can I make the darker color keep a consistent size while the other moves according to size of button?
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="10dp">
<shape android:shape="rectangle" >
<size android:height="10dp" />
<solid android:color="#color/colorPrimaryDark" />
</shape>
</item>
<item android:top="120dp">
<shape android:shape="rectangle" >
<size android:height="120dp" />
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</layer-list>
You can use RecyclerView and StaggeredGrid
https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html
I would like to know, if it is possible to make my ActionBar have rounded edges, more specifically only the top ones (top-left, top-right). I did some searching, but most of the methods are outdated and did not work for me. I am using AppCompat support library v22.1.1.
I have made an image of what I am trying to achieve, but my reputation is too low to upload images so I tried to describe as best as I could with words. If I have missed out any relevant information, let me know.
Yes, it is possible by using a shape drawable.
First create actionbar_foreground.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#2C5AA9"/>
<corners
android:radius="0.1dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
And then the background for the ActionBar. This color will be seen where the edges are rounded. I had trouble since I was using a light theme, where the decor view is white in color, so I made this "hack"
actionbar_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FF000000"/>
</shape>
And now you just layer them (put one over the other). Bottom layer is the background. This is what I called actionbar_layer_list.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/actionbar_background"/>
<item android:drawable="#drawable/actionbar_foreground"/>
</layer-list>
And now just define a style for your app in the styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="CustomActionBarTheme" parent="#style/AppTheme">
<item name="actionBarStyle">#style/CustomActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="CustomActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/actionbar_layer_list</item>
<item name="titleTextStyle">#style/CustomActionBarTextStyle</item>
</style>
And apply it in the AndroidManifest.xml
And it looks something like this
I have the following definition of an android style and selector applied to ListView, however I see no effect of gray gradient applied when I click on it. On click it immediately displays blue gradient.
As author of this example has written:
We want to apply this to our list selector. Instead of always showing
the same gradient, we want the gradient to change its start color from
grey to a light blue whenever a list item is pressed. Because we now
have two different list selectors—one for default state one for
pressed state—we need to keep them in separate files.
Can someone explain how it should be displayed properly ? Or I'm missing something ?
More general, what exactly I should expect to see on display screen ? Something like fluent transition from gray gradient to blue gradient on list item click ?
Update: this is how author 'sees' it, but when I click on item it looks only like on right side of picture. May I assume that author wants to see all items in list to be gray by default ? Or this state is not applicable to list view items ?
list_item_default.xml -> GRAY GRADIENT
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="0"
android:endColor="#FFFF"
android:startColor="#AFFF" />
<stroke
android:width="1dip"
android:color="#CCC" />
<corners android:radius="5px" />
</shape>
list_item_pressed.xml -> BLUE GRADIENT
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="0"
android:endColor="#FFFF"
android:startColor="#AA66CCFF" />
<stroke
android:width="1dip"
android:color="#CCC" />
<corners android:radius="5px" />
</shape>
list_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/list_item_default" android:state_pressed="false"/>
<item android:drawable="#drawable/list_item_pressed" android:state_pressed="true"/>
</selector>
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyMoviesTheme" parent="#android:style/Theme.Black">
<item name="android:listViewStyle">#style/MyMoviesListView</item>
<item name="android:windowBackground">#drawable/film_bg</item>
</style>
<style name="MyMoviesTextAppearance" parent="#android:style/TextAppearance">
<!--<item name="android:textStyle">bold</item>-->
</style>
<style name="MyMoviesListView" parent="#android:Widget.ListView">
<item name="android:background">#color/list_background</item>
<item name="android:listSelector">#drawable/list_selector</item>
<item name="android:cacheColorHint">#android:color/transparent</item>
<item name="android:fastScrollEnabled">true</item>
<item name="android:footerDividersEnabled">false</item>
</style>
</resources>
Try adding a sentence：
<item
android:state_enabled="true"
android:drawable="#drawable/list_item_default"/>
<item
android:state_enabled="true"
android:drawable="#drawable/list_item_pressed"
android:state_pressed="true"/>