with textedit studio rectangle edittext color bordes borders android android-edittext views rounded-corners

android - textedit - ¿Cómo crear EditText con esquinas redondeadas?



edittext rectangle border android (6)

¿Hay alguna forma de crear EditText que tenga esquinas redondeadas?


Aquí está la misma solución (con un código extra adicional) en un solo archivo XML:

<?xml version="1.0" encoding="utf-8"?> <!-- res/drawable/edittext_rounded_corners.xml --> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:state_focused="true"> <shape> <solid android:color="#FF8000"/> <stroke android:width="2.3dp" android:color="#FF8000" /> <corners android:radius="15dp" /> </shape> </item> <item android:state_pressed="true" android:state_focused="false"> <shape> <solid android:color="#FF8000"/> <stroke android:width="2.3dp" android:color="#FF8000" /> <corners android:radius="15dp" /> </shape> </item> <item android:state_pressed="false" android:state_focused="true"> <shape> <solid android:color="#FFFFFF"/> <stroke android:width="2.3dp" android:color="#FF8000" /> <corners android:radius="15dp" /> </shape> </item> <item android:state_pressed="false" android:state_focused="false"> <shape> <gradient android:startColor="#F2F2F2" android:centerColor="#FFFFFF" android:endColor="#FFFFFF" android:angle="270" /> <stroke android:width="0.7dp" android:color="#BDBDBD" /> <corners android:radius="15dp" /> </shape> </item> <item android:state_enabled="true"> <shape> <padding android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp" /> </shape> </item> </selector>

Luego simplemente establece el atributo de fondo en el archivo edittext_rounded_corners.xml:

<EditText android:id="@+id/editText_name" android:background="@drawable/edittext_rounded_corners"/>


Gracias por la respuesta de Norfeldt. He hecho un ligero cambio en su gradiente para un mejor efecto de sombra interior.

<item android:state_pressed="false" android:state_focused="false"> <shape> <gradient android:centerY="0.2" android:startColor="#D3D3D3" android:centerColor="#65FFFFFF" android:endColor="#00FFFFFF" android:angle="270" /> <stroke android:width="0.7dp" android:color="#BDBDBD" /> <corners android:radius="15dp" /> </shape> </item>

Se ve muy bien en un diseño de fondo claro ...


Hay una manera más fácil que la escrita por CommonsWare. Simplemente cree un recurso EditText que especifique la forma en que se EditText el EditText :

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

Luego, simplemente haga referencia a este dibujo en su diseño:

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

Obtendrá algo como:

Editar

Basado en el comentario de Mark, quiero agregar la forma en que puede crear diferentes estados para su EditText :

<?xml version="1.0" encoding="utf-8"?> <!-- res/drawable/rounded_edittext_states.xml --> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:state_enabled="true" android:drawable="@drawable/rounded_focused" /> <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/rounded_focused" /> <item android:state_enabled="true" android:drawable="@drawable/rounded_edittext" /> </selector>

Estos son los estados:

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

Y ... ahora, el EditText debería verse como:

<?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:text="@string/hello" android:background="@drawable/rounded_edittext_states" android:padding="5dip"/> </LinearLayout>


Por mi forma de pensar, ya tiene esquinas redondeadas.

En caso de que desee redondearlos, deberá:

  1. Clona todas las imágenes PNG de nueve parches que conforman un fondo EditText (que se encuentra en tu SDK)
  2. Modifica cada uno para tener más esquinas redondeadas.
  3. Clone el recurso XML StateListDrawable que combina esos fondos EditText en un solo Drawable , y Drawable para que apunte a sus archivos PNG de nueve parches más redondos
  4. Utilice ese nuevo StateListDrawable como fondo para su widget EditText

Prueba este

1.Crear el archivo rounded_edittext.xml en tu Drawable

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="15dp"> <solid android:color="#FFFFFF"/> <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" android:topLeftRadius="0dp" android:topRightRadius="0dp"/> <stroke android:width="1dip" android:color="#f06060" /> </shape>

2.Aplique el fondo para su EditText en el archivo xml

<EditText android:id="@+id/edit_expiry_date" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dip" android:background="@drawable/rounded_edittext" android:hint="@string/shop_name" android:inputType="text"/>

3.Usted obtendrá una salida como esta


Si solo desea que la esquina no tenga una curva completa, use el siguiente código.

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="10dp" /> <padding android:bottom="3dp" android:left="0dp" android:right="0dp" android:top="3dp" /> <gradient android:angle="90" android:endColor="@color/White" android:startColor="@color/White" /> <stroke android:width="1dp" android:color="@color/Gray" /> </shape>

Solo EditText los cuatro ángulos de EditText .