Issue regarding ripple effect in Android - android

I want to implement a ripple effect while I press my button . The border of the button has been made by me (mentioned in the item tag at the end) . Also I want a bordered ripple hence I use "mask" as the id. If I don't implement solid tags and a color to it inside the mask , ripple effect is not implemented . What could be the reason for it
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorHighlighted">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#color/teal_700"/>
</shape>
</item>
<item android:drawable="#drawable/item_circular_color_accent_border"/>
</ripple>

Related

Changing color of a portion in picture

I am doing such type of project, in my project, i want to change the color of only a portion of my picture, for example when I click on a button I want the blue become green, i want to know if there is any way to do that or it's impossible
To achieve the above feature, you could define a shape and place it above the button and then change the color onClick. A simple example is:
shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp"
android:bottomRightRadius="4dp"
android:bottomLeftRadius="4dp">
</corners>
<solid
android:color="#4848ea">
</solid>
</shape>
Now change the color of the shape using the following code.
GradientDrawable Shape = (GradientDrawable)shape.getBackground();
Shape.setColor(Color.GREEN);
Place the above code within the button onClick.

Android Ripple drawable and state focused (DPAD navigation)

I'm trying to implement a ripple effect background for buttons in an Android TV and Amazon FireTV application (Navigation via DPAD). I'm using AppCompat, but since the default button styles all use the ripple i now use a custom drawable background without any ripple and just an ordinary selector.
The behavior I try to achieve
default (no focus): gray button
focused: yellow button
pressed: yellow with dark yellow ripple on top
What actually happens
default (no focus): gray button => OK
focused: yellow with a partially transparent dark yellow on top => PROBLEM.
pressed: dark yellow ripple => OK
This color-mixture seems to be the default behavior of ripple drawables, which makes them practically unusable for TV applications.
Any chance I can escape this? What i want is basically a ripple THAT DOESN'T MODIFY THE BACKGORUND COLOR and only draws on top.
According to https://stackoverflow.com/a/29777616/332798, if you add a mask to your ripple that will make the default state transparent and won't affect the focused color anymore.
I know this question is already old, but I found a solution which is working for me:
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/ripple">
<item android:id="#android:id/mask">
<selector>
<!-- for hard key, ripple should be visible -->
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#android:color/black"/>
<corners android:radius="#dimen/cornerRadius"/>
</shape>
</item>
<!-- on focused state, set the color to transparent, no ripple will be visible -->
<item
android:state_focused="true">
<color android:color="#android:color/transparent"/>
</item>
<!-- default behavior, ripple should be visible-->
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/black"/>
<corners android:radius="#dimen/cornerRadius"/>
</shape>
</item>
</selector>
</item>
<!-- background color-->
<item >
<color android:color="#android:color/background"/>
</item>
</ripple>
The problem on this behavior is the mask item. The documentation of RippleDrawable says:
If a mask layer is set, the ripple effect will be masked against that layer before it is drawn over the composite of the remaining child layers.
If no mask layer is set, the ripple effect is masked against the composite of the child layers.
As I understand, if you use DPAD/HardKeys, then the mask item will be focused. To exclude the mask item, I added a selector and overwrite the behavior of the focused state with an transparent color. So the mask will not be visible if the view is focused. As default behavior it is necessary to set a solid color for the mask, otherwise the ripple will not be visible. In my case I added a shape, because I want to have round corners for my ripple.
Additionally I added the pressed state for the selector, because I want to have also a ripple effect on HardKey enter.
At last point I added an additional item with my background color.

Change shape of Button while mantaining its material design ripple effect

I want to create Button with custom shape , which would react on press like in theme "Base.Widget.AppCompat.Button.Colored".
However bacause of I have to customize its shape (rounded corners I have to override its android:background - this is so far the only way I know (no... no I will not use dirty hacks with FrameLayout).
Currently it can be done only by providing our custom <shape> in xml file as background drawable.
The most promising code, which enable selectableItemBackground - so imporant for me, is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/colorAccent"/>
<corners android:topLeftRadius="#dimen/button_shape_radius"
android:topRightRadius="#dimen/button_shape_radius"/>
</shape>
</item>
<item android:drawable="?attr/selectableItemBackground">
<shape>
<solid/>
<corners android:topLeftRadius="#dimen/button_shape_radius"
android:topRightRadius="#dimen/button_shape_radius"/>
</shape>
</item>
</layer-list>
Unfortunatelly I cannot shape second item with <item android:drawable="?attr/selectableItemBackground"> therefore in the end pressed item's shape is rectangle.
I would appreaciate if someone will give me soulution for this problem.
I use API_MIN = 16, so cannot use ripple effect. I also dont want to use FrameLayout or tther external Library that forces me to wrapp Button with something.
To have a ripple below 21 you can use this library Ripple Effect you use your shape without the ripple tag and surround the view with RippleView for more details you can check the Usage section
21+ you can try this i didn't test it but it should work, put this in the folder drawable-v21
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item>
<shape>
<solid android:color="#color/colorAccent"/>
<corners android:topLeftRadius="#dimen/button_shape_radius"
android:topRightRadius="#dimen/button_shape_radius"/>
</shape>
</item>
<item android:drawable="?attr/selectableItemBackground">
<shape>
<solid/>
<corners android:topLeftRadius="#dimen/button_shape_radius"
android:topRightRadius="#dimen/button_shape_radius"/>
</shape>
</item>
</ripple>
UPDATE
I changed the source code of Ripple Effect to a button
You can get the code here
USAGE
Just like any ordinary button XML
<path.to.the.RippleButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_rounded_top_blue"
android:id="#+id/mybutton"/>
Java
RippleButton button = (RippleButton) findViewById(R.id.mybutton);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(MainScreen.this, "You did it", Toast.LENGTH_SHORT).show();
}
});
If you need other view you just need to make some tweaks to the source code it's easy (in my opinion)

