O EditText é um dos elementos importantes da IU que leva os dados como entrada do usuário. O EditText usual no Android, que parece decente o suficiente, tem apenas o texto de dica e a linha que faz o usuário clicar nessa linha e inserir os dados. Consulte o artigo widget EditText no Android usando Java com exemplos , que explica os fundamentos sobre o AppCompat EditText normal. Neste artigo, foi discutido como personalizar o AppCompat EditText. Dê uma olhada na imagem a seguir para diferenciar entre o AppCompat EditText não personalizado usual e o AppCompat EditText personalizado.

Personalize AppCompat EditText no Android

Etapas para personalizar o texto de edição AppCompat no Android

Etapa 1: criar um projeto de atividade vazio

Etapa 2: Trabalhar com o arquivo activity_main.xml

  • Apenas dois widgets EditText são implementados no arquivo de layout principal. Um é o nome de usuário e o outro é o campo Senha.
  • Invoque o código a seguir para implementar a mesma IU.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
    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"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
  
        <!--E-mail field-->
        <EditText
            android:id="@+id/emailField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="16dp"
            android:hint="Email" />
  
        <!--Password field-->
        <EditText
            android:id="@+id/passwordField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:hint="Password" />
  
    </LinearLayout>
  
</ScrollView>

IU de saída:

Personalize AppCompat EditText no Android

Etapa 3: importar ícones vetoriais

  • Importe ícones vetoriais para a pasta drawable.
  • Para importar os ícones de vetor , clique com o botão direito na pasta drawable> Novo> Ativo de vetor.
  • Certifique-se de fazer cópias do ícone único na pasta drawable. Um ícone quando o texto de edição está fora de foco e quando o texto de edição está em foco.
  • Defina a cor do ícone como cinza quando o texto de edição estiver fora de foco e defina a cor do ícone como colorPrimary quando o EditText estiver em foco.
  • Consulte a imagem a seguir para obter as etapas discutidas acima.

Personalize AppCompat EditText no Android

  • E a combinação de ambos os ícones cria um layout de seletor XML custom_mail_icon como segue.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the icon turns to green when the edit text is in focus-->
    <item android:drawable="@drawable/ic_mail_focused" android:state_focused="true" />
  
    <!--the icon turns to grey when the edit text is out of focus-->
    <item android:drawable="@drawable/ic_mail" android:state_focused="false" />
</selector>
  • O mesmo vale para o ícone do campo de senha.

Primeiro, o EditText com o layout de cantos cortados é discutido

Etapa 1: Crie um plano de fundo de layout do Seletor para o EditText

  • Este é o layout que fornece a caixa de canto recortado para o campo EditText.
  • Para implementar o mesmo, crie um arquivo custom_edit_text_cut.xml na pasta drawable e invoque o código a seguir.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  
    <!--the outline box turns to green when the edit text is in focus-->
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <stroke android:width="2dp" android:color="@color/colorPrimary" />
        </shape>
    </item>
  
    <!--the outline box turns to grey when the edit text is out of focus-->
    <item android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <stroke android:width="2dp" android:color="@android:color/darker_gray" />
        </shape>
    </item>
  
</selector>

Etapa 2: Trabalhar com o arquivo activity_main.xml

  • No arquivo activity_main.xml, chame o plano de fundo para EditText como custom_edit_text_cut.xml. 
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
    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"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
  
        <!--invoke the background as the 
            custom_edit_text_cut-->
        <EditText
            android:id="@+id/emailField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/custom_edit_text_cut"
            android:drawableStart="@drawable/custom_mail_icon"
            android:drawablePadding="12dp"
            android:hint="Email"
            android:paddingStart="12dp"
            android:paddingEnd="12dp" />
  
        <!--same background for the password field 
            as the custom_edit_text_cut-->
        <EditText
            android:id="@+id/passwordField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/custom_edit_text_cut"
            android:drawableStart="@drawable/custom_vpn_icon"
            android:drawablePadding="12dp"
            android:hint="Password"
            android:paddingStart="12dp"
            android:paddingEnd="12dp" />
  
    </LinearLayout>
  
</ScrollView>

Saída: Executar no emulador

Em segundo lugar, o EditText com o layout arredondado é discutido

Etapa 1: Crie um plano de fundo de layout do Seletor para o EditText

  • Este é o layout que fornece a caixa de canto recortado para o campo EditText.
  • Para implementar o mesmo, crie um arquivo custom_edit_text_rounded.xml na pasta drawable e chame o código a seguir.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  
    <!--The outline turns to colorPrimary when the EditText is in focus-->
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="12dp" />
            <stroke android:width="2dp" android:color="@color/colorPrimary" />
        </shape>
    </item>
  
    <!--The outline turns to grey when the EditText is out of focus-->
    <item android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="12dp" />
            <stroke android:width="2dp" android:color="@android:color/darker_gray" />
        </shape>
    </item>
  
</selector>

Etapa 2: Trabalhar com o arquivo activity_main.xml

  • No arquivo activity_main.xml, chame o plano de fundo para EditText como custom_edit_text_rounded.xml.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
    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"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
  
        <!--invoke the background as the 
            custom_edit_text_rounded-->
        <EditText
            android:id="@+id/emailField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/custom_edit_text_rounded"
            android:drawableStart="@drawable/custom_mail_icon"
            android:drawablePadding="12dp"
            android:hint="Email"
            android:paddingStart="12dp"
            android:paddingEnd="12dp" />
  
        <!--same background for the password field 
            as the custom_edit_text_rounded-->
        <EditText
            android:id="@+id/passwordField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/custom_edit_text_rounded"
            android:drawableStart="@drawable/custom_vpn_icon"
            android:drawablePadding="12dp"
            android:hint="Password"
            android:paddingStart="12dp"
            android:paddingEnd="12dp" />
  
    </LinearLayout>
  
</ScrollView>

Saída: Executar no emulador

Quer um ambiente mais competitivo e acelerado para aprender os fundamentos do Android?
Clique aqui para acessar um guia com curadoria exclusiva de nossos especialistas com o objetivo de torná-lo pronto para a indústria em nenhum momento!