Faça um formulário de login no Android Studio e XML

Tempo de leitura: 2 minutes

Neste tutorial, mostrarei como criar uma bela página de login no android studio, fiz o design usando o Adobe XD, portanto este será o resultado final do projeto’

 

Em primeiro lugar, precisaremos criar dois arquivos desenháveis, um para o segundo plano do botão e outro para o segundo plano de edição de texto, para isso, siga estas etapas:

clique com o botão direito do mouse na pasta drawable >  new > new drawable file

crie dois arquivos e nomeie-os:

  • btn_bg.xml
  • textedit_bg.xml

e copie esse código:

textedit.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:color="#313131"
        android:width="1dp"
        />
    <corners android:radius="8dp"/>
</shape>

 

btn_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/MainColord"/>
    <corners android:radius="8dp"/>
</shape>

também precisaremos modificar o arquivo de cores dentro da nossa pasta de valores e copiar esse arquivo

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <!--Add a custom color-->
    <color name="MainColord">#6c63ff</color>
</resources>

e agora vamos codificar o layout do aplicativo dentro da sua activity_main.xml copie e passe esse código

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="#fff"
    tools:context=".MainActivity">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center_horizontal"
            android:padding="8dp"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="200dp"
                android:src="@drawable/image"
                />

            <TextView
                android:layout_width="250dp"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:text="Cria a tua conta gratuita"
                android:textSize="38sp"
                android:layout_marginHorizontal="18dp"
                android:textColor="@color/MainColord"
                android:layout_marginBottom="12dp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Nome:"
                android:layout_gravity="start"
                android:layout_marginHorizontal="18dp"
                android:textSize="22sp"
                android:layout_marginBottom="8dp"
                />
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="18dp"
                android:hint="CapSistema"
                android:padding="14dp"
                android:background="@drawable/textedit_bg"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Email:"
                android:layout_gravity="start"
                android:layout_marginHorizontal="18dp"
                android:textSize="22sp"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="12dp"
                />
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="18dp"
                android:hint="[email protected]"
                android:padding="14dp"
                android:inputType="textEmailAddress"
                android:background="@drawable/textedit_bg"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Senha:"
                android:layout_gravity="start"
                android:layout_marginHorizontal="18dp"
                android:textSize="22sp"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="12dp"
                />
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="18dp"
                android:hint="Mais de 6 caracteres"
                android:padding="14dp"
                android:background="@drawable/textedit_bg"
                />
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="18dp"
                android:layout_marginVertical="12dp"
                android:text="Inscrever-se"
                android:paddingVertical="16dp"
                android:textColor="#fff"
                android:background="@drawable/btn_bg"
                />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Já tem uma conta ? assinar em"
                android:textAlignment="center"
                />

        </LinearLayout>
    </ScrollView>


</LinearLayout>

Espero que você tenha gostado deste tutorial, se quiser ver mais basta comentar abaixo

Este código foi originalmente explicado, em inglês as imagens foram mantidas, o código e conteudo foram traduzidos.

Visits: 1 Visits: 1200233