Develop Reference

Is there a way to create this on XML ? 2 colors box

Is there a way to create these two boxes with XML only (beside the icon of course)
The tob box has rounded bordered around it and shadow but inside it divided to two parts which one is pink background and one is white background (without stroke between them)

Create 2 XML drawables
rect_colored.xml
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorAccent"/>
<corners android:bottomRightRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
rect_white.xml
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:color="#color/colorPrimaryDark"
android:width="2dp"/>
<corners android:radius="5dp"/>
</shape>
Position the drawables appropriately
This will work differently with different root views. I'm using ConstraintLayout for simplicity
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:background="#drawable/rect_white"
android:id="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
<!--Content here-->
</FrameLayout>
<FrameLayout
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="0dp"
android:layout_marginRight="2dp"
android:layout_marginTop="0dp"
android:background="#drawable/rect_colored"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintRight_toRightOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout">
<!--Content here-->
</FrameLayout>
</android.support.constraint.ConstraintLayout>
The output

Just use a LayerList with the shapes you need nested. May take a little tweaking, but it is simple enough. You can even add in your bitmaps for the left icon if you like. Just make your layers, and adjust from the sides and handle your corners.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="50dp">
<shape
android:shape="rectangle" >
<solid android:color="#0000FF" />
<corners android:bottomRightRadius="20dp" android:topRightRadius="20dp" />
</shape>
</item>
<item android:right="50dp">
<shape
android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
</shape>
</item>
</layer-list>

