Tugas 2 Pengenalan Komponen UI Pada Android Studio

PENGENALAN KOMPONEN UI (USER INTERFACE) PADA ANDROID STUDIO

Secara umum Arsitektur User Interface (UI) pada aplikasi android adalah user interface yang meliputi Activity dan user interface yang terdiri dari komponen, semua yang berhubungan dengan user interface pada aplikasi android biasanya berada pada lokasi res/layout/filename.xml dimana coding java untuk memanggil yang kita kenal dengan R.Layuot.filename.

Cara termudah membangun UI adalah dengan menggunakan file XML statis, namun terkadang kita memerlukan UI yang dinamis saat aplikasi berjalan, oleh karena itu dimungkinan pula menciptakan UI melalui kode program.

Komponen-komponennya adalah sebagai berikut :

1. <ViewGroup>

Kumpilan view dimana kita dapat menentukan tata letak komponen view secara berbeda,seperti LinearLayout, RelativeLayout, FrameLayout serta Tabulasi,Atribut dari ViewGroup.

2. <View>

Sama seperti <ViewGroup> tetapi ini lebih dikenal dengan "individual UI Komponen", atribut juga terdiri dari tiga yang sama persis dengan atribut yang dimiliki oleh <ViewGroup>.

3. <requestFocus>

Elemen kosong yang bisa kita definisikan didalam <view>.

4. <Incloud>

Memasukan file layout kedalam layout,Atribut nya sama dengan <ViewGroup> dan <View>, tetapi ada satu tambahan atribut yaitu <resource> yang berfungsi menentukan file layoutnya.

Setelah kita mengetahui komponen tentang UI (Usert Interface) maka kita langsung saja percobaan membuat sebuah project baru yaitu kita membuat TextView, EditText, Image Button dan juga kita nanti akan membuat sebuah inputan dari edittext yang akan menampilkan nama kita dan asal tempat tinggal kita. Kita langsung saja membuat projectnya.

Tutorial Membuat Text View

1. Cara membuat project baru pada aplikasi android studio

Ø Cara membuatnya pertama kita buat terlebih dahulu projectnya dengan caranya itu, klik Create New Project

Ø Kemudian kita pilih “Empty Activity” dan setelah itu kita klik tombol next

Pada android studio kita memilih Empty Activity karena kita akan membuat sebuah projectnya yaitu membuat sebuah TextView berbasis Mobile Android, tapi boleh juga digunakan untuk Smart TV dan Perangkat Wearable.

Ø Kita akan mengkonfigurasi project kita

Pada konfigurasi ini saya memberikan name itu adalah “Membuat TextView”, kemudian saya menyimpan file lokasinya di D:\2021\semester6\ti3\Membuat TextView, kemudian saya menggunakan Bahasa Pemrograman “Java” dengan minimum API nya adalah 21 dan setelah itu kita klik finish.

Ø Selanjutnya kita akan mendesain sebuah halaman android studio dengan menggunakan textview yang dimana isinya berupa Text Pertama dengan warna backgroundnya itu merah, dan isi yang kedua yaitu Text Kedua dengan warna backgroundnya itu hijau. Sebenarnya untuk langkahnya ada 2 cara, yang pertama itu caranya menggunakan drag and drop, yang kedua itu kita tinggal menuliskan sebuah coding untuk textviewnya saja. Sebelumnya silahkan buka dulu pada folder res, kemudian ke folder layout dan setelah itu buka file yang Namanya activity_main.xml. Berikut contoh text view awal yang sudah saya rubah pada bagian textnya.

Ø Kemudian jalankan di emulatornya maka akan tampil seperti gambar dibawah ini :

Ø Berikut codingan untuk membuat textview di android studio :

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textpertama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:background="#e74c3c"
        android:textColor="#ecf0f1"
        android:textSize="20sp"
        android:text="Text Pertama" />

    <TextView
        android:id="@+id/textkedua"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#1abc9c"
        android:textColor="#2c3e50"
        android:textSize="20sp"
        android:text="Text Kedua" />

</LinearLayout>