Material Design suggestions for edit button for each item

I wanted to add an edit button to each button in a list of items. Android action buttons should only be used once per view so those don't make sense. Is there any other way of doing it by following material guidelines? This button should be something that flies off and flies on depending on whether the overall edit button is pressed or not.
You should use flat buttons because buttons pop from backgrounds, easily grab attention, and guide the user’s eye. Here is a nice post about this
UPDATED:
To design a flat button effect you have to do the following
define your button and set background to a drawable which contains definitions for status pressed and status default
for status pressed write a drawable resource with solid color
for status default write a drawable with a item pointing to status pressed drawable as a background. And draw a lighter shape as another item with a android:bottom="2dp"
flat_button.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/rect_pressed"/>
<item android:drawable="#drawable/rect_normal"/>
</selector>
rect_normal.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rect_pressed" />
<item android:bottom="#dimen/layer_padding">
<shape android:shape="rectangle">
<corners android:radius="#dimen/corner_radius" />
<solid android:color="#color/blue_normal" />
</shape>
</item>
</layer-list>
rect_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/corner_radius" />
<solid android:color="#color/blue_pressed" />
</shape>
if you need to read the full tutorial go here.
You should probably use flat or raised button (depending on how important your edit function is).

Android unbounded ripple and background

it is possible to create a RippleDrawable defining an unbounded ripple and at the same time a background color?
I've tried everything but when i define a shape and its color the ripple is not unbounded anymore.
Also in this page https://developer.android.com/reference/android/graphics/drawable/RippleDrawable.html there is no reference about adding an unbounded ripple over a shape.
I've tried with this layer-list but the result is awful
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<ripple
android:color="#color/android_l_light_gray">
</ripple>
</item>
<item>
<shape
android:shape="rectangle">
<solid android:color="#color/android_l_dark_gray" />
</shape>
</item> </layer-list>
this is what i get
First off keep in mind that layer-list drawable works similar to FrameLayout, it stacks items as they appear so if you want to have your ripple in front just move it down
<?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="#color/android_l_dark_gray"/>
</shape>
</item>
<item>
<ripple android:color="#color/android_l_light_gray"/>
</item>
</layer-list>
Produces something like
Now you notice how it gets "clipped" by the other buttons? it is actually being overdrawn, this is because of draw order, the other views' background get drawn on top, not that the ripple is actually getting clipped, so I can think of a few solutions for your particular layout:
a. Get rid of the layer-list drawable and use just ripple as your button background, use your shape or color drawable as your ViewGroup background, producing:
Notice that you lost your grid like effect due your other background, but take a look at other number pads on lollipop and you will notice they don't have grid dividers, if you still want them use your ViewGroup to draw them.
b. Use/draw your ripple as foreground/overlay/drawableTop drawable, and the other one as background, but I think you might run into a similar issue with drawing order as before.
c. Had another one in mind but I just forgot, might come back as a dream ¯\_(ツ)_/¯
Check out Calculator from AOSP, you might want to borrow CalculatorPadLayout for your grid, or just learn how they do it :)
XML
<Button
android:id="#+id/btn_key_seven"
style="#style/AppTheme.KeypadButton"
android:text="#string/str_one" />
STYLE
<style name="AppTheme.KeypadButton" parent="Base.Widget.AppCompat.Button.Borderless">
<item name="android:background">#drawable/button_ripple_effect_unbounded</item>
<item name="android:colorBackground">#color/colorPrimaryDark</item>
</style>
Drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<ripple android:color="#color/colorPrimaryDark"/>
</item>
</layer-list>```
Working awesome for me

Categories

Resources