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.
Última atualização em: | 8222 Visualizações
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.
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:
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.