Tutorial Membuat Edit Text Di Android Studio

EditText adalah cara standar untuk memasukkan teks diaplikasi Android. Jika pengguna diminta untuk memasukkan suatu teks, maka View ini lah yang menjadi sarana utama untuk melakukannya.

Kita langsung saja membuat sebuah edit text yang dimana nanti tampilannya membuat inputan untuk sebuah email dan membuat inputan untuk sebuah password.

1. Pertama kita buat terlebih dahulu project baru

Ø Cara membuat sebuah project baru yaitu kita buka terlebih dahulu aplikasi android studionya kemudian kita klik create new project.

Ø Kemudian kita pilih “Empty Activity” dan setelah itu kita klik tombol next.

Ø Kemudian selanjutnya kita akan mengkonfigurasi project kita

Pada package name saya rubah menjadi blog punya saya yaitu sultanbisri.blogspot.com lalu saya juga merubah name atau nama project punya saya yaitu membuat edit text dan setelah itu saya simpan ke dalam folder membuat edit text yang ada di D:\2021\semester6\ti3\Membuat Edit Text, disini saya menggunakan Bahasa pemrogramannya itu Bahasa “Java” dan minimum API nya yaitu 21, setelah itu kita klik finish.

Ø Berikut tampilan awal IDE Android Studio :

Ø Selanjutnya kita akan mengetikkan script pada file activity_main.xml

Cara membuka file activity_main.xml yaitu kita buka terlebih dahulu folder res, kemudian kita buka fodler layout, setelah itu kita buka file activity_main.xml. Silahkan ketikan script dibawah ini :

Ø Kemudian jalankan di emulatornya maka akan tampil seperti gambar dibawah ini :

ØBerikut codingan untuk membuat textview di android studio :

<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"    android:orientation="vertical"    tools:context=".MainActivity">
    <TextView        android:id="@+id/lbl_email"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:textSize="20dp"        android:text="Email Anda : " />
    <EditText        android:id="@+id/txt_email"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:hint="ketikan Email Anda " />
    <TextView        android:id="@+id/lbl_password"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="Password Anda : "        android:textSize="20dp" />
    <EditText
        android:id="@+id/txt_pass"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:hint="ketikan Password Anda "        android:inputType="textPassword"/>

</LinearLayout>

Tutorial Membuat Edit Text Di Android Studio

Button adalah perangkat user interface pada Android yang berupa tombol. Button merupakan salah satu hal wajib pada aplikasi Android. Karena banyak aktivitas pada aplikasi Android yang membutuhkan Button untuk mengeksekusinya, seperti Login, Logout, Pencarian, atau Menu. Button dapat berisi tulisan, gambar, atau kombinasi keduanya.

Berikut macam-macam komponen button :

1. Button Text

Button Text adalah Button dengan tulisan yang dapat dibuat dengan elemen <Button> seperti berikut ini.

<Button xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Pencarian" />

2. Image Button

Image Button adalah Button yang dengan tampilan sebuah gambar/image yang dapat dibuat dengan ImageButton. Gambar yang kita jadikan sebagai tombol dapat kita atur sesuai keinginan kita. Misalnya kita akan membuat tombol pencarian dengan memberikan gambar kaca pembesar seperti ini.

ImageButton dapat dibuat dengan element <ImageButton> seperti berikut ini.

<Button xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Pencarian"

android:drawableLeft="@drawable/button_search" />

Attribute android:drawableLeft mengambil file gambar bernama button_search.png pada folder drawable seperti pada image button.

Setelah kita mengetahui apa itu button dan apa sajakah macam-macam komponen pada button, nah pada kesempatan kali ini kita akan mencoba membuat sebuah project sederhana dari image dan button, jadi nanti kita tuh akan menampilkan sebuah button dan foto kita di layar aplikasi android. Bagaimana caranya, kita langsung saja.

 Ø  Pertama kita buat terlebih dahulu project baru dengan caranya kita klik pada create new project

Ø Kemudian kita pilih “Empty Activity” dan setelah itu kita klik tombol next

