Aplicar estilo personalizado a todos os EditText da minha App Android

Postado em por Wolmir Cezer Garbin em Android | 170 Visualizações
Última atualização em:

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.

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.

Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

Posts relacionados


Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar