Criando uma interface de login simples no Android

Bhavya Varmora em Notável – The Journal Blog Segue em Jul 2 · 3 min ler

Neste tutorial, você aprenderá a criar uma interface de login simples no Android. Este é o meu primeiro post no desenvolvimento do Android e, portanto, sugestões e comentários são sempre bem-vindos.

Etapa: 1 Para usar o novo design de material do Google, precisamos adicionar a dependência material ao nível do aplicativo
arquivo build.gradle .

 implementação 'com.google.android.material: material: 1.0.0' 

Passo 2

Crie um novo nome de arquivo LoginActivity como mostrado abaixo.

Agora, abra o arquivo activity_main.xml em res => layout => activity_main.xml

Agora, precisaremos de dois EditTexts e um Button para criar a interface de login. Clique na aba Texto e adicione o código abaixo:

 <com.google.android.material.button.MaterialButton 
android: layout_width = ”match_parent”
android: layout_height = ”wrap_content”
android: text = ”Login” />

Haverá um erro no MaterialButton, pois não adicionamos as restrições a ele. Atualize seu botão de material como mostrado abaixo para adicionar restrições ao botão.

 <com.google.android.material.button.MaterialButton 
android: layout_width = ”match_parent”
android: layout_height = ”wrap_content”
android: layout_marginStart = ”8dp”
android: layout_marginEnd = ”8dp”
android: layout_marginBottom = ”8dp”
android: text = ”Login”

app: layout_constraintBottom_toBottomOf = ”pai”
app: layout_constraintEnd_toEndOf = "pai"
app: layout_constraintStart_toStartOf = ”pai” />

layout_width : layout_width define a largura da exibição e match_parent define a largura da exibição para cobrir toda a largura da tela.

layout_height : layout_height define a altura da view e wrap_content cobre a área exata do texto, o que dá o nome ao Button.

layout_marginStart : marginStart significa que ele começa da esquerda da view e nós demos um valor de 8dp para que ele coloque um espaço de 8dp à esquerda da view.

layout_marginEnd: Isso adicionará margem no final ou no lado direito da visualização.

layout_marginBottom: Adiciona margem na parte inferior da visão.

Agora, vamos tornar o LoginActivity como nossa atividade de lançador, conforme mostrado abaixo, para que ele seja a primeira tela quando lançarmos nosso aplicativo.

 <atividade android: nome = ". LoginActivity"> 
<filtro de intenção>
<action android: name = ”android.intent.action.MAIN” />
<categoria android: name = ”android.intent.category.LAUNCHER” />
</ filtro intent>
</ activity>
<atividade android: nome = ". MainActivity" />
</ application>

Após essa alteração, se você criar o aplicativo e receber o erro abaixo

 Erro: inflando a classe com.google.android.material.button.MaterialButton 

Para resolver esse problema, abra a pasta de valores e abra styles.xml e, em seguida, altere o valor de pai, conforme mostrado abaixo.

 pai = "Theme.MaterialComponents.Light.DarkActionBar" 

Execute o projeto e você pode ver que o botão está na parte inferior da tela

Agora, vamos adicionar EditText e definir suas restrições como mostrado abaixo.

 <com.google.android.material.textfield.TextInputLayout android: id = ”@ + id / textInputLayout” 
estilo = ”
@ style / Widget .MaterialComponents.TextInputLayout.OutlinedBo ”
android: layout_width = ”match_parent”
android: layout_height = ”wrap_content”
android: layout_marginStart = ”8dp”
android: layout_marginTop = ”16dp”
android: layout_marginEnd = ”8dp”
android: hint = ”Nome Completo”
app: layout_constraintEnd_toEndOf = "pai"
app: layout_constraintStart_toStartOf = ”pai”
app: layout_constraintTop_toTopOf = ”pai”>
<com.google.android.material.textfield.TextInputEditText
android: layout_width = ”match_parent”
android: id = ”@ + id / editTextFullName”
android: layout_height = ”wrap_content” />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
estilo = ”
@ style / Widget .MaterialComponents.TextInputLayout.OutlinedBox ”
android: layout_width = ”match_parent”
android: layout_height = ”wrap_content”
android: layout_marginStart = ”8dp”
android: layout_marginTop = ”8dp”
android: layout_marginEnd = ”8dp”
android: hint = ”Nome do usuário”
app: layout_constraintEnd_toEndOf = "pai"
app: layout_constraintStart_toStartOf = ”pai”
app: layout_constraintTop_toBottomOf = ”@ + id / textInputLayout”>
<com.google.android.material.textfield.TextInputEditText
android: id = ”@ + id / editTextUserName”
android: layout_width = ”match_parent”
android: layout_height = ”wrap_content” />
</com.google.android.material.textfield.TextInputLayout>

style: No código acima, usei o estilo que é fornecido pelo tema material do Google e dá a aparência retangular do EditTexts.

Construa e execute o aplicativo e você verá o EditText adicionado à tela.

É isso para este tutorial. No próximo tutorial, aprenderemos sobre Intent e como usá-lo para passar dados entre atividades .

Obrigado