Develop Reference

How can i use multiple shapes in android xml design

I am very new to android and trying to create a design like this in xml.
I was able to create the left most portion of the design which has circle within a circle and a textview.
Following are the files i have created for the above.
/drawable/design_circle.xml
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="6dp"
android:right="6dp"
android:bottom="6dp"
android:left="6dp">
<shape
android:shape="oval">
<stroke
android:width="1dp"
android:color="#78d9ff"/>
</shape>
</item>
<item>
<shape
android:shape="oval">
<stroke android:width="4dp"
android:color="#78d9ff"/>
</shape>
</item>
/layout/view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_gravity="center"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/ec_txtDate"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/design_circle"
android:text="09"
android:textAlignment="center"
android:gravity="center_vertical"
android:textStyle="bold"
android:textSize="50dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
But i am not able to create * OCTOBER * section of the design which has to adjacent to the circle. Thank you in advance.

If you don't want to give clicks on each of that sub sections use the image instead.You completed the left side, when looking i think you will be expecting click on the circle so make the image into two give an image view right of the shape you created
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_gravity="center"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"//give this to align the objects in this view center alignment
android:orientation="vertical"//remove this because it is not relevant for a relative layout but relevant for linearlayout>
<TextView
android:id="#+id/ec_txtDate"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/design_circle"
android:text="09"
android:textAlignment="center"
android:gravity="center_vertical"
android:textStyle="bold"
android:textSize="50dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/"ec_txtDate
android:src="#drawable/your_image.png" />
</RelativeLayout>
</android.support.v7.widget.CardView>

Place 3 circles in a LinearLayout to occupy equal amount of space

I want to have 3 circular buttons horizontally with equal margins. I tried setting programmatically but I get NPE since view was not drawn.
How can I do it in layout file? I tried below but is not circle.
Place 3 buttons in a LinearLayout to occupy equal amount of space
Please help.

Use like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</FrameLayout>
</LinearLayout>
Apply style to your buttons

You can try this.
circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#FF0000" android:width="5dip"/>
<solid android:color="#FF0000"/>
</shape>
Put this inside the drawable folder and set this as background of your buttons (added like in the accepted answer of the link).
Hope this helps

How to separate the footer of a layout with a line in android

I am building a page with a Linearlayout and numerous elements within it. At the bottom of the screen, I want to add a line, separating the "footer". How can this be achieved? I was thinking for something as a TextView, and the line to be the text added, but am sure there is a better way to be done. Thanks!

just add a view with specify background into the xml layout like below:
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#android:color/darker_gray"/>

use this xml for your purpose ...... It just example ....
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Footer" />
</LinearLayout>
</LinearLayout>
Note:- 2nd Linear layout is For main content .... 3rd Linear layout for footer .....
output of above xml ..

To Seperate Footer from the Container you can add line as a Seperator. But I can give better approach you have to add Shadow to the LinearLayout it will make sense that your Main Container and Footer will be seperate.
My Approach.
footer.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#drawable/linearlayout_upper_shadow"
android:layout_alignParentBottom="true">
<LinearLayout
android:id="#+id/below_linear_layout"
android:layout_width="0.0dp"
android:layout_height="match_parent"
android:layout_weight="50.0"
android:orientation="vertical"
android:weightSum="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="0.0dp"
android:layout_marginLeft="#dimen/normal_margin15"
android:layout_marginTop="#dimen/normal_margin5"
android:layout_weight="0.50"
android:text="$1,605"
android:textSize="#dimen/textsize20"
android:textColor="#color/black1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0.0dp"
android:layout_marginLeft="#dimen/normal_margin15"
android:layout_weight="0.50"
android:text="View price detail"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/textsize13"
android:layout_marginTop="-5dp" />
</LinearLayout>
<Button
android:id="#+id/continue_button"
android:layout_width="0.0dip"
android:layout_height="match_parent"
android:layout_margin="#dimen/normal_margin8"
android:layout_weight="50.0"
android:background="#color/colorPrimary"
android:gravity="center"
android:text="#string/continue_string"
android:textColor="#color/white1"
android:textSize="#dimen/textsize13" />
</LinearLayout>
for separator.
separator.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/linear_layout_shadow"/>
/>
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="1dp"
android:bottom="0dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
OutPut :

Vertical Line and a circular view

I am trying to get a vertical line in-between ImageViews to showcase a flow.
Here is what I am trying to achieve,
Here is what I have now
Background
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="44dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray" />
<padding android:left="1dp" />
</shape>
</item>
<item android:left="44dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
Item Layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/progress_item_bg"
android:orientation="horizontal"
android:padding="10dp">
<ImageView
android:src="#drawable/circle"
android:layout_weight="20"
android:layout_width="0dp"
android:layout_height="match_parent" />
<TextView
android:id="#+id/label"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="80"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:text="Group" />
</LinearLayout>
Is there a better way to do this ?

Is there a better way to do this Yes.
You can use a TextView to include the left Image, and save yourself a View for every row, by simply using a compound drawable:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/progress_item_bg"
android:padding="10dp"
>
<TextView
android:id="#+id/label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableLeft="#drawable/circle"
android:drawablePadding="8dp"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:text="Group"
/>
</RelativeLayout>
To set the drawable via code, use setCompundDrawablesWithIntrinsicBounds(): http://developer.android.com/reference/android/widget/TextView.html#setCompoundDrawablesWithIntrinsicBounds(int, int, int, int)
You might also want to add some top and bottom margin to the vertical line and make the background color transparent, instead of white (so you can use it also on a dark container background color).

why there is some space in this layout?

I use this code for making this layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerInParent="true"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>
rouded_whiite.bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<corners
android:radius="20dp"/>
</shape>
But when I do this I have see this result. As you can see there is some margin below of red button. I didn't set any margin or something but there is some space there. What should I do here for getting exact result as in fist image.

Remove the margin from your RelativeLayout and make your LinearLayout gravity android:layout_centerHorizontal="true"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:background="#drawable/rounded_white_bg">

Use :
android:layout_centerHorizontal="true"
instead of
android:layout_centerInParent="true"
and remove margin from bottom...

<LinearLayout
android:layout_height="wrap_content"
it is because of this. remove the imageview from the linear layout and set in the relative layout and give property as alignparent bottom and for the linear layout give alignparent top and above the image view property,

Try This
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>

If your using drawable for imageview as .png or .jpg use the following drawable for your image may be it would help. save this as backgroung_bg.xml or anything else as you wish
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape >
<corners android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp"/>
<solid android:color="#CF4647"/>
<padding android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
</shape>
</item>
when you apply this you would get following warning just ignore and run it. if you need gradient type of color ask me
The graphics preview in the layout editor may not be accurate:
Different corner sizes are not supported in Path.addRoundRect. (Ignore for this session)