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
Related
I am trying to achieve this layout. The upper part is a bit dark and it decreases as we move down making it complete transparent. I tried a couple of gradient variations but didn't get the desired results. Does anybody have idea of how to achieve this. Is it gradient or shadow ?
Create a gradient file and use this code you can increase or decrease transparency as you want
layout-->new file-->layout resource file--> give any name
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient android:startColor="#B71A1A1A"
android:angle="270"
android:centerColor="#00FFFFFF"
android:endColor="#00FFFFFF"/>
</shape>
</item>
</selector>
On Android.
I am looking for a way to create a background drawable which will give the image a transparent gradient.
Aiming to have the top of the image slightly less opaque than the original image and fade down to a completely transparent image.
Would like to do this as part of a drawable so I can apply to any of the items within a RecyclerView during run time.
Be grateful for any help if anyone has any idea.
Example - Drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_image"/>
<item>
<shape android:shape="rectangle">
<gradient android:startColor="#00efefef"
android:endColor="#ffefefef"
android:angle="270"
android:type="linear"/>
</shape>
</item>
</layer-list>
I want layout with dynamic background gradient. Start scroll from one color and at the end of scroll another color. If this screen without scroll, background looks like usual gradient.
Is there are any way to do it?
Thank a lot.
I'm not sure if this is what you mean.You can create a xml file in drawable and name it like background.xml. In this file, for example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape = "rectangle>
<gradient
android:startColor="#`enter code here`"
android:endColor="#`enter code here`"
android:angle="..." />
</shape>
</item>
</selector>
Then in the layout of your activity, you set background by #drawable/background.xml
I've been following this tutorial here Medium - Diagonal Cut View to get that diagonal view effect
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" />
<item>
<bitmap
android:src="#drawable/bebe"
android:gravity="center"
android:alpha="0.1" />
</item>
<item android:top="260dp"
android:bottom="-100dp"
android:left="0dp"
android:right="-260dp">
<rotate
android:fromDegrees="-10"
android:pivotX="0%"
android:pivotY="100%">
<shape
android:shape="rectangle">
<solid
android:color="#android:color/white"/>
</shape>
</rotate>
</item>
</layer-list>
So far the code is the almost the same and the effect is achieved, but only works on Lollipop+, I have searched but cannot find how to have a color overlay on top of an drawable to achieve this same effect and all my tries has being in vain.
The drawable goes in the background property of a RelativeLayout. I have tried to make it in 2 separated ImageView, one for the background image and one for the color overlay, but that doesn't apply the diagonal style right.
How can one achieve this effect for pre-lollipop versions?
Drawable background = relativeLayout.getBackground();
background.setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_IN);
you can also try SRC_ATOPor MULTIPLY depending on desired effect.
========= EDIT ========================
Ok, I think I now better understand what you are asking. It wasn't entirely clear at first.
You aren't asking about a color overlay per-say, or rather, that is not what your problem is. Your problem lies in your reliance on the alpha attribute.
Do this, I have reordered your elements, so that the colored shape goes on top of the image, and instead of making the image transparent, we make the colored shape's color have an specified alpha byte. You can change the color and alpha as you like.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:gravity="center"
android:src="#drawable/muse15fence_750"/>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#cc3F51B5"/>
</shape>
</item>
<item
android:bottom="-100dp"
android:left="0dp"
android:right="-260dp"
android:top="260dp">
<rotate
android:fromDegrees="-10"
android:pivotX="0%"
android:pivotY="100%">
<shape
android:shape="rectangle">
<solid
android:color="#android:color/white"/>
</shape>
</rotate>
</item>
</layer-list>
This is what it looks like in Jelly Bean.
I have a ListView that sits on the left side of a tablet-size screen. My goal was to give it a solid background with a border on the right, then apply an overlapping background on the list element to break that border so that it appears to be a part of the view on the right.
The ListView Background
I achieved the right border using a <layer-list> drawable as suggested by Emile in another question:
rightborder.xml
<?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/black" />
</shape>
</item>
<item android:right="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
...and here's the ListView definition for good measure:
<ListView
android:id="#+id/msglist"
android:layout_width="300dp"
android:layout_height="match_parent"
android:divider="#color/black"
android:dividerHeight="1dp"
android:background="#drawable/rightborder"
android:paddingRight="0dip">
</ListView>
<!-- I added the android:paddingRight after reading something
about shape drawables and padding, don't think it actually
did anything. -->
Attempting to override it with a color
In order to achieve the desired effect, I placed the following in the getView function of my adapter:
//If it's selected, highlight the background
if(position == mSelectedIndex)
convertView.setBackgroundColor(R.color.light_gray);
else
convertView.setBackgroundResource(0);
However, using this method, the black border of the ListView's drawable remained visible, and only the white part of the background was replaced by gray. Here's a screen capture:
Fixing it with a drawable
On a hunch, I replaced the color I was assigning with a shape drawable:
selectedmessage.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/light_gray" />
</shape>
getView snippet:
//If it's selected, highlight the background
if(position == mSelectedIndex)
convertView.setBackgroundResource(R.drawable.selectedmessage);
else
convertView.setBackgroundResource(0);
This achieves the desired result, as shown below:
The question:
Why does assigning a rectangle as the background for my ListView element cover the entire view, while assigning the color allows the black border to show through? I'm happy it's working, but I'd like to know why Android is rendering the view this way so I can learn more about how Android renders Views.
Other notes:
I'm running the project in the stock Android 3.2 emulator, if that makes any
difference.
One clue may be that the light_gray color background seems to render darker than the light_gray shape resource.
I doubt it makes a difference, but light_gray is:
<color name="light_gray">#FFCCCCCC</color>
You can't do this:
convertView.setBackgroundColor(R.color.light_gray);
setBackgroundColor does not take a resource id : http://developer.android.com/reference/android/view/View.html#setBackgroundColor(int)
So your getting some incidental behaviour that isn't doing what your expecting.
You would have to do:
convertView.setBackgroundColor(getResources().getColor(R.color.light_gray);
http://developer.android.com/reference/android/content/res/Resources.html#getColor(int)