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.