Android Studio - Pertemuan 4

Reza Prihandi
Apr 10, 2021
8 min read

Persiapan :

Aplikasi android studio versi 4
Laptop
Koneksi Internet

Praktikum 1 (Komponen Spinner)

Pertama jalankan aplikasi IDE Android Studio, caranya :

Pilih Start → Android Studio
Pilih → Create New Porject
Pilih → Empty Activity → Next

Name → Tentukan nama projeknya, saya menamai projek ini "Pertemuan4".
Package Name → Hati2 dalam menamai package name ini, jika ragu biarkanlah apa adanya (default name). Ada banyak syarat dalam penulisan package name, misalnya semua package name harus dituliskan dalam lower case. Biasanya penulisan package name dinamai sesuai dengan nama website kita / perusahaan, hanya saja terbalik. Didahului dengan nama domain, lalu nama website kita dan terakhir nama projek. Tapi ada beberapa nama domain yang sama dengan nama keyword di java contohnya seperti "int" atau terdapat angka di awal nama packagenya. Biasanya dalam kasus ini, nama package di beri karakter underscore "_". Gunanya nama package ini, agar tidak conflict atau error jika kita tidak sengaja menamai method atau class yang sama dengan nama class atau method yang ada didalam java nya.

Save Location → Tempat kita menyimpan projek kita. Disarankan jangan ada spasi dalam penempatan lokasi projek.
Language → Java
Minimum API Level → API 16 → Singkatnya aplikasi kita mau dikhususkan untuk android versi berapa? defaultnya adalah API 16 yang support hampir di semua device berbasis android.

Nah disini tunggu android download gradlenya.

Jika sudah selesai, akan tampil seperti ini

Setelah itu buka file string.xml yang ada di res → value

Tambahkan script ini.

Lalu buka file activity_main.xml yang ada di folder res → layout. Jika tampilannya tidak seperti gambar dibawah ini. Coba lihat di pojok kanan atas gambar, dibawah simbol exit (X) dan kaca pembesar, disini saya memilih Design. Ada 3 pilihan disana yaitu :
1. Code → untuk menampilkan script / codenya saja dari file activity.xml
2. Split → Menampilan antar muka aplikasinya dan juga codenya secara bersamaan.
3. Design → Hanya menampilkan antar muka aplikasinya saja.

Tambahkan spinner yang ada di dalam Palette → Containers. Dan tambahkan TextView yang bisa di pilih di dalam Palette → Text.

Kosong ya spinnernya seperti gambar dibawah ? Itu karena kita spinner kita blom punya value, nanti kita tambahkan value setelah menambahkan TextView.

Ini opsional, Tapi ada settingan untuk menampilkan header di design antar mukanya dengan meng-klik simbol mata seperti gambar dibawah ini dan pilih Show System UI.

Nah, baru kita isi spinnernya, mari kita pindah ke mode code. Pertama, kita buat layout dlo. Kali ini kita tidak memakai ConstraintLayout tetapi memakai AbsoluteLayout. Code yang di blok biru, kita rubah jadi AbsoluteLayout, maka yang bawahnya atau penutup code layoutnya akan ikut berubah juga.

Tambahkan android:Entries = "@array/hari" di dalam code spinner. @array/hari adalah string array yang sudah kita buat sebelumnya di sini.

Pindah lagi ke mode design setelah menambahkan kode diatas.

Kedua, untuk menjalankan emulator android di android studio versi 4 ini. Klik view → Tool Windows → Emulator.

Lalu klik AVD Manager nya untuk membuat, mengedit dan menjalankan emulatornya.

Klik run untuk menjalankan emulatornya atau klik gambar pensil untuk mengedit emulatornya. Coba kita lihat ada apa saja di dalam fitur edit emulator nya.

Klik show advanced settings untuk melihat settingan lebih lanjut dari emulator yang saya pakai.

Disini ada 2 pilihan dalam booting emulatornya :
1. Cold Boot
2. Quick Boot

Setelah klik run emulator, maka akan tampil seperti ini. Setelah itu, kita bisa menjalankan aplikasi yang kita buat sebelumnya tentang spinner dengan cara mengklik tombol play warna hijau.

Praktikum 2 (Komponen Toggle Button)

Masih dalam projek sebelumnya, pindah ke projek android studio lagi dari emulator yg sebelumnya di jalankan. Masih di file activity_main.xml , pilih mode design dan tambahkan toogle button di Palette → Button. Dan jangan lupa tambahkan TextView jika diperlukan.

