ti-enxame.com

Como criar EditText com cantos arredondados?

Existe alguma maneira de criar EditText que tenha cantos arredondados?

253
pixel

Existe uma maneira mais fácil do que aquela escrita pelo CommonsWare. Basta criar um recurso drawable que especifique a maneira como o EditText 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>

Então, apenas faça referência a este drawable no 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ê terá algo como:

alt text

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, o EditText deve ser parecido com:

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

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>

Você apenas configura o atributo background para o arquivo edittext_rounded_corners.xml:

<EditText  Android:id="@+id/editText_name"
      Android:background="@drawable/edittext_rounded_corners"/>
124
Norfeldt

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.Aplicar plano de fundo para o 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ê vai ter saída como este

enter image description here

27
sachin pangare

Obrigado pela resposta de Norfeldt. Eu fiz uma pequena alteração em seu gradiente para 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 luz de fundo ..

enter image description here

15
Sayka

Pelo meu modo de pensar, já tem cantos arredondados.

Caso você queira que eles sejam mais arredondados, você precisará:

  1. Clone todas as imagens PNG de nove patches que compõem um plano de fundo EditText (encontrado em seu SDK)
  2. Modifique cada um para ter cantos mais arredondados
  3. Clone o recurso XML StateListDrawable que combina os backgrounds EditText em um único Drawable e modifique-o para apontar para seus arquivos PNG de nove remendos mais arredondados
  4. Use esse novo StateListDrawable como plano de fundo para o seu widget EditText
7
CommonsWare

Se você quiser apenas o canto não deve curvar todo final, então 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>

Ele irá apenas curvar o ângulo de quatro de EditText.

3
Kirtikumar A.

Apenas para adicionar às outras respostas, descobri que a solução mais simples para alcançar os cantos arredondados era definir o seguinte como plano de fundo para o seu 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>
1
A Droid