How to create EditText with rounded corners

Question

Is there any way to create EditText that has rounded corners

User · Answer

With the Material Components Library you can use the MaterialShapeDrawable to draw custom shapes.

With a EditText you can do:

    <EditText
        android:id="@+id/edittext"
        ../>

Then create a MaterialShapeDrawable:

float radius = getResources().getDimension(R.dimen.default_corner_radius);

EditText editText = findViewById(R.id.edittext);
//Apply the rounded corners 
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
                .toBuilder()
                .setAllCorners(CornerFamily.ROUNDED,radius)
                .build();

MaterialShapeDrawable shapeDrawable = 
            new MaterialShapeDrawable(shapeAppearanceModel);
//Apply a background color
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.white));
//Apply a stroke
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color.colorAccent));

ViewCompat.setBackground(editText,shapeDrawable);

It requires the version 1.1.0 of the library.

User · Answer

Here is the same solution  with some extra bonus code  in just one XML file    lt  xml version  1 0  encoding  utf-8   gt   lt  --  res drawable edittext rounded corners xml -- gt   lt selector xmlns android  http   schemas android com apk res android  gt    lt item android state pressed  true  android state focused  true  gt       lt shape gt           lt solid android color   FF8000   gt           lt stroke             android width  2 3dp              android color   FF8000    gt            lt corners             android radius  15dp    gt       lt  shape gt   lt  item gt    lt item android state pressed  true  android state focused  false  gt       lt shape gt           lt solid android color   FF8000   gt           lt stroke             android width  2 3dp              android color   FF8000    gt                 lt corners             android radius  15dp    gt              lt  shape gt   lt  item gt    lt item android state pressed  false  android state focused  true  gt       lt shape gt           lt solid android color   FFFFFF   gt           lt stroke             android width  2 3dp              android color   FF8000    gt             lt corners             android radius  15dp    gt                                 lt  shape gt   lt  item gt    lt item android state pressed  false  android state focused  false  gt       lt shape gt           lt gradient              android startColor   F2F2F2              android centerColor   FFFFFF              android endColor   FFFFFF              android angle  270            gt           lt stroke             android width  0 7dp                              android color   BDBDBD    gt            lt corners             android radius  15dp    gt                   lt  shape gt   lt  item gt    lt item android state enabled  true  gt       lt shape gt           lt padding                  android left  4dp                  android top  4dp                  android right  4dp                  android bottom  4dp                gt       lt  shape gt   lt  item gt    lt  selector gt    You then just set the background attribute to edittext rounded corners xml file    lt EditText  android id    id editText name        android background   drawable edittext rounded corners   gt

User · Answer

There is an easier way than the one written by CommonsWare  Just create a drawable resource that specifies the way the EditText will be drawn   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt  --  res drawable rounded edittext xml -- gt   lt shape xmlns android  quot http   schemas android com apk res android quot      android shape  quot rectangle quot       android padding  quot 10dp quot  gt        lt solid android color  quot  FFFFFF quot    gt       lt corners         android bottomRightRadius  quot 15dp quot          android bottomLeftRadius  quot 15dp quot          android topLeftRadius  quot 15dp quot          android topRightRadius  quot 15dp quot    gt   lt  shape gt   Then  just reference this drawable in your layout   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt LinearLayout xmlns android  quot http   schemas android com apk res android quot      android orientation  quot vertical quot      android layout width  quot fill parent quot      android layout height  quot fill parent quot  gt        lt EditText           android layout width  quot fill parent quot           android layout height  quot wrap content quot           android padding  quot 5dip quot          android background  quot  drawable rounded edittext quot    gt   lt  LinearLayout gt   You will get something like   Edit Based on Mark s comment  I want to add the way you can create different states for your EditText   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt  -- res drawable rounded edittext states xml -- gt   lt selector xmlns android  quot http   schemas android com apk res android quot  gt       lt item          android state pressed  quot true quot           android state enabled  quot true quot          android drawable  quot  drawable rounded focused quot    gt       lt item          android state focused  quot true quot           android state enabled  quot true quot          android drawable  quot  drawable rounded focused quot    gt       lt item          android state enabled  quot true quot          android drawable  quot  drawable rounded edittext quot    gt   lt  selector gt   These are the states   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt  -- res drawable rounded edittext focused xml -- gt   lt shape xmlns android  quot http   schemas android com apk res android quot      android shape  quot rectangle quot  android padding  quot 10dp quot  gt        lt solid android color  quot  FFFFFF quot   gt       lt stroke android width  quot 2dp quot  android color  quot  FF0000 quot    gt       lt corners         android bottomRightRadius  quot 15dp quot          android bottomLeftRadius  quot 15dp quot          android topLeftRadius  quot 15dp quot          android topRightRadius  quot 15dp quot    gt   lt  shape gt   And    now  the EditText should look like   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt LinearLayout xmlns android  quot http   schemas android com apk res android quot      android orientation  quot vertical quot      android layout width  quot fill parent quot      android layout height  quot fill parent quot  gt        lt EditText           android layout width  quot fill parent quot           android layout height  quot wrap content quot           android text  quot  string hello quot          android background  quot  drawable rounded edittext states quot          android padding  quot 5dip quot    gt   lt  LinearLayout gt

