Develop Reference

Corner Color of a Shape in android

I know the solid color and also the corner section but
I want to know how can I fill color of the corner

Try using stroke in your layout file. stroke can give you the border colour and width.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#color/yourcolour"
android:width="4dp"
/>
//Other adjustments
</shape>
Let me know if this is what you were looking for
Or if you want something like in your image try the below
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark"/>
<stroke android:color="#android:color/black"
android:width="10dp"
/>
</shape>
</item>
<item >
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_blue_bright"/>
<stroke android:color="#android:color/black"
android:width="10dp"
/>
<corners android:bottomLeftRadius="150dp"/>
</shape>
</item>
</layer-list>

It seems you talking about that red colour on above image.
In that case, there is no property which give you such result.
You need to make it logically., Like take 2 views with diff background,
Red background with black colour stroke.
Sky background overlaping on 1st red view.
And simply make top view background as rounded with black color stroke. It will provide you the desired design layout.
Make sure you give same stroke to both view so that itlook to be same.
Happy coding.

Custom drawable speech bubble

I need to create a speech bubble background for an icons container like the white one in this image:
Required Appearance
I decided to use a drawable xml rather than a 9 patch image, so I can control of the rounded corner radii in my code. So, with the help of this answer to a related question, I have created the following xml:
bg_icons_container.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="0dp"
android:top="27dp"> <!-- How to make this 50% of height? -->
<rotate
android:fromDegrees="-45"
android:toDegrees="0"
android:pivotX="0%"
android:pivotY="0%"> <!-- How to make the triangle more acute? -->
<shape
android:shape="rectangle" >
<solid
android:color="#color/white"/>
</shape>
</rotate>
</item>
<item
android:left="10dp">
<shape
android:shape="rectangle">
<solid
android:color="#color/white"/>
<corners
android:radius="#dimen/border_radius_small"/>
</shape>
</item>
</layer-list>
This results in:
Actual Apperance (enlarged)
My problem is that the triangular part of the drawable is too wide. How can I make it more acute? (My minSdkVersion is 16, so I cannot use android_width on the first item to try and stretch it.)
Also, I am having to hard code android:top of the first item to 27dp. Is it possible to make this 50%, so it will correctly adjust when the height of the drawable changes?

Shape Drawable with only two sides

I am trying to implement in XML a ShapeDrawable like this, but so far without success.
How do I make the Stroke visible only for two sides?
Is that even possible?
Otherwise what cloud I use (I seed it as background of a TextView).

Here is a solution which is using a LayerListDrawable:
background_white_lateral_border.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="#android:color/white" />
</shape>
</item>
<item>
<inset
android:insetLeft="1dp"
android:insetRight="1dp" >
<shape android:shape="rectangle" >
<solid android:color="#android:color/black" />
</shape>
</inset>
</item>
</layer-list>
Note: This firstly draws a white rectangle and then a black rectangle with a left and right inset of 1dp on top of it, giving the effect of lateral borders. It's just something to keep in mind, in case you worry about performance (which is in my opinion negligible for minor styling like this).

AFAIK, that is not possible with a single ShapeDrawable. A nine-patch PNG, or a LayerListDrawable of two ShapeDrawables (one per line) should work though.

Android change color without changing shape

I have created layout similar to this:
<RelativeLayout
android:id="#+id/layout_one"
style="#style/layout_one" >
<RelativeLayout
android:id="#+id/layout_two"
style="#style/layout_two" >
<RelativeLayout
android:id="#+id/layout_three"
style="#style/layout_three" >
</RelativeLayout>
</RelativeLayout>
For layout one I have created a custom drawable with rectangle shape so that the corners would be rounded and blue background color.
But for layout three I need to set white background color but if I do android:background="#FFFFFF" than it changes also the shape and the bottom corners are no longer rounded.
My first thought was to create custom drawable for the layout_three with rounded bottom corners but it wasnt working. Either all the corners were rounded or none.
Need to create something like this in the picture with rounded corners. Any suggestions?

I see that for layout three you use #style/layout_three which is different from #style/layout_one. So why don't you go to your style folder and put item with background white in layout_three style
It should look something like this:
<style name="layout_three">
<item name="android:background">#FFFFFF</item>
<!-- ... other stuff here... -->
</style>
EDIT: Sorry I did not understand your question well, reading that comment now.
There is only one way that comes to my mind right now to help you fix that.
Create an .xml file in your drawable folder and name it layout_three.xml or whatever.
And use this code:
<?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="#FFFFFF" />
<padding
android:bottom="10dp" <!-- you can set padding here
or on your layout layout_three -->
android:left="10dp"
android:right="10dp"
android:top="10dp"
/>
<corners android:radius="2dp" /> <!-- change the radius too -->
</item>
</layer-list>
And then you just use #drawable/layout_three instead of #style/layout_three
EDIT2: You can also use this code for the corners if you want only the bottom one to be rounded
<corners
android:topRightRadius="0dp"
android:topLeftRadius="0dp"
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"/>

