Develop Reference

How is a bottom line added with this layer-list drawable?

I want to have a bottom line in a view. The following drawable somehow adds a bottom border:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<!-- Set the border color of your layout here -->
<solid android:color="#color/red" />
</shape>
</item>
<!-- This is for border bottom but
you can change this according to your need -->
<item android:bottom="2dp" >
<shape
android:shape="rectangle">
<!-- Set the background color of your layout here -->
<solid android:color="#color/green" />
</shape>
</item>
</layer-list>
The result of this is:
Problem:
1) I don't understand how this works at all. It seems this is some trick using margins to get a red bottom border but I don't really get it.
2) I need to be able to add a bottom border but I don't want to set any specific background color for the whole view. Is that possible?

This is telling the system from where to start this item layout.
Since here we have bottom 2dp so this layout start 2dp from bottom.
Change bottom to end,start or other options for more understanding.

For 2) I need to be able to add a bottom border but I don't want to set any specific background color for the whole view. Is that possible?
replace your drawable with below code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<!--Uncomment this if you wnat to set any background color to
your rectangle
<solid android:color="#ffffff" />-->
<stroke
android:width="1dp"
android:color="#color/red" />
</shape>
</item>

How to make glassy quare button with drawable on top?

I want to make a glassy button with application icon drawable on top.
I tried Button, set android:background to the glassy drawable, and attached an application icon using drawableTop, however, the application icon doesn't center in the button
So I tried to use ImageButton but ImageButton doesn't have android:background and that means I can't set the glassy drawable and app icon together.
How can I make glassy drawable using XML?
How can I apply both backgrounds and center the app icon?
The button is 75x75 dp

Here is the view for your requirement
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/android"
android:text="Android"
android:padding="20dp"
android:gravity="center"
android:layout_gravity="center"
android:drawablePadding="15dp"/>
I have tried this with 75 * 75 dp drawable. It is aligning to the center. You can also set background to the button for glassy look. To do it so use this
tool to generate background drawable for your need and customize accordingly
Here is the glassy button background that i have created for you. Set this in your android:background=#drawable/glassybutton
glassybutton.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#ff0000"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item android:bottom="10dp">
<shape android:shape="rectangle">
<gradient android:angle="270"
android:startColor="#80FFFFFF"
android:endColor="#20FFFFFF"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>

Try using ImageView, use android:background for your drawable and android:src for your icon and you can change the gravity of the icon within the view by android:gravity

Change Layout Background Drawable Color based on Value

So I have an Android application in which sliders are used to set the value for multiple parameters. I am using a "Google Cards" type of layout for each slider box. Each card is its own relative layout contained within a LinearLayout which is placed within a ScrollView. I would like to change the color of the card based on the value the user sets in the card, however, the problem I have is that the color for the background is defined in the XML for the card design.
How can I change the color in the XML for the card design based on the value the user puts in on the slider? Also, is there a way to have a gradient effect when changing colors. For example, 0 could be a strong red, while 10 is a strong green, 5 would be a yellow and then 2.5 would be a mix between red and yellow and 7.5 would be a mix between yellow and green.
XML for layout background:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#android:color/white"/>
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp"/>
</shape>
</item>
</layer-list>
Relative Layout XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_card"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:id="#+id/infoLayout">
</RelativeLayout>
What a Card looks like:

Android - Adding border to multiple views with different background colors?

I've been using the following method to add a border to the top of a view:
<?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="#b7b7b7" />
</shape>
</item>
<item android:top="1px" >
<shape android:shape="rectangle">
<solid android:color="#5f5f5f" />
</shape>
</item>
</layer-list>
The above gets specified in its own xml file within the drawable folder, then set as the background on the view where I want the border to appear.
Now, the problem here is that this border is "hard coded" to a specific background color. Whichever view I apply it on, the background color will be changed to #5f5f5f.
I want to be able to set any background color, then apply a border. In other words, I can have a red view, a green view, and a blue view. Suppose I want to place the same border on top of each one. Is there a way to do this without making 3 copies of the above xml file and changing the color in each one?

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.