Klik toogleButton ,setelah terseleksi buttonnya klik Teks Attributes yang ada di pojok kanan pada gambar diatas untuk meng-expand fitur yang ada di Attributes agar kita bisa mengedit button tersebut tanpa harus pergi ke code nya.

Klik All Attributes → Kita bisa merubah teks "ON" atau "OFF"nya, warna teksnya dan lain sebagainya disini.

Run aplikasi nya lagi di emulator tadi (jika belom di close emulatornya), maka akan ada error seperti ini. Klik saja Reinstall and restart app

Klik Terminate → Kita akan sering bertemu dengan warning ini jika kita tidak meng-close aplikasi yang kita jalankan di emulator sebelumnya, karena ada perubahan yang terjadi.

Hasilnya setelah di RUN

Praktikum 3 (Komponen Switch ON/OFF)

Seperti sebelumnya, kembali lagi ke workspace di android studio. Edit lagi activity_main.xml nya untuk menambahkan switch ON/OFF.

Palette → Buttons → Ganti teks Switch dengan apapun dibagian attributes switchnya.

Untuk memberi warna pada tombol switchnya, sedikit rumit untuk kita cari di fitur attribute. Lihatlah gambar ini :

Kita akan mengganti Thumb color si switch ini agar berubah warna merah ketika ON dan warna defaultnya ketika OFF.

Klik kanan pada folder Value yang ada di dalam folder res.
New → Values Resource File

Beri nama file-nya "style" → Ok

Tambahkan code ini untuk mengganti color thumb switch kita nanti.

Ada banyak pilihan warna yang ada. Bisa kita tambahkan sendiri pula asal tau kode warnanya atau daripada nambah warna 1 per 1. Bisa tambahkan warnanya di file colors.xml yang ada di folder res → value. Disini saya menggunakan warna default saat ada error (merah).

Kembali lagi ke activity_main.xml untuk menambahkan style yang telah kita buat sebelumnya. Ingat, nama theme harus sama antara gambar dibawah, dan gambar diatas sebelumnya.

Dan beginilah hasilnya.

Praktikum 4 (Komponen Progress Bar)

Kembali lagi ke activity_main.xml tambahkan progress bar.

Palette → Widgets → Ada 2 progress bar disini, tambahkan saja semuanya. Sama beberapa textview.

Klik salah satu pada progress barnya. Saya klik di progress bar yang horizontal.
Search di aatribute nya dengan keyword "indeterminate" dan beri nilai True.

Untuk mengganti warna nya, tinggal tambahkan kode di setiap progress barnya.
Tambahkan android:IndeterminateTint → warnanya bebas. Saya pilih warna error

Progress bar yg satunya juga sama langkah-langkahnya.

Maka beginilah hasilnya

https://video.wixstatic.com/video/78b192_66a9e6c00da540dea50df8ede9a4f824/720p/mp4/file.mp4

Praktikum 5 (Komponen Seek Bar)

Activity_main.xml → Palette → Widgets → SeekBar

Tambahkan code ini untuk mengganti warnanya

Hasilnya seperti ini

Praktikum 6 (Komponen RatingBar)

Activity_main.xml → Palette → Widgets → RatingBar

Search di attribute rating bar nya dengan keyword "number" untuk menentukan jumlah bintang yang ditampilkan.

Gunakan code ini untuk mengganti warna bintangnya

Beginilah hasilnya

Praktikum 7 (Komponen ScrollView)

Activity_main.xml → Palette → Containers → ScrollView → Perkecil ukuran scrollView nya.

Tambahkan LinierLayout dan TextView didalam ScrollViewnya seperti yang diperagakan dalam video dibawah ini

https://video.wixstatic.com/video/78b192_f8fbb829b7d14f5cbe2358cd5739037f/720p/mp4/file.mp4

res → values → strings.xml → Untuk menambahkan teks yang panjang. Isi aja teks panjang sesuka hati.

Di textView yang tadi telah kita masukkan ke dalam scrollView, silahkan rubah valuenya sesuai dengan string yang dibuat untuk menyimpan teks panjang.

Maka hasilnya akan seperti ini jika kita run aplikasinya :

https://video.wixstatic.com/video/78b192_6a2a421214d149e89799e4d4e72001d4/720p/mp4/file.mp4

Latihan Praktikum 4

Dari soal diatas, aplikasinya terdiri dari :

Plain Text / Edit Text
TextView
RadioButton dan RadioGroup
Button