Ø Setelah itu kita konfigurasi project kita, disini saya menamakan projectnya itu adalah Image Button dan Package namenya itu dari website saya yaitu sulltanbisri.blogspot.com, kemudian kita menyimpan file lokasi kita, saya menyimpannya itu di D:\2021\semester6\ti3\Image Button, nah disini saya memilih Bahasa pemrogramannya itu adalah Bahasa “Java” dengan minimumnya API nya adalah 21, setelah itu kita klik finish.

Ø Berikut tampilan dari IDE Android Studio :

Ø Kita langsung saja, sebelum kita menambahkan button, kita terlebih dahulu menambahkan sebuah foto, disini fotonya bebas ya, caranya kita klik kanan kemudian copy fotonya.

Ø Setelah itu buka project di android studio Kembali, lalu kit acari folder Res/Drawable/ di dalam struktur folder project kita. Lalu klik kanan pada folder Drawable pilih paste.

Ø Klik OK pada pilihan tempat penyimpanan file kita dan beri/ubah nama file kita, disini penamaannya itu menggunakan nama saya sendiri, untuk menamakan sebuah file, kita jangan menamakan sebuah file dengan memberikan spasi.

Ø Selanjutnya silahkan ketikan secript dibawah ini, sebelum diketik scriptnya, terlebih dahulu kita buka folder res, kita buka lagi folder layout setelah itu kita baru buka file activity_main.xml, silahkan baru bisa di ketikan script yang ada dibawah ini :

Ø Kemudian jalankan di emulatornya, maka akan muncul tampilannya seperti pada gambar dibawah ini :

Tutorial Membuat RadioButton Dan Radio Group

RadioButton adalah widget yang umumnya digunakan bersama dengan RadioGroup, untuk membuat menu/opsi pilihan yang bersifat mutual exclusive, artinya user hanya diperbolehkan untuk memilih salah satu dari sekian banyak opsi, jika tadi kita menggunakan checkbox, kita bisa memilih 3 opsi sekaligus, jika menggunakan RadioButton dan RadioGroup, user hanya dapat memilih salah satu saja. Jika RadioButton tidak berada didalam RadioGroup, saat user mengklik salah satu opsi pada RadioButton tersebut akan bernilai true akan tetapi tidak bisa menjadi false kembali.
Perlu kalian ingat, tag <RadioButton> harus berada didalam tag <RadioGroup> dan jangan lupa untuk menambahkan atribut android:orientation untuk menentukan jenis orientasi (vertical atau horizontal). Setelah kita menjelaskan tentang RadioButton dan Radio Group kita langsung saja membuat sebuah project baru yang dimana nanti kita akan memunculkan radiobutton dan radio group.

Ø Sebelum membuat project, alangkah baiknya kita buat terlebih dahulu project barunya, dengan caranya klik Create New Project.

Ø Kemudian kita pilih “Empty Activity” dan setelah itu klik next.

Ø Selanjutnya kita konfigurasi project kita, disini saya menamakan sebuah namenya adalah RadioButton dan Radio Group, kemudian untuk packagenya saya berikan namanya sultanbisri.blogspot.com, lalu saya menyimpan projectnya itu di D:\2021\semester6\ti3\RadioButton, setelah itu kita pilih Bahasa pemrogramannya java dan minimum API nya adalah 21

Ø Selanjutnya kita akan mengetikkan script pada file activity_main.xml. Cara membuka file activity_main.xml yaitu kita buka terlebih dahulu folder res, kemudian kita buka fodler layout, setelah itu kita buka file activity_main.xml. Silahkan ketikan script dibawah ini :

Ø Kemudian kita jalankan emulatornya, maka akan memunculkan tampilan seperti gambar dibawah ini :

Tutorial Event Handing Pada Android Studio

Event Handling adalah suatu metode untuk menangani sebuah event/aksi yang diberikan pengguna kepada suatu komponen GUI. Event adalah suatu peristiwa yang dipicu oleh pengguna pada suatu komponen, misalnya tombol ditekan. Dua paket yang biasa digunakan menangani kejadian adalah java.awt.event dan java.swing.event. Event handling dalam menangani event terbagi menjadi 3 macam yaitu Event Source, Event Listener, dan Event Handler.

