AndroidTutorial

Project Android-Firebase 01 Membuat Halaman Login

Di halaman ini akan dijelaskan mengenai membuat halaman login di android dengan menggunakan android studio 3.5.1.

Langkah-langkahnya sebagai berikut :

1. Buat project baru dengan nama “Sa Kampus”, dan api yang digunakan adalah 15 atau versi android 4.0.3 , kemudian untuk template pilih empty activity dengan namanya filenya sesuai default yakni MainActivity.

2, Kode untuk file layout_main.xml adalah seperti berikut :

<?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"
    tools:context=".MainActivity"
    android:background="@drawable/merahputih"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="180dp"
                android:gravity="center_horizontal"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/himakom" />
                <TextView
                    android:layout_marginTop="8dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="SA KAMPUS" />
                <EditText
                    android:id="@+id/input_email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Email"
                    android:inputType="textEmailAddress"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="50dp"
                    android:layout_marginRight="50dp" />
                <EditText
                    android:id="@+id/input_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Password"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="50dp"
                    android:layout_marginRight="50dp"
                    android:inputType="textPassword"
                    />
                <Button
                    android:id="@+id/btn_login"
                    android:layout_marginTop="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Login"
                    android:textColor="@color/colorWhite"
                    android:background="@drawable/login_btn"
                    />

                <LinearLayout
                    android:layout_marginTop="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Belum punya akun ? "/>
                    <TextView
                        android:id="@+id/tv_daftar"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Daftar"
                        android:textColor="@color/colorAccent"
                        />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>


    
</LinearLayout>

2. Tambahkan color white di file colors.xml yang ada di folder res/values/, sehingga seperti ini

<color name="colorWhite">#FFFFFF</color>

3. Untuk membuat background button sendiri, kita perlu membuat file di folder drawable, silahkan klik kanan, di folder drawable -> New -> Drawable Resource File, isikan namanya dengan login_btn, pemberian nama file bebas. Sehingga terdapat file xml baru di folder drawable. Kemudian edit seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="37dp"
        />
    <gradient
        android:angle="45"
        android:centerX="25%"
        android:startColor="#E43A34"
        android:endColor="#FFFFFF"
        android:type="linear" />
    <size
        android:width="182dp"
        android:height="54dp"
        />
</shape>

4. Untuk menghilangkan action bar, kita perlu menambahkan style di dalam file styles.xml yang terdapat pada folder res/values/, tambahkan di bawah tag tutup

yang sebelumnya dengan kode berikut :

<style name="NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorBlue</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

5. Kemudian kita edit file Manifest.xml kita, rubah pada baris android:theme, menjadi noActionBar, seperti berikut:

android:theme="@style/NoActionBar"

Silahkan di running dengan emulator kita. Ia demikian tutorial, membuat halaman login.

Untuk image pada latihan, silahkan download disini

untuk versi videonya : tonton

Share:

Leave a reply

Your email address will not be published. Required fields are marked *