round border on EditText Android

Question

round border on EditText Android

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

I'm developing a mobile application using Android studio 2.2.2, and wanted to leave my application with that look.

ButI'mnotabletoputtheborderandthelineabovetheeditText

<?xmlversion="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>

android android-layout

asked by anonymous 19.08.2017 / 05:11

2 answers

2

At first there are 3 options to do this:

Create a customized background and define in the XML of EditText ;

Create a customized background and set programmatically in EditText ;

Create a background programmatically and set programmatically in EditText ;

Initially you need to know these 3 properties below:

<solid> : Sets a solid color to background
<corners> : defines the settings of the corners, in which it can be defined in rays.
<stroke> : defines the settings of the borders that defined below a gray color @android:color/darker_gray and the width of 1dp ;

Then just create an archive in res/drawable/ as for example border_rounded.xml . See:

Option 1:

Set in 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 set to 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 set it programmatically in EditText .

First you need to create a GradientDrawable with the primordial properties to define the round edges of EditText . See:

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

Soon after, just set background to EditText . See:

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

See the features documentation for more details.

19.08.2017 / 06:20

Show input value when clicking the [duplicate] Share LocalStorage with browsers

score 3 · Accepted Answer

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 looking more flat.

XML Drawables

You can learn a little more about these files in the Drawable Features of the Android documentation.

In this case, you would use the selector tag to create a shape . Within this shape, you will use the solid tags to create a solid background, corners to round the drawable if you want, and stroke to add the border.

<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>

Now you've created your background and now you can use it as the background of your View. In the code above, you may be missing out on the padding tag, but it's basically to prevent the background from getting too stuck with EditText .

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