User · Answer

Thanks for Norfeldt s answer  I slightly changed its gradient for a better inner shadow effect   lt item android state pressed  quot false quot  android state focused  quot false quot  gt       lt shape gt           lt gradient             android centerY  quot 0 2 quot              android startColor  quot  D3D3D3 quot              android centerColor  quot  65FFFFFF quot              android endColor  quot  00FFFFFF quot              android angle  quot 270 quot                gt           lt stroke             android width  quot 0 7dp quot              android color  quot  BDBDBD quot    gt           lt corners             android radius  quot 15dp quot    gt       lt  shape gt   lt  item gt   Looks great in a light backgrounded layout

User · Answer

Just to add to the other answers  I found that the simplest solution to achieve the rounded corners was to set the following as a background to your Edittext    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt        lt solid android color   android color white   gt       lt corners android radius  8dp   gt    lt  shape gt

User · Answer

By my way of thinking  it already has rounded corners   In case you want them more rounded  you will need to    Clone all of the nine-patch PNG images that make up an EditText background  found in your SDK  Modify each to have more rounded corners Clone the XML StateListDrawable resource that combines those EditText backgrounds into a single Drawable  and modify it to point to your more-rounded nine-patch PNG files Use that new StateListDrawable as the background for your EditText widget

User · Answer

If you want only corner should curve not whole end  then use below code    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android   gt        lt corners android radius  10dp    gt        lt padding         android bottom  3dp          android left  0dp          android right  0dp          android top  3dp    gt        lt gradient         android angle  90          android endColor   color White          android startColor   color White    gt        lt stroke         android width  1dp          android color   color Gray    gt    lt  shape gt    It will only curve the four angle of EditText

User · Answer

Try this one   Create rounded edittext xml file in your Drawable  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt shape xmlns android  quot http   schemas android com apk res android quot      android shape  quot rectangle quot  android padding  quot 15dp quot  gt        lt solid android color  quot  FFFFFF quot    gt       lt corners         android bottomRightRadius  quot 0dp quot          android bottomLeftRadius  quot 0dp quot          android topLeftRadius  quot 0dp quot          android topRightRadius  quot 0dp quot    gt       lt stroke android width  quot 1dip quot  android color  quot  f06060 quot    gt   lt  shape gt    Apply background for your EditText in xml file  lt EditText     android id  quot   id edit expiry date quot      android layout width  quot match parent quot      android layout height  quot wrap content quot      android padding  quot 10dip quot      android background  quot  drawable rounded edittext quot      android hint  quot  string shop name quot      android inputType  quot text quot    gt      You will get output like this

[android] How to create EditText with rounded corners?

Examples related to android

Examples related to android-edittext

Examples related to views

Examples related to rounded-corners