Artikel kali ini kita akan mencoba untuk membuat form di android, tepatnya kita akan membuat halaman login dan daftar pada android. Seperti biasa kita akan menggunakan android studio.

Pada artikel ini kami hanya memberikan contoh pembuatan desain saja, belum termasuk dengan proses loginnya.

Berikut beberapa hal yang akan kita bahasa pada artikel ini

  • Mode fullscreen di Android
  • Menggunakan font custom
  • Membuat form login
  • Membuat form daftar

Pertama, silahkan anda buat proyek baru terlebih dahulu. Lalu buat dua empty activity, Login dan Register.

Sebelum kita mulai kita akan mendownload font dulu dari https://fonts.google.com, pilih font yang anda sukai, kemudian rename file font nya menjadi huruf kecil semua. Lalu, pada folder proyek anda, klik kanan di res > new > Android Resource Dircetory, resource type nya ganti menjadi font. Letakan file font tadi kedalam folder fonts.

Membuat form di Android

untuk menggunakan font secara global, tambahkan ke dalam style.xml. Berikut style.xml milik kami

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!--  Custom font -->
    <item name="android:fontFamily">@font/acme</item>
    <item name="editTextColor">#000</item>
    <item name="android:textColor">#3e2723</item>
</style>
</resources>

Membuat form login di Android

Kita akan membuat form di android nanti menjadi fullscreen, tidak ada appbar ataupun judul. Berikut screenshot dari login form yang akan kita buat

Login form

Kita menggunakan gradient sebagai background, lalu kami juga memodifikasi tombol dan edittext. Untuk gradient berikut kodenya (simpan dengan nama gradient.xml didalam folder drawable)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:startColor="#b9f6ca"
            android:endColor="#4fc3f7"
            android:type="linear" />
    </shape>
</item>
</selector>

dan agar edittext dan tombol terlihat seperti screenshot diatas, gunakan kode berikut
(simpan dengan nama round_corner.xml didalam folder drawable)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
</shape>

Lalu activitynya berisi seperti ini

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
public class Login extends AppCompatActivity {
    TextView register_txt;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        register_txt = findViewById(R.id.register_txt);
        register_txt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(Login.this, Register.class);
                startActivity(intent);
            }
        });
    }
    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideSystemUI();
        }
    }
    private void hideSystemUI() {
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_IMMERSIVE
                        | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_FULLSCREEN);
    }
}

hideSystemUI() merupakan sebuah fungsi yang digunakan untuk membuat activity kita menjadi memiliki tampilan penuh. Referensi

Membuat form daftar di Android

Form daftar tidak jauh berbeda dengan tampilan dari form login yang kita buat diatas, berikut layoutnya

<?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"
    android:background="@drawable/gradient"
    tools:context=".Login">

    <!-- Bagian Header -->
    <TextView
        android:id="@+id/header"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:textSize="50sp"
        android:text="Register"
        />
    <!-- /header -->

    <EditText
        android:id="@+id/edit_email"
        android:inputType="textEmailAddress"
        android:layout_marginTop="100dp"
        android:layout_below="@+id/header"
        android:layout_width="250dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:hint="Email"
        android:background="@drawable/round_corner"
        android:height="80dp"
        android:maxLines="1"
        android:paddingStart="10dp"
        />

    <EditText
        android:id="@+id/edit_password"
        android:inputType="textPassword"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/edit_email"
        android:layout_width="250dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:hint="Password"
        android:background="@drawable/round_corner"
        android:maxLines="1"
        android:paddingStart="10dp"
        />
    <EditText
        android:id="@+id/edit_password_conf"
        android:inputType="textPassword"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/edit_password"
        android:layout_width="250dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:hint="Password Konfirmasi"
        android:background="@drawable/round_corner"
        android:maxLines="1"
        android:paddingStart="10dp"
        />
    <Button
        android:layout_width="100dp"
        android:layout_height="25dp"
        android:layout_below="@id/edit_password_conf"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Login"
        android:background="@drawable/round_corner"
        android:id="@+id/btn_login"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:layout_centerHorizontal="true"
        android:id="@+id/login_txt"
        android:layout_below="@id/btn_login"
        android:layout_marginTop="40dp"
        />
</RelativeLayout>

dan isi activitynya seperti ini

public class Register extends AppCompatActivity {
    TextView login_txt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
        login_txt = findViewById(R.id.login_txt);
        login_txt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(Register.this, Login.class);
                startActivity(intent);
            }
        });
    }
    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideSystemUI();
        }
    }
    private void hideSystemUI() {
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_IMMERSIVE
                        | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_FULLSCREEN);
    }
}

Pada artikel ini kita sudah Membuat form di Android, tepatnya membuat halaman login dan halaman daftar. Pada artikel berikutnya, kita akan mencoba untuk menambahkan proses login dengan php dan mysql database.

Sekian artikel tentang Membuat form di Android, semoga bermanfaat.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!