Develop Reference

Top-Left Outer Corner

I'm developing an android app and have some trouble with a drawable.
I tried to achieve a corner like this
https://imgur.com/DYWfsZI
I only want the red area and the white must be transparent.
(best of course as xml)

Try this:
1: Define top_left_outer_bg.xml in drawables:
<?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="#android:color/holo_red_dark" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white"/>
<corners android:radius="50dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>
</layer-list>
2: Add top_left_outer_bg.xml as background to your layout
android:background="#drawable/top_left_outer_bg"

Shape with multiple circles

I want to draw a circle of color 1 inside a circle of color 2. Both of them have stroke and its inside is transparent. This should be used as a background of a button.
Something like this (but green and red are next to each other - no gap in between. Sorry, I don't have any graphical program where I could draw them so they're next to each other.)
Is there a way how to do it in XML ?
I was thinking of doing it using shape XML but layers are scaled so layers would be on top of each other so only 1 color would be visible.

You use a layer list with insets in order to avoid the inner circle to lurk out from the outer circle, like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_red_dark" />
</shape>
</item>
<item>
<inset android:inset="4dp">
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_green_dark" />
</shape>
</inset>
</item>
</layer-list>
You set the size and background of the button like this:
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/red_green" />
It then looks like this:

Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size android:height="10dp" android:width="10dp"/>
<stroke
android:width="2dp"
android:color="#FF0000"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="1dp"
android:color="#00FF00"
/>
</shape>
</item>
</layer-list>
You can change the width and height of the size element to get a different ring width.

You can achieve this by defining two drawable resources both circle with different stroke colors and puting them in a layer-list drawable one on top of the other, with different ofsets which give then the effect you need:
Inner circle inner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorRed"
android:width="2dp"/>
</shape>
Outer circle outer.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorGreen"
android:width="2dp"/>
</shape>
Button background background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/outer"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"
android:left="0dp"
android:gravity="center"/>
<item android:drawable="#drawable/inner"
android:right="4dp"
android:top="4dp"
android:bottom="4dp"
android:left="4dp"
android:gravity="center"/>
</layer-list>
And this is final result

Android: Elevation missing on button when setting a gradient drawable as background

I have a Button and I am setting as background a gradient drawable.
The buttons with the gradient drawable are missing the elevation whereas all other buttons have the elevation.
Why is the elevation missing on the buttons with the gradient drawable? And is there any easy way to fix this?
My code looks like this:
gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="radial"
android:gradientRadius="250dp"
android:startColor="#color/blue"
android:endColor="#color/red"/>
<corners android:radius="#dimen/round_corner_radius"/>
<stroke
android:width="5dp"
android:color="#android:color/transparent"/>
</shape>
</item>
<item android:top="7dp"
android:left="7dp"
android:right="7dp"
android:bottom="7dp">
<shape android:shape="rectangle" >
<solid android:color="#88ffffff"/>
<corners android:radius="#dimen/round_corner_radius"/>
</shape>
</item>
</layer-list>
activity.xml
...
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button"
android:background="#drawable/gradient"/>
...

I solved my problem. I had to remove the
<stroke
android:width="5dp"
android:color="#android:color/transparent"/>
The problem was probably the color that was set. Without the stroke the button behaves like a normal raised button.

How can I create a vertical line in a drawable xml? Android

Is there a way to make a drawable that draws a vertical line? So far I have a horizontal line that draws this:
current code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/object_switcher_background" />
<item android:left="0dp"
android:right="250dp">
<shape android:shape="line">
<stroke android:color="#color/c19"
android:width="2dp"/>
<size android:width="40dp"/>
</shape>
</item>
<item android:left="50dp"
android:bottom="50dp"
android:top="75dp"
android:right="150dp">
<shape android:shape="line">
<stroke android:color="#color/c19"
android:width="2dp"
android:rotation="90"/>
<size android:width="40dp"/>
</shape>
</item>
</layer-list>
How can I manipulate this to make it look like this?

You could do this by nesting your second item inside a rotate item.

you can do that using rotate item: the below code defines a white background with a vertical divider using only xml drawable
<?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="#android:color/white" />
</shape>
</item>
<item>
<rotate android:fromDegrees="90">
<shape android:shape="line">
<stroke
android:width="1dp"
android:color="#android:color/darker_gray" />
</shape>
</rotate>
</item>

I'm not sure why you need a drawable for this.
This can also be done by using a simple view and adjusting its height, width and position according to your needs. For example:
<View
android:layout_width="1dp"
android:background="#color/grey_text_color"
android:layout_height="match_parent"/>

Ripples Not Drawing Correctly

I created two simple Drawables that utilize the ripple and are applied to a list of buttons generated by a RecylerView.
Drawable One:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffffffff">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#android:color/doesnt_matter" />
<corners android:radius="3dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle" android:padding="3dp">
<solid android:color="#color/store_closed"/>
<corners android:radius="3dp"/>
</shape>
</item>
</ripple>
Drawable Two:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffffffff">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#android:color/doesnt_matter" />
<corners android:radius="3dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle" android:padding="3dp">
<solid android:color="#color/store_closed"/>
<corners android:radius="3dp"/>
</shape>
</item>
</ripple>
In my adapter, I've set it up where the background of the button will be set to one of the two drawables, depending on an arbitrary boolean value.
if (isStoreOpen) {
storeOpen.setBackground(bgStoreOpen);
} else {
storeOpen.setBackground(bgStoreClosed);
}
Unfortunately, I get some weird behavior with the buttons. Sometimes, the ripples won't show up at all, and other times the ripple will appear on the button below it in the RecyclerView. Here's a video of what's happening (note I'm clicking on the bottom button): https://www.dropbox.com/s/ge5u7r7q2rfstnk/weirdRipples.mp4?dl=0
Any ideas? Thanks for your help, and let me know if you need any more of the code!