Mengenal Nama Komponen UI Android Studio (1)

Assalamu alaikum warahmatullahi wabarakatu, salam sejahtera bagi kita semua, kali ini saya akan membahas bagaimana Mengenal Nama Komponen UI Android Studio Bagian- 1, banyak sekali referensi yang menjelaskan tentang Komponen UI Android Studio, dan di sini saya mengipmplementasikan bagaimanan Mengenal Nama Komponen UI Android Studio dengan harapan semoga tulisan ini akan menambah pengetahuan dan pemahaman kita bagaimana Mengenal Nama Komponen UI Android Studio Bagian- 1, Amin.

UI (User Interface) adalah komponen-komponen yang ada pada aplikasi android, secara umum UI meliputi activity. Semua yang berhubungan dengan UI pada aplikasi android biasanya berada pada lokasi res/layout/filename.xml.

1. 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

sebagai contoh script xml-nya adalah sebagai berikut:

<TextView

android:id="@+id/text_view_test"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="TextView with color red and size 18sp"

android:textcolor="red"

android:textsize="18sp"

2. EditText

EditText adalah elemen UI untuk memasukkan dan memodifikasi text, di dalam penerapannya atribut edittext seperti input type harus ditetapkan secara spesifik, sebagai contoh script xml-nya sebagai berikut:

<EditText

android:id="@+id/editText_nama"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:ems="10"

android:hint="Username"

android:inputType="text"

<EditText

android:id="@+id/editText_password"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:ems="10"

android:hint="Password"

android:inputType="text|textPassword"

Sebelumnya tentukan dahulu layout nya ke Linear layout

Berikut List Input Type yang lain:

3. Button

Button adalah UI elemen dimana user dapat meng-klik atau melakukan tap untuk menghasilkan sebuah action. Untuk menampilkan button di sebuah activity dapat menggunakan script xml sebagai berikut:

<Button

android:id="@+id/button_click"

android:layout_height="wrap_content"

android:layout_width="wrap_content"
android:layout_centerInParent="true"

android:text="CLICK HERE"

/>

Sebelumnya tentukan terlebih dahulu layout nya ke Relative layout

4. ImageView

ImageView adalah elemen yang biasa digunakan untuk menampilkan image file ke dalam aplikasi. Untuk menampilkan button di sebuah activity dapat menggunakan script xml sebagai berikut:

<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/sydney"
android:scaleType="centerCrop"
/>

Sebelumnya copy/ paste kan dahulu file image ke directory drawable

5. Radio Group dan Radio Button

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 seperti gambar contoh di atas, untuk menampilkan radio button dapat menggunakan script xml berikut:

<RadioGroup
android:id="@+id/rgrup_main1"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RadioButton
android:id="@+id/rbtn_pria"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Pria" />

<RadioButton
android:id="@+id/rbtn_wanita"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Wanita" />
</RadioGroup>

Sebelumnya gunakan tampilan Linear Layout

6. CheckBox

CheckBox sendiri biasa digunakan untuk menampilkan pilihan dimana kita bisa memilih lebih dari satu (multiple choice), berbeda dengan spinner atau radio button dimana kita hanya bisa memilih satu pilihan. contoh di atas adalah contoh menampilkan checkbox dengan script xml nya sebagai berikut:

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hobi : " />

<CheckBox

android:id="@+id/cbgame"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:checked="true"

android:text="Main Game" />

<CheckBox

android:id="@+id/cb_makan"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:checked="true"

android:text="Makan" />

<CheckBox

android:id="@+id/komik"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Baca Komik" />

Sebelumnya gunakan tampilan Linear Layout dengan orientasi vertical supaya object elemen tersusun ke bawah.

7. Spinner

Spinner biasa digunakan untuk menampilkan list data yang salah satu dari data yang ditampilkan , nantinya akan dipilih. seperti contoh tampilan spinner di atas dapat di tuliskan script xml nya sebagai berikut:

Isikan list data di file string yang berada di direktory /res/value, isi script berikut:

<string-array name="hobi">

<item>Makan</item>

<item>Baca Komik</item>

</string-array>

</resources>

Tambahkan elemen spinner di layout, bisa melalui design atau juga text, dengan script xml sebagai berikut:

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hobi"/>

<Spinner

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:entries="@array/hobi">

</Spinner>

Mengenal Nama Komponen UI Android Studio (1)

Belum ada Komentar untuk "Mengenal Nama Komponen UI Android Studio (1)"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel