Develop Reference

How to create android button background svg with elevation?

I have been trying to achieve button like in attached image & for that I have created gradient SVG with shadow so that it looks like elevation but when this svg applied to button as background drawable it looks flat & ripple effect is also gone.
I want to achieve same button as below image :
And here is my code :
<Button
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:enabled="false"
android:elevation="10dp"
android:translationZ="10dp"
android:stateListAnimator="#null"
android:background="#drawable/bg_gradient"
android:text="#string/btn_txt_login"
android:textColor="#android:color/white"
android:textSize="18sp" />
I'm using SVG file for creating background gradient with rounded border. Any help would be appreciated.

I have a solution for you.
Add this into your build.gradle(Module:app) dependency:
implementation 'com.android.support:cardview-v7:27.1.1'
Now use CardView layout instead of Button:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:gravity="center_vertical|center_horizontal"
android:textSize="18sp"
android:text="LOGIN"
android:textColor="#android:color/white"
android:textStyle="bold"
android:background="#drawable/gradient"/>
</android.support.v7.widget.CardView>
Create gradient.xml file into drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#8b0ab7"
android:endColor="#0b85d0"
android:angle="0"/>
<corners android:radius="10dp"/>
</shape>

Add these attributes, if still it doesn't work use cardview
android:clipChildren="false"
android:clipToPadding="false"
and here is your code
<Button android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:enabled="false"
android:elevation="10dp"
android:translationZ="10dp"
android:stateListAnimator="#null"
android:clipChildren="false"
android:clipToPadding="false"
android:background="#drawable/bg_gradient"
android:text="#string/btn_txt_login"
android:textColor="#android:color/white"
android:textSize="18sp" />

Please try with using the following drawable content.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorDefaultButtonRipple">
<item>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray" />
<corners android:radius="15dp" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="0" android:endColor="#5789bc" android:startColor="#8e6fa6" />
<corners android:radius="15dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</ripple>

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>

Android white background EditText that act as button

I'm trying to Style an EditText to look like the one in the above picture.
I tried setting a background but the result was not at all as excpected
Could you someone point me to the right direction?

use this xml as background fro your edittext:
<?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="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
and put some padding in your edittext.

You can use android CardView Library and set EditText background to null
Below is the sample code for it
Add the library in gradle for cardview
compile 'com.android.support:cardview-v7:21.0.+'
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:padding="10dp"
android:elevation="10dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:orientation="vertical">
<!-- Card Contents go here -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<EditText
android:id="#+id/edt_first_name"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:editable="true"
android:ellipsize="end"
android:text="Text"
android:inputType="text"
android:singleLine="true" />
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/ic_menu"
android:layout_height="wrap_content"
></ImageView>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

Android: Round Image inside ring shape

I want to create a button with image inside it as shown at the bottom of this pic https://trianglewiki.org/RGreenway_App/_files/android.jpg/_info/. I am trying using layer-list and shape drawables and able to create buttons very similar. My problem is that my image is not scaling inside the button as I would like. The ring shape is coming on the top of the image but image is not inside it.
I want the image to be completely inside the ring. I think there is something wrong with the parameters values I am giving. But it could be I am not doing it the proper way.
Can somebody check my xml files and see what is the problem or provide me with any information how to do it so that I get the same effect in the button as in the link above. Thanks
custom_button.xml (in res/drawable)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/map"/>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:innerRadiusRatio="1.75"
android:shape="ring"
android:thicknessRatio="25"
android:useLevel="false"
>
<gradient
android:angle="90"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<size
android:width="50dp"
android:height="40dp" />
<solid android:color="#008000" />
</shape>
</item>
</layer-list>
custom_layout (in res/drawable for linearlayout's background)
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#FF000000"
android:endColor="#FFFFFFFF"
android:type= "linear" />
<stroke
android:width="1dp"
android:color="#FF000000" />
<padding
android:left="5dp"
android:right="5dp"
/>
<size
android:height="50dp"
/>
<solid
android:color="#00FF00"
/>
</shape>
header.xml (in res/layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/custom_layout"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:contentDescription="Button"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:background="#drawable/custom_button"
android:scaleType="fitXY"
android:color="#ff0000"
/>
<ImageButton
android:id="#+id/map"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Map"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/weather"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Weather"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/citilink"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="CitiLink"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
</LinearLayout>

You are overcomplicating this is if I understand your question. Look to here for an answer. It's the trick I have used in the past.