Aplicar estilo personalizado a todos os EditText da minha App Android

O desenvolvimento para a plataforma Android é flexível, isso permite que sejam realizadas variações na parte de front-end de aplicativos, para adaptar o layout das telas ao tema do seu app.

Wolmir Cezer Garbin por Wolmir Cezer Garbin - - Android - TUTORIAL

Última atualização em: | 8010 Visualizações

Aplicar estilo personalizado a todos os EditText da minha App Android

Neste artigo vou mostrar uma forma de customizar o layout de todos os elementos EditText de maneira geral.

Preparando o projeto

O primeiro passo é configurar o projeto. Abaixo segue uma imagem que mostra 3 arquivos que serão utilizados: edittext_states.xml, activity_main.xml e style.xml.

projeto

Arquivo edittext_states.xml

Arquivo responsável por aplicar os estados aos elementos EditText através da apicação do estilo. Adicione este arquivo na pasta drawable do projeto para usarmos no arquivo de estilo.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- disabled -->
   <item android:state_enabled="false">
       <shape android:shape="rectangle">
         <stroke android:width="1dp" android:color="#CCC" />
         <corners android:radius="3dp" />
         <solid android:color="#E0E0E0" />
         <padding android:left="12dp" android:top="12dp" android:right="12dp" android:bottom="12dp"/>
     </shape>
   </item>
   <!-- pressed -->
   <item android:state_pressed="true" android:state_enabled="true">
      <shape android:shape="rectangle">
         <stroke android:width="1dp" android:color="#CCC" />
         <corners android:radius="3dp" />
         <solid android:color="#FEFEFE" />
         <padding android:left="12dp" android:top="12dp" android:right="12dp" android:bottom="12dp"/>
     </shape>
   </item>
   <!-- focused -->
   <item android:state_focused="true" android:state_enabled="true">
       <shape android:shape="rectangle">
         <stroke android:width="1dp" android:color="#009933" />
         <corners android:radius="3dp" />
         <solid android:color="#FEFEFE" />
         <padding android:left="12dp" android:top="12dp" android:right="12dp" android:bottom="12dp"/>
     </shape>
   </item>
   <!-- enabled -->
   <item android:state_enabled="true">
       <shape android:shape="rectangle">
         <stroke android:width="1dp" android:color="#CCC" />
         <corners android:radius="3dp" />
         <solid android:color="#FEFEFE" />
         <padding android:left="12dp" android:top="12dp" android:right="12dp" android:bottom="12dp"/>
     </shape>
   </item>
</selector>

Este arquivo pode ser customizado da maneira que preferir.

Arquivo activity_main.xml

Arquivo que será utilizado pela ActivityMain para montar a parte visual e podermos testar nossa implementação. Caso tenha elementos EditText em seu projeto não precisa criar o arquivo, basta ver o resultado após aplicarmos o estilo.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="@dimen/activity_horizontal_margin" android:orientation="vertical">
 
   <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="EditText 01"/>
 
   <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="EditText 02"/>
</LinearLayout>

Arquivo style.xml

No seu arquivo de estilo, no tema principal do seu app, adicione um estilo default para todos os seus EditText. É aqui que o Android vai obter o estilo do elemento, dessa forma basta estender o estilo padrão do elemento EditText e adicionar as personalizações desejadas ao elemento, e o Android se encarrega de repassar estas customizações para todos os elementos do seu projeto.

<resources>
   <!-- Base application theme. -->
   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       <item name="android:editTextStyle">@style/EditTextStyle</item>
   </style>
   <style name="EditTextStyle" parent="Widget.AppCompat.EditText">
       <item name="android:textSize">16sp</item>
       <item name="android:background">@drawable/edittext_states</item>
       <item name="android:textColor">#333333</item>
       <item name="android:layout_marginRight">2dp</item>
       <item name="android:layout_marginLeft">2dp</item>
       <item name="android:layout_marginTop">2dp</item>
   </style>
</resources>

O Resultado

Todos os EditText da sua aplicação terão os estilos configurados, veja a imagem:

tela

Isso pode auxiliar o desenvolvedor em futuras manutenções, tendo em vista que alterando os estilos no arquivo style.xml, todos os EditText terão os estilos que foram configurados.


Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.


Publique seu post no Receitas de Código

Aguarde, estamos trabalhando para que você possa publicar sua postagem no Receitas de Código!