round edge on Edittext Android

Question

I am developing a mobile application using Android studio 2.2.2, and I wanted to leave my application with this look.

But I’m not able to put the edge and line on top of editText

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.tulio.exercicio2.MainActivity">



<EditText
    android:id="@+id/editView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left"
    android:hint="De"
    android:textColor="#5e605f"
     />
<EditText
    android:id="@+id/editView2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Para"
    android:gravity="left"
    android:textColor="#5e605f"
    />

<EditText
    android:id="@+id/editView3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Assunto"
    android:gravity="left"
    android:textColor="#5e605f"
     />

<EditText
    android:id="@+id/editView4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Mensagem"
    android:gravity="left"
    android:textColor="#5e605f"
    tools:layout_editor_absoluteY="0dp"
    tools:layout_editor_absoluteX="8dp" />

   </LinearLayout>

Answer 1

You can use xml-drawables to get this result, but there is also another alternative if you want to, for example, apply shadows to your view instead of leaving it with a more stoned look.

XML Drawables

You can learn a little more about these files in the section drawing resources of the Android documentation.

In this case, you would use the tag selector to create a shape. Inside this Shape, you will use the tags solid to create a background solid, corners to round up the drawable, if you like, and stroke to add the edge.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#fff"/> <!-- cor do sólido -->
            <corners android:radius="12dp"/> <!-- valor do arredondamento das bordas -->
            <stroke android:color="#eee" android:width="2dp"/> <!-- cor da borda e tamanho dela -->
            <padding android:bottom="8dp" android:left="8dp" android:right="8dp" android:top="8dp"/>
        </shape>
    </item>
</selector>

Okay, you created your background and now you can use it as the background of your View. In the code above, you may be weirding out the tag padding, but it’s basically to prevent the background from getting too glued to the EditText.

<EditText
    ...
    android:background="@drawable/my_bg"/>

Answer 2

At first, there are 3 options to do this:

1. Create a background customized and set in XML EditText;
2. Create a background customized and programmatically set in EditText;
3. Create a background programmatically and programmatically define the EditText;

Initially you need to know these 3 properties below:

• <solid>: Sets a solid color for the background
• <corners>: sets the corner settings, in which can be set in radii.
• <stroke>: sets the settings of the edges that below has been set a gray color @android:color/darker_gray and the width of 1dp;

So just create a file the inside res/drawable/ as for example border_rounded.xml. Behold:

Option 1:

Define in the XML of EditText:

<EditText
    android:id="@+id/et"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/border_rounded"
    android:layout_margin="4dp"
    android:padding="8dp"
    />

Option 2:

Programmatically define in EditText:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
    et.setBackground(ContextCompat.getDrawable(this, R.drawable.border_rounded));
} else {
    et.setBackgroundDrawable( ContextCompat.getDrawable(this, R.drawable.border_rounded) );
}

Option 3:

Create a background programmatically and programmatically define it in EditText.

First it is necessary to create a GradientDrawable with the primordial properties for defining the round edges of the EditText. Behold:

public GradientDrawable setBorderRounded(){
    GradientDrawable shape =  new GradientDrawable();
    shape.setColor(Color.WHITE);
    shape.setCornerRadius(10);
    shape.setStroke(2, Color.GRAY);
    return shape;
}

Soon after, just define how background of EditText. Behold:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
    et.setBackground(setBorderRounded());
else
    et.setBackgroundDrawable(setBorderRounded());

See more details in the documentation on drawing resources.