Belajar Android Studio (3)

 

PENGENALAN KOMPONEN UI PADA ANDROID STUDIO

 

User Interface merupakan sesuatu yang bisa dilihat oleh user dan berfungsi sebagai media bagi user berinteraksi dengan perangkat. Activity menggunakan method setContentView(R.layout.namafilexml) untuk merender tampilan pada layar perangkat. Komponen User Interface terbagi menjadi beberapa kategori :

1. Layout : Layout merupakan perluasan dari kelas ViewGroup. Layout berfungsi sebagai wadah komponen lainnya. Layout mengatur bagaimana komponen lainnya akan ditampilkan. Jenis-jenis layout yaitu LinearLayout, RelativeLayout, FrameLayout, TableLayout, dan GridLayout.

2. Widget : Widget terdiri dari Button, Checkbox, Textview, Switches, Imageview, Progress bar, spinner, dan Webview. Widget disebut juga dengan UI Control.

3.    Text Field : Dengan komponen ini user dapat melakukan input teks.

4. Container : Merupakan komponen yang umum digunakan untuk menampilkan komponen-komponen yang sama. Beberapa container yaitu radio group, list view, scroll view.

5.    Date & Time : Komponen ini digunakan untuk menampilkan tanggal dan waktu

 

Untuk mempermudah dalam pengelompokan, maka Views dikelompokkan menjadi :

1)    Basic Views : Basic view merupakan objek View dasar yang meliputi Widget (Control) dan TextField

2)     Picker Views : Merupakan View yang menyediakan list untuk dipilih user, seperti TimePicker dan DatePicker.

3)     List Views : Merupakan View yang menampilkan item list yang panjang, seperti ListView dan SpinnerView

KOMPONEN UI - BASIC VIEW

Yang akan kita pelajar pada Latihan ini, yaitu :

ü Cara menggunakan “Basic View” untuk mendesain UI

ü Cara mendapatkan referensi objek yang kita tambahkan di xml

ü Menambahkan event handler pada objek View

"Basic View" yang akan kita kenali yaitu :

1)   TextView

2)   EditText

3)   Button

4)   ImageButton

5)   ImageView

6)   Checkbox

7)   ToggleButton

8)   RadioButton

9)   RadioGroup

a.    Atribut

Untuk menentukan bagaimana objek View akan ditampilkan di layar maka kita perlu menambahkan atribut pada objek View.

Kita dapat menambahkan atribut pada tag xml.

Contoh : Mengatur atribut panjang dan tinggi suatu View dapat kita tentukan dengan menuliskan kode di bawah

android:layout_width="match_parent" android:layout_height="wrap_content"

b.   Identifier

Kita menggunakan atribut “id” pada tag xml untuk memberikan identifier pada objek View kita. Id tersebut akan kita gunakan untuk mereferensikan objek tersebut. Gunakan atribut id=”@+id/namaId” untuk menambahkan id pada objek View.

 

·      Komponen TextView

TextView adalah elemen pada android studio yang digunakan untuk menampilkan output berupa text pada UI sesuai dengan tampilan gambar di atas, textview dilengkapi oleh banyak atribut-atribut yang antara lain dan biasa di gunakan sebagai berikut:

Ø text: Text yang akan ditampilkan

Ø textsize: Ukuran text

Ø textcolor: Warna text

Ø textALLCAPS: Menampilkan text semuanya kapital

Ø textStyle: Style (Normal, Bold, Italic, BoldItalic) untuk text

 

1.   Pertama jalankan aplikasi IDE Android Studio, caranya :

a.    Pilih Start à Android Studio

b.   Pilih à Start a new Android Studio Project

c.    Pilih à  Empty Activity à Next

Configure Your Project

Name à LatihanTextView

Package Name à  Biarakn Apa Adanya

Save Location à C:\Users\ACER\AndroidStudioProjects\NamaFolder\LatihanTextView Language à Java

Minimum API Level à API 16 à Klik Finish

 

2. Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml seperti text di bawah ini:

 

3.   Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

·      Komponen EditText