Fungsi dari button register harusnya untuk menyimpan data user yang sudah di input, dan button login harusnya mengarahkan kita ke informasi user yang telah register. Oke, mari buat :

Masih di projek sebelumnya (Pertemuan4), hapus semua code yang sudah dibuat sebelumnya.

Buat semua plaintext, textview, radiogroup, radio button dan buttonnya.

Nice, untuk radio group bisa membuat radio button tersusun secara horizontal, tambahkan code ini :

Untuk Full code layoutnya ada disini :

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 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">


    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_x="0dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="Username" />

    <EditText
        android:id="@+id/editTextTextPersonName2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_x="0dp"
        android:layout_y="46dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="Password" />

    <EditText
        android:id="@+id/editTextTextPersonName3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_x="0dp"
        android:layout_y="92dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="Email" />

    <EditText
        android:id="@+id/editTextTextPersonName4"
        android:layout_width="411dp"
        android:layout_height="wrap_content"
        android:layout_x="2dp"
        android:layout_y="140dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="Phone" />

    <EditText
        android:id="@+id/editTextTextPersonName5"
        android:layout_width="411dp"
        android:layout_height="wrap_content"
        android:layout_x="1dp"
        android:layout_y="186dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="Website" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="4dp"
        android:layout_y="249dp"
        android:text="Jenis Kelamin"
        android:textSize="18sp" />

    <RadioGroup
        android:id="@+id/labelGroup"
        android:layout_width="wrap_content"
        android:layout_height="72dp"
        android:layout_x="124dp"
        android:layout_y="238dp"
        android:orientation="horizontal">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Laki-Laki" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Perempuan" />
    </RadioGroup>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_x="0dp"
        android:layout_y="305dp"
        android:text="Register"
        app:backgroundTint="#009688"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_x="0dp"
        android:layout_y="345dp"
        android:text="login"
        app:backgroundTint="#009688"/>


</AbsoluteLayout>

Setelah mengatur layoutnya, kita atur MainActivity nya.

app → java → "nama package kita" → MainActivity llalu pastekan code dibawah ini

package com.example.pertemuan4;
//Package jangan lupa disamakan atau jangan ikut di copy

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    //buat variabel 
    String username,password,email,phone,website,sex;
    EditText txtusername;
    EditText txtpassword;
    EditText txtemail;
    EditText txtphone;
    EditText txtwebsite;
    Button btnRegister;
    Button btnLogin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnRegister = findViewById(R.id.button);
        btnLogin = findViewById(R.id.button3);

        //kalau button login di klik, buka fungsi / method openActivity2.
        //openActivity2 ada dibawah, setelah penutup method onCreate.
        btnLogin.setOnClickListener(v -> openActivity2());

        //kalau button register di klik.
        btnRegister.setOnClickListener(v -> {
            txtusername = findViewById(R.id.editTextTextPersonName);
            txtpassword = findViewById(R.id.editTextTextPersonName2);
            txtemail = findViewById(R.id.editTextTextPersonName3);
            txtphone = findViewById(R.id.editTextTextPersonName4);
            txtwebsite = findViewById(R.id.editTextTextPersonName5);
            RadioGroup radioGroup = findViewById(R.id.labelGroup);

            //nge check di radio grup, yang di pilih (checked) id yang mana? yg pertama kah atau yg kedua? simpan di
            //variabel id_pilihan.
            int id_pilihan = radioGroup.getCheckedRadioButtonId();

            //trus di variabel jenis_kelamin, ambil id dari variabel diatas buat ambil objeknya.
            RadioButton jenis_kelamin = (RadioButton) findViewById(id_pilihan);

            //ambil apapun isinya di variabel txtusername, jadikan teks dengan tipe datanya jadi string. Dst
            username = txtusername.getText().toString();
            password = txtpassword.getText().toString();
            email = txtemail.getText().toString();
            phone = txtphone.getText().toString();
            website = txtwebsite.getText().toString();
            sex = jenis_kelamin.getText().toString();

            //ini buat ngecek kalau nilai setiap variabel diatas harus ada... contohnya cek apakah username sama nilainya dengan nilai kosong?
            //dan seterusnya. Kalau kosong salah satunya, ya semua field edit teks jadi kosong.
            if (username.equals("")||password.equals("")||email.equals("")||phone.equals("")||website.equals("")){

                //kodingan buat pop up messege
                Toast.makeText(MainActivity.this, "ISI SEMUANYA DULU", Toast.LENGTH_SHORT).show();
                txtemail.getText().clear();
                txtusername.getText().clear();
                txtpassword.getText().clear();
                txtphone.getText().clear();
                txtwebsite.getText().clear();
            } else {
                Toast.makeText(MainActivity.this, "Selamat Bergabung "+ username + "Anda adalah " + sex, Toast.LENGTH_SHORT).show();
            }

        });
    }

    //nih method openActivity2 nya
    public void openActivity2() {

        //biasa cek lagi, ada isinya gak ini variabel tuh.... kan klw login harus udah daftar.
        if (username.equals("")||password.equals("")||email.equals("")||phone.equals("")||website.equals("")) {
            Toast.makeText(MainActivity.this, "ISI SEMUANYA DULU", Toast.LENGTH_SHORT).show();
        } else {

            //Intent adalah sebuah jembatan yang menghubungkan interaksi antar Activity di aplikasi Android.
            // Intent juga dapat membawa dan mengirimkan data ke Activity lain, bahkan ke aplikasi lain (Gmail, Google Map dsb).
            //begitulah menurut google, hahahaha.
            //konten yg disini, bawa ke Activity2. Apa yang dibawa?
            Intent intent = new Intent(this, Activity2.class);

            //ini nih dibawah ini yang dibawa... anggap aja "username" sebagai gojeknya, trus username setelah koma
            //itu barang yang harus dikirim.
            intent.putExtra("username", username);
            intent.putExtra("password", password);
            intent.putExtra("email", email);
            intent.putExtra("phone", phone);
            intent.putExtra("website", website);
            intent.putExtra("sex", sex);
            startActivity(intent);
        }
    }
}

