Tutorial membuat tampilan login cantik menggunakan XML di Android Studio

Semua orang menyukai layar login yang indah, dan karena itu merupakan kesan pertama yang dilihat orang tentang aplikasi yang digunakan, sangat penting untuk membuat tampilan layar login yang menarik bagi pengguna . Untuk itu Ketikan MD membuat artikel ini menunjukkan kepada Anda contoh tampilan login yang bagus untuk pengguna aplikasi yang kita buat.Di bawah merupakan tampilan login yang akan kita buat.

Pertama,kita menyiapkan warna yang cocok untuk tampilan login yang akan kita buat.Dengan cara masuk ke folder res->values->colors.xml

Setelah itu masukkan code dibawah kedalam file colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#e8150e</color>
    <color name="colorPrimaryDark">#d10a03</color>
    <color name="colorAccent">#e8150e</color>
    <color name="white">#ffffff</color>
    <color name="colorTextWhite">#ffffff</color>

    <color name="colorText">#292929</color>
</resources>

Langkah berikutnya masukkan code dibawah kedalam file style.xml

    <style name="styleEditText">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#080808</item>
        <item name="android:typeface">monospace</item>
        <item name="android:padding">10dp</item>
        <item name="android:textSize">15sp</item>
        <item name="android:background">@drawable/edit_text_style</item>
    </style>

Selanjutnya buat file xml dengan cara klik kanan pada drawable->new->Drawable resource file->masukkan nama round_btn.xml lalu masukkan kode yang ada dibawah

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

Selanjutnya buat file xml dengan cara klik kanan pada drawable->new->Drawable resource file->masukkan nama edit_text_style.xml lalu masukkan kode yang ada dibawah

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
            <corners android:radius="5dp" />
            <stroke
                    android:width="2dp"
                    android:color="#ff3340"
            />
        </shape>
    </item>
</selector>

Selanjutnya kita tambahkan dependencies dalam gradle letakkan code dibawa agar kita bisa menggunakan CardView dengan cara pilih file build.gradle(Module:app) , lalu klik sync now yang berada pada pojok kanan atas.

implementation 'com.android.support:cardview-v7:28.0.0'

Buka activity_login.xml dan masukkan kode xml dibawah (note:pemilihan activiy tergantung dari activity yang teman-teman telah buat)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".LoginActivity">

    <RelativeLayout
        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:weightSum="2">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary"
                android:gravity="center"
                android:orientation="vertical"></LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@color/white"
                android:gravity="center"
                android:orientation="vertical"></LinearLayout>
        </LinearLayout>


        <ImageView
            android:id="@+id/imglogo"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/tvtext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/imglogo"
            android:layout_centerHorizontal="true"
            android:fontFamily="sans-serif-medium"
            android:padding="5dp"
            android:text="LOGIN APLIKASI"
            android:textColor="@color/colorTextWhite"
            android:textSize="22sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/tvtext"
            android:layout_centerInParent="true"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:id="@+id/form"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="10dp"
                app:cardCornerRadius="10dp"
                app:cardElevation="8dp"
                app:cardPreventCornerOverlap="false"
                app:cardUseCompatPadding="true">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginTop="40dp"
                        android:layout_marginRight="10dp"
                        android:text="Username"
                        android:textColor="@color/colorText"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <EditText
                        style="@style/styleEditText"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:background="@drawable/edit_text_style"
                        android:hint="Masukkan username"
                        android:paddingLeft="20dp"

                        />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:text="Password"
                        android:textColor="@color/colorText"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <EditText
                        style="@style/styleEditText"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:hint="Masukkan password"
                        android:paddingLeft="20dp" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"
                        android:orientation="horizontal">

                        <Button
                            android:id="@+id/btnTutup"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginRight="5dp"
                            android:layout_marginBottom="40dp"
                            android:layout_weight="1"
                            android:background="@drawable/round_btn"
                            android:text="Keluar"
                            android:textAllCaps="false"
                            android:textColor="@color/colorTextWhite" />

                        <Button
                            android:id="@+id/btnMasuk"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="5dp"
                            android:layout_marginBottom="40dp"
                            android:layout_weight="1"
                            android:background="@drawable/round_btn"
                            android:text="Masuk"
                            android:textAllCaps="false"
                            android:textColor="@color/colorTextWhite" />
                    </LinearLayout>
                </LinearLayout>
            </android.support.v7.widget.CardView>

            <Button
                android:id="@+id/btnDaftar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:background="@drawable/round_btn"
                android:text="Daftar"
                android:textAllCaps="false"
                android:textColor="@color/colorTextWhite" />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

Untuk mendapatkan source code nya silahkan klik disini