1. Event Source

Event Source adalah komponen yang mendapatkan suatu event yang kemudian ditangkap oleh Event Listener. Event Source dapat dibedakan dari penamaan komponen itu sendiri, misalnya tombolSimpan, tombolhapus, dan lainnya. Dengan penamaan Event Source ini, Sebuah Event Listener akan dapat mendeteksi dari mana Event Listener tersebut berasal.

2. Event Listener

Event Listener digunakan untuk menangkap event yang terjadi pada komponen/Event Source.

3. Event Handler

Event Handler berupa blok method dari listener yang menentukan proses selanjutnya setelah komponen mendapatkan event. Misalkan pada event tombol Simpan ditekan, event listener akan menangkap event pada Event Source tombol Simpan, kemudian Event Handler akan menyimpan data yang didefinisikan pada blok Event Handler.

Setelah kita mengetahui ap aitu event handler pada android studio, maka kita langsung saja membuat sebuah project baru yang dimana di dalam projectnya itu kita membuat sebuah tombol button, Ketika tombol button di klik, maka akan muncul event handlernya.

1. Sebelum membuat project, alangkah baiknya kita buat terlebih dahulu project barunya, dengan caranya klik Create New Project

2. Kemudian kita pilih “Empty Activity” dan setelah itu klik next.

3. Selanjutnya kita konfigurasi project kita, disini saya menamakan sebuah namenya adalah Event Handler, kemudian untuk packagenya saya berikan namanya sultanbisri.blogspot.com, lalu saya menyimpan projectnya itu di D:\2021\semester6\ti3\handler, setelah itu kita pilih Bahasa pemrogramannya java dan minimum API nya adalah 21

Ø 4 Selanjutnya kita akan mengetikkan script pada file activity_main.xml. Cara membuka file activity_main.xml yaitu kita buka terlebih dahulu folder res, kemudian kita buka fodler layout, setelah itu kita buka file activity_main.xml. Silahkan ketikan script dibawah ini :

5. Setelah itu kita akan mengetikan lagi script untuk menampilkan pesan dari event handlernya, caranya silahkan untuk buka file yang sebelahnya yaitu MainActivity.java nya, kemudian ketikan script dibawah ini :

6. Kemudian kita jalankan emulatornya, Ketika sudah tampil emulatornya, maka silahkan klik pada tombol tersebut, berikut tampilannya :

Setelah kita mencoba untuk Latihan dari textview, edit text, image button, radiobutton dan radi group, serta Latihan Event Handler, maka kita langsung saja membuat sebuah Latihan yang dimana isi dari latihannya itu adalah memunculkan nama kita dari sebuah edit text, kemudian memunculkan alamat kita dari inputan radiobutton ke dalam textview, kita langsung saja ke Latihan berikutnya.

1. Sebelum membuat project, alangkah baiknya kita buat terlebih dahulu project barunya, dengan caranya klik Create New Project

2. Kemudian kita pilih “Empty Activity” dan setelah itu klik next.

3. Selanjutnya kita konfigurasi project kita, disini saya menamakan sebuah namenya adalah Modul3LatihanTugas, kemudian untuk packagenya saya berikan namanya sultanbisri.blogspot.com, lalu saya menyimpan projectnya itu di D:\2021\semester6\ti3\tugas3, setelah itu kita pilih Bahasa pemrogramannya java dan minimum API nya adalah 21

4. Selanjutnya kita akan mengetikkan script pada file activity_main.xml. Cara membuka file activity_main.xml yaitu kita buka terlebih dahulu folder res, kemudian kita buka fodler layout, setelah itu kita buka file activity_main.xml. Silahkan ketikan script dibawah ini :

6. Kemudian kita jalankan emulatornya, Ketika sudah tampil emulatornya, maka silahkan ketik pada edit text dan kemudian pilih pada radio button tersebut, berikut tampilannya :