Setelah paste code diatas, kita buat java class lagi dengan nama Activity2. Klik kanan pada folder package kita lalu klik kanan New → java class → beri nama classnya Activity2.

Biarkan dahulu isinya kosong. Selanjutnya kita buat tampilan si Activity2 ini.

Klik kanan pada folder layout yang berada didalam folder res

Beri nama layoutnya "login" dan klik OK.

pastekan code dibawah ini kedalam layout login.

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/website"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="111dp"
        android:layout_y="154dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="127dp"
        android:layout_y="7dp"
        android:text="WELCOME"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="3dp"
        android:layout_y="82dp"
        android:text="Password" />

    <TextView
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="111dp"
        android:layout_y="84dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="111dp"
        android:layout_y="107dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="111dp"
        android:layout_y="131dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="4dp"
        android:layout_y="106dp"
        android:text="Email" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="2dp"
        android:layout_y="60dp"
        android:text="Username" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="110dp"
        android:layout_y="61dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="3dp"
        android:layout_y="154dp"
        android:text="Website" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="2dp"
        android:layout_y="178dp"
        android:text="Jenis Kelamin" />

    <TextView
        android:id="@+id/sex"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="111dp"
        android:layout_y="178dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="4dp"
        android:layout_y="130dp"
        android:text="Phone" />
</AbsoluteLayout>

Tampilannya cukup sederhana, yang penting bisa menerima data dan menampilkannya

Kembali pada file Activity2.java sebelumnya, lalu pastekan kode ini :

package com.example.pertemuan4;

import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class Activity2 extends AppCompatActivity {
    String username,password,email,phone,website,sex;

    @Override
    protected void onCreate (Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.login);

        //nih intent lagi, buat nerima intent
        Intent intent = getIntent();

        //nah, gojeknya datang kan...dapatkan barang dari gojeknya trus simpen barangnya di variabel dibawah ini.
        username = intent.getStringExtra("username");
        password = intent.getStringExtra("password");
        email = intent.getStringExtra("email");
        phone = intent.getStringExtra("phone");
        website = intent.getStringExtra("website");
        sex = intent.getStringExtra("sex");

        //ini cuman nyambungin textview yang ada di Layout login doang.
        TextView textView1 = findViewById(R.id.username);
        TextView textView2 = findViewById(R.id.password);
        TextView textView3 = findViewById(R.id.email);
        TextView textView4 = findViewById(R.id.phone);
        TextView textView5 = findViewById(R.id.website);
        TextView textView6 = findViewById(R.id.sex);

        //nah klw udah di sambungin, baru di isi pake data kiriman yg tadi.
        textView1.setText(username);
        textView2.setText(password);
        textView3.setText(email);
        textView4.setText(phone);
        textView5.setText(website);
        textView6.setText(sex);
    }
}

Dan terakhir, buka file AndroidManifest.xml di folder app → manifests lalu tambahkan Activity2 kedalam scriptnya. Aplikasi siap dijalankan.