Hi Guys, To create rounded corners background shape with selector you need some simple steps to create xml files in drawable resource directory of android application. I will guide you in details to create EditText background as you can see in top image. 1. First you need to create edit_text_normal_bg.xml in res/drawable folder
|
1 2 3 4 5 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="@color/translucentWhite" /> <corners android:radius="50dip" /> </shape> |
- Then create another file
edit_text_focuses_bg.xml which acts when your EditText is in focused state
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="@color/translucentWhite" /> <corners android:radius="50dip" /> <stroke android:width="1dip" android:color="@color/colorAccent" /> </shape> |
3.Now its time to create a selector xml file with name
edit_text_bg_selector.xml
|
1 2 3 4 5 6 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/edit_text_focuses_bg" android:state_focused="true"/> <item android:drawable="@drawable/edit_text_normal_bg"/> </selector> |
4.Now you create or edit your activity_main xml layout file with following content
activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimary" android:orientation="vertical" android:paddingEnd="25dp" android:paddingStart="25dp" > <RelativeLayout android:layout_marginTop="50dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="20dp" android:focusable="true" android:focusableInTouchMode="true" > <EditText android:paddingLeft="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@drawable/edit_text_bg_selector" android:gravity="center_vertical" android:hint="Enter Qunatity" android:inputType="numberDecimal" android:paddingBottom="10dp" android:paddingEnd="60dp" android:paddingTop="10dp" > <requestFocus/> </EditText> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_centerVertical="true" android:layout_marginEnd="20dp" android:text="Units" android:textAppearance="?android:attr/textAppearance" android:textStyle="bold" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:focusable="true" android:focusableInTouchMode="true" > <EditText android:paddingLeft="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@drawable/edit_text_bg_selector" android:gravity="center_vertical" android:hint="Enter Price" android:inputType="numberDecimal" android:paddingBottom="10dp" android:paddingEnd="60dp" android:paddingTop="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_centerVertical="true" android:layout_marginEnd="20dp" android:text="INR" android:textAppearance="?android:attr/textAppearance" android:textStyle="bold" /> </RelativeLayout><em> </LinearLayout> |
Note : I have used some colors in drawables, These are followings.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#42a5f5</color> <color name="colorPrimaryDark">#1e88e5</color> <color name="colorAccent">#FF4081</color> <color name="appWhite">#FFffffff</color> <color name="semiTranslucent">#da000000</color> <color name="translucentWhite">#82ffffff</color> <color name="darkGrey">#424242</color> <color name="darkerGrey">#212121</color> <color name="mediumGrey">#9E9E9E</color> <color name="lightGrey">#E0E0E0</color> <color name="lighterGrey">#EEEEEE</color> </resources> |
|
1 2 |
Thanks For Reading |
