¿Cómo crear EditText con esquinas redondeadas?


Respuestas:


566

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

<?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, solo 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ás algo como:

texto alternativo

Editar

Según 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, EditTextdebería verse así:

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

15
Excepto que su solución usa el mismo dibujable para todos los estados. Un regular EditTexttiene diferentes fondos para enfocado, deshabilitado, presionado y seleccionado, además del predeterminado. Enfocado, en particular, puede ser importante en el futuro si tenemos algunos dispositivos Android que carecen de pantallas táctiles, como Google TV.
CommonsWare

¡Esto es genial! Funciona bien en el dispositivo, pero evita que la vista 'Diseño gráfico' muestre mi actividad cuando incluyo el cuadro de edición redondeado. El registro de errores me da una 'UnsupportedOperationException: null'. ¿Algunas ideas?
Ben Clayton

Es bueno saber ... en realidad no sé cómo solucionarlo. Supongo que es un error ADT de Eclipse.
Cristian

Excelente respuesta. Cuando trato de hacerlo con el último ADT, no sucede nada, pero la pantalla de diseño de la interfaz de usuario se vuelve algo sombreada ... aunque un poco molesta. Pero excelente respuesta. Me salvó de mi jefe :)
Jay Mayu

2
si su radio es el mismo para las 4 esquinas, use en android:radiuslugar de definir 4 líneas
Viswanath Lekshmanan

129

Aquí está la misma solución (con algún código de bonificación 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 configura el atributo de fondo para editar el archivo Texttext_itated_corners.xml:

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

obtener un error como "0.5dp" en el atributo "ancho" no es un formato válido.
Maveň ツ

Intenté usar la solución anterior, pero desafortunadamente, mientras acabo de configurar topRightRadiusy topLeftRadiuslas cuatro esquinas terminan redondeadas. Por favor ayuda. :(
ikartik90

30

Prueba este,

1.Cree el archivo rounded_edittext.xml en su 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. Aplicar 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. Obtendrá una salida como esta

ingrese la descripción de la imagen aquí


1
Sachin su imagen de salida muestra esquinas cuadradas no redondeadas como lo solicitó el interlocutor. Esta podría ser una buena manera de hacer que el cuadro tenga un esquema.
JesseBoyd

2
@JesseBoyd, su inquietud es correcta pero el texto_editado redondeado en este archivo xml solo cambia los valores de todos los radios según sus requisitos.
sachin pangare

17

Gracias por la respuesta de Norfeldt. He realizado 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.

ingrese la descripción de la imagen aquí


7

Desde mi punto de vista, ya tiene esquinas redondeadas.

En caso de que desee que sean más redondeados, deberá:

  1. Clone todas las imágenes PNG de nueve parches que forman un EditTextfondo (que se encuentra en su SDK)
  2. Modifique cada uno para tener más esquinas redondeadas
  3. Clone el StateListDrawablerecurso XML que combina esos EditTextfondos en un solo Drawabley modifíquelo para que apunte a sus archivos PNG más completos de nueve parches
  4. Use ese nuevo StateListDrawablecomo fondo para su EditTextwidget

3

Si solo desea que la esquina no se curve todo el extremo, 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 curvará los cuatro ángulos de EditText.


2

Solo para agregar a las otras respuestas, descubrí que la solución más simple para lograr las esquinas redondeadas era establecer lo siguiente como fondo para su Edittext.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@android:color/white"/>
    <corners android:radius="8dp"/>

</shape>

2

Con la Biblioteca de componentes de material puede usar MaterialShapeDrawablepara dibujar formas personalizadas .

Con un EditTextpuedes hacer:

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

Luego crea un 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);

ingrese la descripción de la imagen aquí

Requiere la versión 1.1.0 de la biblioteca.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.