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 :

[java]<?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>[/java]

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

[xml]<color name="colorWhite">#FFFFFF</color>[/xml]

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]<?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>[/xml]

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 :

[xml]<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>[/xml]

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

[xml]android:theme="@style/NoActionBar"
[/xml]

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 *