Here simply you create a one xml file & drawable file to create shape & border.
MyActivity.Xml
<LinearLayout
android:id="#+id/ll_mobile_img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<RelativeLayout
android:id="#+id/rr_verification_code"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_weight="0.3">
<EditText
android:id="#+id/et_verification_code"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/ractangle_mobile_white_border"
android:ems="10"
android:hint="Enter Code"
android:drawableLeft="#mipmap/ic_launcher"
android:imeOptions="actionGo"
android:inputType="number|textAutoComplete"
android:maxLength="6"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingTop="16dp"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<LinearLayout
android:id="#+id/ll_country_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#android:color/white"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tv_verification_code_img"
android:layout_width="38dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/globe"
android:textColor="#color/blue_font_color"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
Drawable:- ractangle_mobile_white_border.xml
[![<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="360" android:endColor="#android:color/transparent" android:startColor="#android:color/transparent" />
<stroke android:width="1dp" android:color="#android:color/white" />
<corners android:bottomRightRadius="1dp" android:topRightRadius="1dp"/>
<padding android:bottom="3dp" android:left="0dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Hope this helps you.

semi-circle button android

I have two buttons and I want to change the shape of them to be semi-circles. Then place them beside each other to make a full circle. An image has been attached to show how I want the buttons to look. Any help would be greatly appreciated. Thank you.

You have to create one drawable xml file.
left_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp"
android:bottomRightRadius="0dp" android:bottomLeftRadius="25dp"
android:topLeftRadius="25dp" android:topRightRadius="0dp"/> // here you have to put dimen as per reqiurement
<solid android:color="#color/green" />
</shape>
right_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp"
android:bottomRightRadius="25dp" android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp" android:topRightRadius="25dp"/> // here you have to put dimen as per reqiurement
<solid android:color="#color/green" />
</shape>
layout.xml
<Linearlayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:background="#draable/left_corner"/>
<Button android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:background="#draable/right_corner"/>
</Linearlayout>
This was work for me..

Try this way it work for me
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="15dp" >
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/btns"
android:text="A"
android:textColor="#android:color/white"
/>
<View
android:layout_width="1dp"
android:layout_height="2dp"
android:background="#f0f0f0"
/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/bbb"
android:text="B"
android:textColor="#android:color/white"
/>
</LinearLayout>
</LinearLayout>
btns.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="30dp"
android:width="30dp"/>
<solid android:color="#000000"/>
<corners android:topLeftRadius="15dp"
android:bottomLeftRadius="15dp"/>
</shape>
bbb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="30dp"
android:width="30dp"/>
<solid android:color="#000000"/>
<corners android:topRightRadius="15dp"
android:bottomRightRadius="15dp"/>
</shape>
OUTPUT

#. First, create two custom shape drawable for left and right half-circle.
left_half_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="1000dp"
android:topLeftRadius="1000dp"
android:bottomRightRadius="0dp"
android:topRightRadius="0dp" />
<solid android:color="#android:color/holo_red_light" />
</shape>
right_half_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="1000dp"
android:topRightRadius="1000dp" />
<solid android:color="#android:color/holo_green_light" />
</shape>
USE:
1. Create a horizontal LinearLayout and add two Button inside it. Use attribute layout_weight to Buttons for equal width.
2. Set left_half_circle as a background of button_left and set right_half_circle as a background of button_right.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="horizontal"
android:weightSum="2"
android:layout_gravity="center">
<Button
android:id="#+id/button_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="RED"
android:textColor="#android:color/white"
android:background="#drawable/left_half_circle" />
<Button
android:id="#+id/button_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="GREEN"
android:textColor="#android:color/white"
android:background="#drawable/right_half_circle" />
</LinearLayout>
OUTPUT:
Hope this will help~

Hi user23423534,
Applying xml shape as background to button and placing button side by side will help u solve the problem.

Please check the below code.
Layout file:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#drawable/shape"/>
<Button
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#drawable/shape1"/>
</LinearLayout>
shape drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<corners android:bottomLeftRadius="50dp"
android:topLeftRadius="50dp"/>
</shape>
shape1 drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<corners android:bottomRightRadius="50dp"
android:topRightRadius="50dp"/>
</shape>

Rounded Borders for EditText Android

I am trying to create rounded borders around two of the EditTexts in my one of my layouts. For this I have created a xml rounded_pass.xml and assigned it as a background to LinearLayout containing both the EditText fields. But I also want to have a seperator between EditViews.
rounded_pass.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip"
/>
</shape>
</item>
</selector>
LoginActivity.xml:
.......
.......
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_below="#+id/imageView"
android:background="#drawable/rounded_pass"
>
<EditText
android:layout_width="215dp"
android:layout_height="wrap_content"
android:id="#+id/editText"
/>
<EditText
android:layout_width="215dp"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="#+id/editText2"
/>
</LinearLayout>
.......
.......
The Effect I want to have is:
Desired Effect
Right Now:
Error Image

Create single xml rounded_border.xml and apply it to the root layout.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip"
/>
<stroke android:width="1dip" android:color="#1caadf" />
<!--<gradient android:angle="-90" android:startColor="#ffffff" android:endColor="#ffffff" />-->
</shape>
</item>
</selector>

You can try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_uname"
android:orientation="vertical">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent" />
<View
android:id="#+id/v1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#1caadf"></View>
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:ems="10"
android:inputType="textPassword" />
</LinearLayout>

Instead of giving borders to both Email and password, give border to its parent view. i.e RelativeLayout, LinearLayout or any layout
<LinearLayout background="#drawable/round_corner_drawable">
//your both edittexts
</LinearLayout>
Add View having height of 1dp in between both your EditText, so that line will be drawn which will look like a border only

There is minor changes in your shape xml file.
You have set same corner value for both file.
There should be corner value 5 bottomLeft & bottomRight for password filed.
here is perfect code. please run in device and check it.
rounded_uname.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dip"
android:bottomRightRadius="0dip"
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
/>
<stroke
android:width="1dip"
android:color="#1caadf" />
</shape>
rounded_pass.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip"
android:topLeftRadius="0dip"
android:topRightRadius="0dip"
/>
<stroke
android:width="1dip"
android:color="#1caadf" />
</shape>

Android : Tab like toggling button selector instead of spinner

I have an android application where in an activity i need a tab like selector where user can select an option.The 3 options are blue,green,red.User need to select any one of them.I can use a spinner for this.But i like to use a round edged tab like feature which can toggle and the selected item will show as highlighted and the others will be grayed out as below.
I just want the user to be able to toggle only one of the buttons.user can select an option by clicking or by toggling and the view should look like a bar with rounded edge.How to implement above view in android? Please help me.

Try Like This
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:azeoo="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RadioGroup
android:id="#+id/rgTask"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_border"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/rbBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/bg_blue"
android:button="#android:color/transparent"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Blue"
android:textSize="22sp" />
<View
android:id="#+id/vSep1"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#0000FF"
android:visibility="visible" />
<RadioButton
android:id="#+id/rbGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/bg_green"
android:button="#android:color/transparent"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Green"
android:textSize="22sp" />
<View
android:id="#+id/vSep2"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#0000FF"
android:visibility="visible" />
<RadioButton
android:id="#+id/rbRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/bg_red"
android:button="#android:color/transparent"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Red"
android:textSize="22sp" />
</RadioGroup>
put all below file in your drawable folder
bg_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"><shape android:shape="rectangle">
<solid android:color="#0000FF" />
<corners android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" />
</shape></item>
<item><shape android:shape="rectangle">
<solid android:color="#00000000" />
</shape></item>
</selector>
bg_green.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"><shape android:shape="rectangle">
<solid android:color="#00FF00" />
</shape></item>
<item><shape android:shape="rectangle">
<solid android:color="#00000000" />
</shape></item>
</selector>
bg_red.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"><shape android:shape="rectangle">
<solid android:color="#FF0000" />
<corners android:bottomRightRadius="10dp" android:topRightRadius="10dp" />
</shape></item>
<item><shape android:shape="rectangle">
<solid android:color="#00000000" />
</shape></item>
</selector>
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<solid android:color="#00000000" >
</solid>
<!-- view border color and width -->
<stroke
android:width="1dp"
android:color="#0000FF" >
</stroke>
<!-- If you want to add some padding -->
<!-- Here is the corner radius -->
<corners android:radius="10dp" >
</corners>
</shape>
and output like this

Background EditText and ImageView are black?

I'm creating a custom border to LinearLayout, to do it I'm using shape . The problem is when I set #drawable/custom_linear_border all EditText has background black. This problem occur with Android 2.3 because superior this problem does not occur.
How could I solve it ?
custom_linear_border
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dip"
android:color="#android:color/darker_gray" />
</shape>
LinearLayout
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/custom_linearlayout_border"
android:layout_marginTop="50dp"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:src="#drawable/icon_login"
/>
<EditText
android:id="#+id/etEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="13dp"
android:layout_gravity="center_vertical"
android:hint="Email"
android:inputType="textEmailAddress"
android:background="#00000000"
/>
</LinearLayout>

//Use this drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dip"
android:color="#android:color/darker_gray" />
</shape>