How To Apply ShapeAppreanace In EditText And TextView Using Material Design In Android

I want to design a TextView and EditText with round corner. There is one straight forward solution for this. Using custom shape background. But since material design 1.1.0 introdu

Solution 1:

You can apply the MaterialShapeDrawable introduced by the Material Components Library also to a TextView or EditText.
In this case you can't use the shapeAppearanceOverlay attribute in your layout or style because these components don't have a MaterialShapeDrawable defined by default as the MaterialButton, MaterialCardView.
But you apply the same ShapeAppearence programmatically.

For example:

<TextView
    android:id="@+id/textview"
    android:backgroundTint="@color/secondaryColor"
    ../>

Programmatically you can use something like:

float radius = getResources().getDimension(R.dimen.default_corner_radius);
TextView textView = findViewById(R.id.textview);

Define the ShapeAppearanceModel with rounded corners:

ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
        .toBuilder()
        .setAllCorners(CornerFamily.ROUNDED,radius)
        .build();

Create a MaterialShapeDrawable with this ShapeAppearanceModel:

MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);

Apply this background to your view:

ViewCompat.setBackground(textView,shapeDrawable);

You can achieve the same behavior with an EditText (but you can also use a TextInputLayout in this case):

Define in your layout:

    <EditText
        android:id="@+id/edittext"
        android:paddingLeft="4dp"
        android:drawableLeft="@drawable/ic_add_24px"
        android:drawableTint="@color/..."
        android:hint="@string/...."
        ..>

Then apply the MaterialShapeDrawable:

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);
//Fill the background color
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color....));
//You can also apply a stroke
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color....));

//Apply the shapeDrawable to the background.
ViewCompat.setBackground(editText,shapeDrawable);

If you would like to use ShapeAppareace defined in the styles you can use the different ShapeAppearanceModel constructors. For example:

ShapeAppearanceModel shapeAppearanceModel =
            ShapeAppearanceModel.builder( this,
                    R.style.ShapeAppearance_MaterialComponents_MediumComponent,
                    R.style.ShapeOverlay).build();

with:

<style name="ShapeOverlay">
    <item name="cornerSize">16dp</item>
</style>

Solution 2:

Create a drawable resource file with rounded_edittext.xml

    <?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

Then in your editText call the created drawable as andriod:background

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:padding="5dip"
    android:background="@drawable/rounded_edittext" />
</LinearLayout>

I think you are good to go.