Tutorial Membuat Tampilan Login di Android Studio 2020

Pada tutorial kali ini garishorizontal akan  menunjukan cara bagaimana membuat Tampilan/ Layout Login UI Design yang sederhana, hanya menggunakan file XML dan hasil jadinya kira-kira seperti gambar dibawah ini.
Tampilan Login

Tapi sebelum kita melanjutkan membuat form login pada android studio alangkah baiknya kalian memahami dulu apa itu Android Studio dan apa saja fitur fitur yang ada di Android Studio.

baiklah kita lanjut, sesuai judul tutorial kali ini hanya fokus pada pembuatan tampilan login saja, artinya tidak ada database atau coding java.  Oke langsung saja kalian ikuti langkah demi langkahnya.

Membuat Form Login Keren di Android Studio: 

  • Buat Projek Baru
Pertama silahkan buka Android Studio kemudian buat sebuah projek baru dengan nama projek “Login” atau nama bebas terserah kalian
  • Build.gradle(Module: app)
Tambahkan dependencies pada Build.gradle(Module: app) seperti dibawah ini:
apply plugin: 'com.android.application'

android {
    compileSdkVersion
29
   
buildToolsVersion "29.0.2"
   
defaultConfig {
        applicationId
"com.myapp.login"
       
minSdkVersion 22
       
targetSdkVersion 29
       
versionCode 1
       
versionName "1.0"
       
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   
}
    buildTypes {
        release {
            minifyEnabled
false
           
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
       
}
    }
}

dependencies {
    implementation fileTree(
dir: 'libs', include: ['*.jar'])
    implementation
'androidx.appcompat:appcompat:1.1.0'
   
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta3'
   
testImplementation 'junit:junit:4.13'
   
androidTestImplementation 'androidx.test.ext:junit:1.1.1'
   
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
   
implementation 'com.android.support:design:29.0.0'
   
implementation 'com.facebook.android:facebook-android-sdk:[4,5)'
}

  • string.xml
Selanjutnya Tambahkan beberapa baris Codingan pada string.xml
<resources>
    <string name="app_name">Login</string>
    <string name="allowed_input_char_name">0123456789qwertzui opasdfghjklyxcvbnmABCDEFGHIJKLMNOPQRSTUVWXYZ</string>
    <string name="allowed_input_char_email">0123456789qwertzuiopasdfghjklyxcvbnm@-_ABCDEFGHIJKLMNOPQRSTUVWXYZ.</string>
    <string name="daftar"><u>Daftar disini</u></string>
    <string name="lupa_password"><u>Lupa Kata Sandi ?</u></string>
    <string name="facebook_app_id">1234567890</string>
    <string name="textEmail">Email</string>
    <string name="textPassword">Password</string>
    <string name="textLogin">Login</string>
</resources> 

  • colors.xml
Pada “colors.xml” silahkan tambahkan warna sesuai selera kalian atau ikutin kode dibawah ini
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="merah">#F23333</color>
 </resources

  • styles.xml
Pada “styles.xml” kita akan membuat tanpa action bar

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style></resources>

  • Buat rounded_btn.xml
Membuat drawbale baru dengan nama “rounded_btn.xml” dan isikan kode dibawah ini
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <solid android:color="@color/merah"/>

    <corners android:radius="15px"/>
</shape>

  • Buat rounded_edittext.xml
Membuat drawbale baru dengan nama “rounded_edittext.xml” dan isikan kode dibawah ini
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="1dp"
        android:color="@color/merah" />\
    <corners
        android:radius="10dp"/>
</shape> 
  • Tambahkan Image Asset
  1. Klik kanan pada drawble
  2. Pilih New => Image Asset
  3. Pada icon type pilih “Action Bar and Tab Icons”
  4. Asset Type pilih “Clip Art”
  5. Lalu beri nama icon dengan nama “ic_app”
  6. Untuk Theme pilih “Custom”
  7.  “Custom color” pilih warna merah atau warna kesukaan kalian
  8.   Selanjutnya klik “finish”

  • Buat activity_sign_in.xml
Buat file xml baru dengan cara klik kanan pada layout lalu pilih new dan pilih Layout resource file,lalu beri nama “activity_sign_in.xml” dan isikan codingan seperti dibawah ini.
 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:layout_marginTop="?attr/actionBarSize"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/logoApp"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="50dp"
        app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_app" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent">

        <EditText
            android:id="@+id/etEmail"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="24dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="24dp"
            android:background="@drawable/rounded_edittext"
            android:digits="@string/allowed_input_char_email"
            android:ems="10"
            android:hint="@string/textEmail"
            android:inputType="textEmailAddress"
            android:textAlignment="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="24dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="24dp"
            android:layout_marginBottom="16dp"
            android:background="@drawable/rounded_edittext"
            android:ems="10"
            android:hint="@string/textPassword"
            android:inputType="textPassword"
            android:textAlignment="center"
            app:layout_constraintBottom_toTopOf="@+id/btnLogin"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/etEmail" />

        <Button
            android:id="@+id/btnLogin"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            android:layout_marginBottom="8dp"
            android:background="@drawable/rounded_btn"
            android:text="@string/textLogin"
            android:textColor="#ffff"
            app:layout_constraintBottom_toTopOf="@+id/cbRememberMe"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent" />

        <CheckBox
            android:id="@+id/cbRememberMe"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginBottom="16dp"
            android:text="Ingat Saya"
            app:layout_constraintBottom_toTopOf="@+id/textView2"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/tvLupaKataSandi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/lupa_password"
            app:layout_constraintBottom_toBottomOf="@+id/cbRememberMe"
            app:layout_constraintEnd_toEndOf="@+id/btnLogin"
            app:layout_constraintTop_toTopOf="@+id/cbRememberMe" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            android:layout_marginBottom="16dp"
            android:text="Atau login dengan"
            app:layout_constraintBottom_toTopOf="@+id/login_button"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <com.facebook.login.widget.LoginButton
            android:id="@+id/login_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            app:layout_constraintBottom_toTopOf="@+id/textView3"
            app:layout_constraintEnd_toEndOf="@+id/tvLupaKataSandi"
            app:layout_constraintStart_toStartOf="@+id/cbRememberMe" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="24dp"
            android:text="Belum Punya akun?"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/login_button" />

        <TextView
            android:id="@+id/tvDaftar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="1dp"
            android:text="@string/daftar"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="@+id/textView3"
            app:layout_constraintEnd_toEndOf="@+id/login_button"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/textView3"
            app:layout_constraintTop_toTopOf="@+id/textView3"
            app:layout_constraintVertical_bias="0.0" />
    </androidx.constraintlayout.widget.ConstraintLayout></androidx.constraintlayout.widget.ConstraintLayout>

  • AndroidManifest
Tambahkan codingan pada “AndroidManifest.xml” seperti dibawah ini
<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.myapp.login">

    <application

        android:allowBackup="true"

        android:icon="@mipmap/ic_launcher"

        android:label="@string/app_name"

        android:roundIcon="@mipmap/ic_launcher_round"

        android:supportsRtl="true"

        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <meta-data
            android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id" />
    </application></manifest>
  • Ubah MainActivity.java
package com.myapp.login;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sign_in);

    }

}
  • Run Aplikasi
Jika sudah tidak ada error coba kalian jalankan aplikasinya.


Gimana? Mudah bukan. Oke silahkan dicoba dan diotak atik lagi sesuai selera kalian, semoga bermanfaat dan jangan lupa dikomen.

Kebijakan Komentar: Silahkan tulis komentar Anda sesuai dengan topik "Tutorial Membuat Tampilan Login di Android Studio 2020".
Buka Komentar