Tutorial Kompenen UI Android Studio

Komponen User Interface terbagi menjadi beberapa kategori :

1.          Layout, merupakan perluasan dari kelas ViewGroup. Layout berfungsi sebagai wadah komponen lainnya.

2.        Widget, terdiri dari Button, Checkbox, Text View, Switches, ImageView, Progress, Bar, Sppiner, dan WebView.

3.        Text Field, kompenen ini user dapat melukan input teks.

4.        Container, merupakan komponen untuk menampilkan komponen-komponen yang sama. Contohnya Radio Group, List Vies dan Scroll View.

5.        Data & Time, untuk menampilkan tanggal dan waktu.

Mari kita bahas Komponen UI Basic View atau objek dasar yang meliputi Widget dan Text Field.

1.          Komponen Text View

a.      Pertama jalankan Android Studio dengan cara :

·      Pilih Start à Android Studio

·      Pilih à Start a new Android Studio Project

·      Pilih à Empty Activity

b.      Tampilan IDE Android Studio, setelah itu Ketikan Script pada file activity_main.xml  seperti teks di bawah ini :

c.      Jalankan di Emulator maka akan tampil seperti gambar berikut :

2.        Komponen Edit Text

a.      Langkahnya sama seperti pada Komponen Text View atau bisa melanjutkan yang atas.

b.      Tampilan IDE Android Studio, setelah itu Ketikan Script pada file activity_main.xml  seperti teks di bawah ini :

c.      Jalankan di Emulator maka akan tampil seperti gambar berikut :

3.        Komponen Radio Button

a.      Langkahnya sama seperti pada Komponen Text View atau bisa melanjutkan yang sebelumnya.

b.      Tampilan IDE Android Studio, setelah itu Ketikan Script pada file activity_main.xml  seperti teks di bawah ini :

c.      Jalankan di Emulator maka akan tampil seperti gambar berikut :

4.        Komponen Button

a.      Langkahnya sama seperti pada Komponen Text View atau bisa melanjutkan yang sebelumnya.

b.      Tampilan IDE Android Studio, setelah itu Ketikan Script pada file activity_main.xml  seperti teks di bawah ini :

c.      Selanjutnya Ketikan script pada file MainActivity.java seperti text dibawah ini :

package fahmitask.blogspot.com.tugas_praktikum3;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Mendapatkan referensi dari objek yang telah ditambahkan dari activity_mail.xml
        final TextView Textview = (TextView) findViewById(R.id.myFirstText);
        final EditText Edittext = (EditText) findViewById(R.id.myTextField1);
        final RadioGroup RadioGroup = (android.widget.RadioGroup) findViewById(R.id.myRadioGroup);

        //mendapatkan referensi objek
        Button Button = (android.widget.Button) findViewById(R.id.myButton);

        //menambahkan evebt handler ketika tombol di klik
        Button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //mendapatkan posisi suatu pilihan
                int id_myRadioGroup = RadioGroup.getCheckedRadioButtonId();
                //mengambil nilai dari objek
                RadioButton masukan_pilihan_tempat_tinggal = (RadioButton) findViewById(id_myRadioGroup);
                //mengganti text dari textview
                Textview.setText("Hallo, " + Edittext.getText().toString() + "\n Anda Dari "
                        + masukan_pilihan_tempat_tinggal.getText().toString());
            }
        });
    }
}

d.      Jalankan di Emulator maka akan tampil seperti gambar berikut :