You can create a xml drawable with rounded bottom corners for your requirement. Try the below code:
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners android:radius="7dp"
android:topRightRadius="0dp"
android:topLeftRadius="0dp"
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"/>
</shape>
</item>

I just read that the problem is that the Android layout preview doesn't show the different corner radius so you have to test in on device or emulator to see the difference.

Shape Drawable Size not working

I have a very simple shape that I want to set the width of:
<shape android:shape="rectangle">
<solid android:color="#color/orange"/>
<size android:width="2dp"/>
</shape>
However, when I assign this to the background of a EditText it just shows an orange background instead of a rectangle of width 2dp. Why isn't setting the size working? I want to create a transparent drawable with a orange rectangle on the left side. I also have this wrapped in a selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<solid android:color="#color/orange"/>
<size android:width="2dp" android:height="6dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
</shape>
</item>
</selector>
I've tried adding height just to see if it would change the size. It doesn't. It's like its completely ignoring the size. WTF?

For me, setting the gravity of the item to "center" solved the issue.
For example:
<item android:id="#android:id/progress" android:gravity="center">
<clip>
<shape>
<size android:height="2dp"/>
<solid android:color="#color/my_color"/>
</shape>
</clip>
</item>

It can work with a foreground. It seems like you can't set a background's gravity. But you can on a foreground. I checked API 21, 23 and 24 (well, with the Studio design preview) and the following places a solid circle dot on the ImageView.
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorPrimary" />
<size android:height="8dp" android:width="8dp" />
</shape>
With the layout snippet
<ImageView
android:foreground="#drawable/list_new_dot"
android:foregroundGravity="right|center_vertical"
tools:src="#drawable/model_1_sm"
/>
UPDATE: While it appears to work in the layout design tool, it doesn't look the same in the emulator. UPDATE 2: Since this answer has a few votes, you might want to check what I actually used in order to show a new indicator dot:
https://gist.github.com/CapnSpellcheck/4d4638aefd085c703b9d990a21ddc1eb

Just to specify the user983447's answer - the size attribute does really mean a proportion. You should set the size for all shapes in your layer-list and it'll be used a as a proportion when scaling - like the layout_weight attribute of LinearLayout. So it's better to name it not a size but a weight
Below is a work-around how to implement top and bottom white lines without using the size attribute:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#fff" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp">
<shape>
<solid android:color="#888" />
</shape>
</item>
</layer-list>

I found the layer-list to be very devious for a first time Androider because of the following. At first glance most would think item top,bottom,right,left attributes are FROM the top,bottom,right,left. Where a value of the following:
<item android:top="10dp">
Would net you a starting point 10dp from the top of the respective container. This is not the case. Think of it as OFF OF the top,bottom,right,left. <item android:top="10dp"> will still net you a starting point 10dp OFF OF the top, but what happens when you want to set the bottom?
<item android:bottom="20dp">
This will not get you a bottom at 20dp from the TOP, rather a bottom of 20dp OFF OF the BOTTOM of the container.
So, for example with a 100dp container, if you wanted a rectangle with a top edge starting at 20dp and a bottom edge at 40dp:
<item android:top="20" android:bottom="60dp">

The size of a shape will be ignored when you use it as a background of a View. It will work when you show it via an ImageView:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FF7700" />
<size android:width="20dp" android:height="20dp"/>
</shape>
In your layout XML:
<!-- will have the size of 20dp x 20dp -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_shape"
/>

I had similar problem.
Documentation ( http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape ) says:
<size>
The size of the shape.
(...)
Note: The shape scales to the size of the container View proportionate to the dimensions defined here, by default. When you use the shape in an ImageView, you can restrict scaling by setting the android:scaleType to "center".
If I understand correctly, it means that "size" tag is not for setting size but for setting proportions.

shape's size attribute will provide the value for drawable.getIntrinsicWidth & getIntrinsicHeight.
if the drawable's container(e.g. ImageView, TextView) has the layout param WRAP_CONTENT, then the container dimension will change if the drawable drawingState change.
but there are a bug in android framework in ImageView drawingState implementation
ImageView only update/resize its dimension by the drawable dimension on state_selected but don't on state_activated

used this.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:color="#color/lgray"
android:width="1dip" />
<corners
android:bottomLeftRadius="0dip"
android:bottomRightRadius="0.1dip"
android:topLeftRadius="0dip"
android:topRightRadius="0.1dip" />
<solid android:color="#color/White" />
</shape>
put this rectangle.xml to drawable.and set your view background.