EditText adalah elemen UI untuk memasukkan dan memodifkasi text, di dalam penerapannya atribut edittext seperti input type harus ditetapkan secara spesifik,

1.      Pertama jalankan aplikasi IDE Android Studio, caranya :

a.    Pilih Start à Android Studio

b.   Pilih à Start a new Android Studio Project

c.    Pilih à Empty Activity à Next

Configure Your Project

   Name à LatihanTextView

   Package Name à  Biarakn Apa Adanya

   Save Location à C:\Users\ACER\AndroidStudioProjects\NamaFolder\LatihanEditText 

   Language à Java

   Minimum API Level à API 16 à Klik Finish

2. Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml seperti text di bawah ini:

3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

 

·      Komponen Button & Image

Komponen Button adalah UI elemen dimana user dapat meng-klik atau melakukan tap untuk menghasilkan sebuah action. Dan Komponen ImageView adalah elemen yang biasa digunakan untuk menampilkan image file ke dalam aplikasi.

1.   Pertama jalankan aplikasi IDE Android Studio, caranya :

a.    Pilih Start à Android Studio

b.   Pilih à Start a new Android Studio Project

c.    Pilih à Empty Activity à Next

Configure Your Project

 

Name à LatihanButtonImage

Package Name à  Biarkan Apa Adanya

Save Location à  C:\Users\ACER\AndroidStudioProjects\NamaFolder\LatihanButtonImage Language à  Java

Minimum API Level à API 16 à Klik Finish

2.   Maka akan Tampil IDE Android Studio, siapkan sebuah file jpg/image jika bisa gunakan foto anda dengan resolusi kecil saja, buka file Explore dan copy file yang akan digunakan

 

3.   Setelah itu buka project di android studio Kembali, lalu cari folder Res/Drawable/ di dalam stuktur folder project kita. Lalu kilik kanan pada folder Drawable Pilih Paste

 

4.   Klik OK pada pilihan tempat penyimpanan file kita dan beri/ubah nama file kita, jangan menggunakan spasi dalam penamaan file, karena naninya akan menjadi kendala dalam peanggilan file tersebut Ketika app android kita akan di jalankan

5.   Ketikan script pada file activity_main.xml seperti text di bawah ini:

Untuk bentuk desain dan blueprint nya kurang lebih akan seperti gambar di bawah ini

 

6.   Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

 

 

·      Komponen RadioButton

Komponen RadioGroup dan RadioButton adalah elemen yang telah disediakan oleh Android Studio yang biasa digunakan untuk menampilkan pilihan yang akan dipilih berupa satu lingkaran kecil dengan titik ditengahnya, yang nantinya akan digunakan sebagai opsi input

1.   Pertama jalankan aplikasi IDE Android Studio, caranya :

a.    Pilih Start à Android Studio

b.   Pilih à Start a new Android Studio Project

c.    Pilih à Empty Activity à Next

Configure Your Project

Name à  RadioButtonGrup

Package Name à Biarakn Apa Adanya

Save Location à C:\Users\ACER\AndroidStudioProjects\NamaFolder\RadioButtonGrup Language à  Java

Minimum API Level à  API 16 à Klik Finish

2. Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml seperti text di bawah ini:

 

3.   Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

·      Button

1.   Pertama jalankan aplikasi IDE Android Studio, caranya :

    a.    Pilih Start à Android Studio

    b.   Pilih à  Start a new Android Studio Project

    c.    Pilih à  Empty Activity à Next

    Configure Your Project

2. Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml seperti text di bawah ini:

Cara mendapatkan referensi objek dan menambahkan event handler

Kita menggunakan atribut “id” pada tag xml untuk memberikan identifier pada objek View kita. Id tersebut akan kita gunakan untuk mereferensikan objek tersebut. Dan untuk menambahkan event handler klik pada tombol, gunakan interface setOnClickListener(...).

3.   Selanjutnya Ketikan script pada file MainActivity.java seperti text di bawah ini:

4.   Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

à

Latihan Tugas

 

 Output

setelah button "KLIK" di klik, maka tampilannya akan seperti dibawah ini

 

 

 

 

 

 

 

 

 

Read More →