Como criar o EditText com cantos arredondados?


Respostas:


566

Existe uma maneira mais fácil do que a escrita pelo CommonsWare. Basta criar um recurso desenhável que especifique a maneira como o EditTextdesenho será desenhado:

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

Em seguida, basta referenciar este drawable em seu layout:

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

Você receberá algo como:

texto alternativo

Editar

Com base no comentário de Mark, quero adicionar a maneira como você pode criar estados diferentes para o seu 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>

Estes são os 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>

E ... agora, a EditTextaparência deve ser:

<?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
Exceto que sua solução usa o mesmo desenho para todos os estados. Um regular EditTexttem planos de fundo diferentes para focado, desativado, pressionado e selecionado, além do padrão. O foco, em particular, pode ser importante no futuro, se conseguirmos alguns dispositivos Android que não possuem telas sensíveis ao toque, como o Google TV.
— CommonsWare

Isso é ótimo! Funciona bem no dispositivo, mas impede que a exibição 'Layout gráfico' exiba minha atividade quando incluo a caixa de edição arredondada. O log de erros fornece uma 'UnsupportedOperationException: null'. Alguma ideia?
— Ben Clayton

É bom saber ... na verdade, não sei como consertar. Eu acho que é um bug do ADT do Eclipse.
— Cristian

excelente resposta. Quando tento fazer isso com o ADT mais recente, nada acontece, mas a tela de design da interface do usuário fica meio sombreada. Mas excelente resposta. Salvou-me de meu chefe :)
— Jay Mayu

2
se o seu raio é igual para todos os 4 cantos usar android:radiusem vez de definir 4 linhas
— Viswanath Lekshmanan

129

Aqui está a mesma solução (com algum código de bônus extra) em apenas um arquivo 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>

Depois, basta definir o atributo background para o arquivo edittext_rounded_corners.xml:

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

receber erro como "0.5dp" no atributo "width" não é um formato válido.
— Mavenツ

Tentei usar a solução acima, mas infelizmente, enquanto apenas definia topRightRadiuse topLeftRadiusos quatro cantos acabavam arredondados. Por favor ajude. :(
— ikartik90

30

Tente este,

1.Crie o arquivo rounded_edittext.xml no seu 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 o plano de fundo para o seu EditText no arquivo 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.Você obterá uma saída como esta

insira a descrição da imagem aqui


1
Sachin sua imagem de saída mostra cantos quadrados não arredondados, conforme solicitado pelo questionador. Essa pode ser uma boa maneira de fazer com que a caixa tenha um esboço.
— JesseBoyd

2
@JesseBoyd, Sua preocupação está certa, mas rounded_edittext neste arquivo xml apenas altera os valores de todos os Radius conforme sua exigência.
— sachin pangare

17

Obrigado pela resposta de Norfeldt. Fiz uma pequena alteração no gradiente para obter um melhor efeito de sombra interna.

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

Parece ótimo em um layout de plano de fundo claro ..

insira a descrição da imagem aqui


7

Na minha opinião, ele já tem cantos arredondados.

Caso você os queira mais arredondados, precisará:

  1. Clone todas as imagens PNG de nove correções que compõem um EditTextplano de fundo (encontradas no seu SDK)
  2. Modifique cada um para ter mais cantos arredondados
  3. Clone o StateListDrawablerecurso XML que combina esses EditTextplanos de fundo em um único Drawablee modifique-o para apontar para seus arquivos PNG de nove patches mais arredondados
  4. Use esse novo StateListDrawablecomo pano de fundo para o seu EditTextwidget

3

Se você deseja que apenas o canto não faça uma curva completa, use o código abaixo.

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

Apenas curva os quatro ângulos de EditText.


2

Apenas para acrescentar às outras respostas, descobri que a solução mais simples para obter os cantos arredondados era definir o seguinte como pano de fundo para o seu Texto de edição.

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

Com a Biblioteca de componentes de material, você pode usar o MaterialShapeDrawablepara desenhar formas personalizadas .

Com um EditTextvocê pode fazer:

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

Em seguida, crie um 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);

insira a descrição da imagem aqui

Requer a versão 1.1.0 da biblioteca.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.