PMO18-TI16S-P4-Pengenalan Widget View-CHARIR MAULANA ACHSAN

PEMROGRAMAN MOBILE 1

KELOMPOK 5

Charir Maulana Achsan                  16.11.0217

Bagus Anjas P                                16.11.0221

Mustofa Bayu Rahmat                    16.11.0245

Esa Rizki Anandrian                       16.11.0248

Danang Aldy Kurniawan                 16.11.0267

Tri Wahyono                                    16.11.0284

Sarif Hidayatulloh                            16.11.0286

Muchamad Arief Sidik                     16.11.0296

Adent Bima Prasetya                      16.11.0301

Dhimas Galih Prasetyo                   16.11.0308

Eva Faiza                                         16.11.0317

Ikhsan Setiawan                              16.11.0344

KELAS TI 16 S

—————————————————————————————————————————————————–

PERTEMUAN 3

Pengenalan Widget View

  • Dasar pembuatan widget
  • TextView
  • EditText
  • Button
  • RadioButton
  • RatingBar
  • GridView
  • ImageButton
  1. DASAR PEMBUATAN WIDGET

Pada dasarnya widget memiliki fungsi sebagai antarmuka untuk berinteraksi dengan pengguna. Tujuannya yaitu untuk memberikan suatu proses pada aplikasi hasil dari aksi yang dilakukan pengguna seperti menekan tombol, memilih menu, dan sebagainya.

  1. MACAM-MACAM WIDGET VIEW

terdiri dari banyak jenis seperti TextView, EditText, Button, RadioButton, dan sebagainya. Gambar dibawah ini merupakan komponen-komponen widget yang disediakan oleh android studio.

  1. CARA MEMBUAT WIDGET DI ANDROID STUDIO

Terdapat 2 cara dalam pembuatan widget di android studio, yaitu:

  1. Drag and Drop
  2. Mengedit dengan XML
  1. TextView

TextView adalah salah satu widget yang digunakan untuk menampilkan Text ataupun angka serta simbol lainnya.

Cara membuat textview di android studio

  1. Di android studio buatlah projek baru dengan parameter berikut :

 

Atribut Nilai
Application Name Scrolling Text
Company Name android.example.com (atau domain Anda sendiri)
Phone and Tablet Minimum SDK API15: Android 4.0.3 IceCreamSandwich
Template Empty Activity
Generate Layout File checkbox Dicentang

 

  1. Pada folder app > res > layout, buka file activity_main.xml, dan klik tab Text untuk melihat kode XML jika belum dipilih. Di bagian atas, atau root, hierarki tampilan adalah ViewGroup yang disebut RelativeLayout. Seperti ViewGroup lainnya, RelativeLayout adalah tampilan yang berisi tampilan lainnya. Selain itu, tampilan ini juga memungkinkan Anda untuk memposisikan Tampilan anak relatif terhadap satu sama lain atau relatif terhadap RelativeLayout induk itu sendiri. Elemen TextView “Hello World” default yang dibuat oleh template Empty Layout adalah Tampilan anak dalam grup tampilan RelativeLayout. Untuk informasi selengkapnya tentang cara menggunakan RelativeLayout, lihat Panduan API RelativeLayout.
  2. Tambahkan elemen TextView di atas TextView “Hello World”. Saat Anda memasukkan <TextView to start a TextView, Android Studio automatically adds the ending />, which is shorthand for </TextView> . Tambahkan atribut-atribut berikut ke TextView:

 

Atribut #1 TextView Nilai
android:id “@+id/article_heading”
layout_width “match_parent”
layout_height “wrap_content”
android:background “@color/colorPrimary”
android:textColor “@android:color/white”
android:padding “10dp”
android:textAppearance “@android:style/TextAppearance.Large”
android:textStyle “bold”
android:text “Article Title”

 

 

  1. Ekstrak sumber daya string untuk string yang di-hardcode “Article Title” atribut android:text dalam TextView untuk membuat entri untuknya di strings.xml Letakkan kursor di string yang di-hardcode, tekan Alt-Enter (Option-Enter di Mac), dan pilih Extract string resource. Lalu edit nama sumber daya untuk nilai string ke article_title.

 

  1. Ekstrak sumber daya dimensi untuk string “10dp” hard-code atribut android:padding dalam TextView untuk membuat entri di dimens.xml.Letakkan kursor di string hard-code, tekan Alt-Enter (Option-Enter di Mac), dan pilih Extract dimension resource. Lalu edit name Sumber Daya ke padding_regular.

 

  1. Tambahkan elemen TextView TextView di atas “Hello World” TextView bawah TextView yang Anda buat pada langkah sebelumnya. Tambahkan atribut-atribut berikut ke TextView:
Atribut #2 TextView Nilai
android:id “@+id/article_subheading”
layout_width “match_parent”
layout_height “wrap_content”
android:layout_below “@id/article_heading”
android:padding “@dimen/padding_regular”
android:textAppearance “@android:style/TextAppearance”
android:text “Article Subtitle”

Perhatikan karena Anda mengekstrak sumber daya dimensi untuk string “10dp” ke padding_regular pada TextView yang sebelumnya dibuat, Anda bisa menggunakan “@dimen/padding_regular” untuk atribut android:padding dalam TextView ini.

  1. Ekstrak sumber daya string untuk string “Article Subtitle” yang di-hardcode atribut android:text dalam TextView ke article_subtitle.
  2. Tambahkan atribut-atribut TextView berikut ke elemen TextView “Hello World”, dan ubah atribut android:text:

 

Atribut TextView Nilai
android:id “@+id/article”
android:lineSpacingExtra “5sp”
android:layout_below “@id/article_subheading”
android:text Ubah ke “Article text”
  1. Ekstrak sumber daya string untuk “Article text” ke article_text, dan ekstrak sumber dimensi “5sp” ke line_spacing.
  2. Format ulang dan ratakan kode dengan memilih Code > Reformat Code. Sebaiknya format ulang dan ratakan kode agar memudahkan Anda dan orang lain memahaminya

2. Edit Text

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.

Cara membuat Edit text di android studio

Kita akan belajar untuk mem-format EditText supaya bisa menerima inputan text berupa :

  • text biasa
  • angka
  • nomor telepon
  • password
  • email
  • url web
  1. memulai dengan membuat project Android baru di Android Studio terlebih dahulu.
  2. Jika sudah, bisa langsung buka file xmlpada project yang telah kalian buat, dan masukkan kode berikut :

activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:orientation=”vertical”

android:padding=”15dp”>

 

<EditText

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:hint=”Masukkan Text Biasa”

android:inputType=”text” />

<EditText

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:hint=”Masukkan Angka”

android:inputType=”number” />

 

<EditText

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:hint=”Masukkan Nomor Telepon”

android:inputType=”phone” />

 

<EditText

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:hint=”Masukkan Password”

android:inputType=”textPassword” />

 

<EditText

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:hint=”Masukkan Email”

android:inputType=”textEmailAddress” />

 

<EditText

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:hint=”Masukkan URL”

android:inputType=”textUri” />

</LinearLayout>

Kode di atas sudah lumayan jelas, jadi untuk menerima berbagai macam jenis text, kita bisa menggunakan attribut inputType pada EditText, dan mengubahnya sesuai dengan data text yang ingin kita masukkan.

Lebih jelasnya untuk masing-masing tipe text di bawah ini, kita harus mengubah inputType seperti berikut :

  • text biasa => inputType : text
  • angka => inputType : number
  • nomor telepon => inputType: phone
  • password => inputType: password
  • email => inputType: textEmailAddress
  • url web => inputType: textUri

Dengan menggunakan InputType, selain berfungsi untuk menspesifikasikan data yang ingin kita inputkan, InputType juga akan mengubah bermacam hal, seperti layout keyboard, dan tampilan text. Untuk InputType number, maka layout keyboard Android kita akan berubah hanya menampilkan angka, begitu halnya dengan InputType email, layout keyboard kita akan menampilkan simbol ‘@’ yang mudah diakses. Sedangkan untuk InputType password, maka apa yang kita ketikkan tidak akan tampil pada EditText, hanya ada titik-titik.

3. Button

Button adalah sebuah Elemen antarmuka pengguna yang dapat diketuk atau klik oleh pengguna untuk melakukan suatu tindakan. Sebuah tombol terdiri dari teks atau ikon (atau teks dan ikon) yang mengkomunikasikan tindakan apa yang terjadi ketika pengguna menyentuhnya.

 

Contoh pembuatan Button

  1. Pertama buat project baru pada Android Studio
  2. Untuk contoh sederhananya, kita akan menggunakan 1 Button terlebih dahulu, cara membuatnya kita perlu menambahkan tag <Button> menggunakan kode xml atau bisa langsung mendragnya, pada activity_main.xml.

 

Berikut contoh kodingnya :

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:gravity=”center”

android:orientation=”vertical”

tools:context=”android.cianjur.developer.net.basicandroid.MainActivity”>

 

<Button

android:id=”@+id/testing”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”Klik Disini” />

 

</LinearLayout>

Ada beberapa atribut yang di gunakan pada button tersebut, diantaranya:

  • android:id: Untuk menginisialisasi id pada Button tersebut.
  • android:layout_width: Untuk mengatur lebar widget.
  • android:layout_height: Untuk mengatur tinggi widget.
  • android:text: Untuk menambahkan text pada widget.

 

4. RADIO BUTTON

Radio Button adalah salah satu elemen layout di Android yang sering dipakai, yang biasanya berfungsi untuk menginputkan data yang berupa pilihan dan hanya satu saja yang bisa dipilih, contoh: memilh Jenis Kelamin atau pilihan Yes or No

Contoh Pembuatan Radio Button

  1. pertama kita buat project baru di Android Studio kita seperti biasa
  2. lalu kita masuk ke activity_main.xml dan masukkan kode berikut:

<?xml version=”1.0″ encoding=”utf-8″?>

 

<LinearLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”

android:id=”@+id/activity_main”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:paddingBottom=”@dimen/activity_vertical_margin”

android:paddingLeft=”@dimen/activity_horizontal_margin”

android:paddingRight=”@dimen/activity_horizontal_margin”

android:paddingTop=”@dimen/activity_vertical_margin”

tools:context=”app.com.example.android.image.MainActivity”

android:orientation=”vertical”>

 

 

<TextView

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:layout_gravity=”center_horizontal”

android:textColor=”#000000″

android:textSize=”30dp”

android:text=”Siapa nama tokoh utama di Anime Naruto”/>

 

 

<RadioGroup

android:id=”@+id/rbgrup”

android:layout_marginTop=”50dp”

android:onClick=”radiocheked”

android:layout_gravity=”center_horizontal”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”>

<RadioButton

android:id=”@+id/naruto”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”Naruto”/>

<RadioButton

android:id=”@+id/sasuke”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”Sasuke”/>

<RadioButton

android:id=”@+id/sakura”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”Sakura”/>

</RadioGroup>

</LinearLayout>

5. RATING BAR

Widget ini berfungsi untuk memberi nilai dalam suatu kontent. Widget ini banyak digunakan bagi penyedia konten untuk melihat, atau mereview penilaian dari user (pengguna) konten tersebut.Biasanya ini ditemukan di Play Store,

 

Contoh pembuatan Rating Bar menggunakan android Studio

  1. Pertama buat project baru pada Android Studio
  2. “Drag and Drop” dari komponen yang tersedia atau langsung menuliskan script XML. Untuk script XMLdapat dituliskan seperti berikut.

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”android:layout_width=”match_parent”

 

android:layout_height=”match_parent”android:paddingLeft=”@dimen/activity_horizontal_margin”

android:paddingRight=”@dimen/activity_horizontal_margin”

android:paddingTop=”@dimen/activity_vertical_margin”

android:paddingBottom=”@dimen/activity_vertical_margin” tools:context=”.MainActivity”>

 

<RatingBar

android:id=”@+id/ratingBar1″

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_alignParentTop=”true”

android:layout_centerHorizontal=”true”

android:layout_marginTop=”25dp” />

<TextView

android:id=”@+id/txtRatingValue”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_below=”@+id/ratingBar1″

android:layout_centerHorizontal=”true”

android:layout_marginTop=”25dp”

android:text=”Rating”

android:textSize=”40sp” />

</RelativeLayout>

6. GRID VIEW

GridView adalah salah satu container, yang digunakan untuk menampilkan konten View, konten View dalam GridView akan tersusun bentuk kotak-kotak seperti sebuah rak lemari, , yang dimana kita dapat menyimpan barang-barang. Penulisan coding beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yang ditampilkan secara Grid atau Kotak-kotak.

 

Contoh pembuatan Grid View

  1. Pertama buat project baru pada Android Studio
  2. Buka file activity_main.xml kalian, disini kita akan mengatur layout untuk tampilan GridView pada activity kita.

<?xml version=”1.0″ encoding=”utf-8″?>

<GridView xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”

android:id=”@+id/gridview”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:background=”#FFF5F5F5″

android:columnWidth=”90dp”

android:gravity=”center”

android:horizontalSpacing=”10dp”

android:numColumns=”auto_fit”

android:stretchMode=”columnWidth”

android:verticalSpacing=”10dp”

tools:context=”android.cianjur.developer.net.basicandroid.MainActivity”>

</GridView>

Penjelasan pada atribut-atribut yang digunakan diatas:

android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.

android:gravity : Menentukan gravitasi di dalam setiap sel.

android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris.

android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang kosong, jika ada.

android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.

android:numColumns : Menentukan berapa kolom yang akan ditampilkan.

7. IMAGE BUTTON

ImageButton adalah salah satu widget dari komponen User Interface yang berfungsi untuk menampilkan gambar, namun tidak hanya gambar, ImageView bisa juga kita navigasikan menjadi sebuah Button

 

Contoh Pembuatan Image Button pada Android Studio :

  1. Pertama buat project baru pada Android Studio
  2. buka file activity_main.xml pada project kalian, disini kita akan menambahkan 1 buah ImageButton sebagai contohnya, sebelum itu saya sarankan kalian sudah menyiapkan gambar yang ingin digunakan, Gambar tersebut bisa kalian simpan pada direktori drawable.

<?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:layout_marginLeft=”16dp”

android:layout_marginRight=”16dp”

android:background=”#FFF5F5F5″

android:gravity=”center”

android:orientation=”vertical”

tools:context=”android.cianjur.developer.net.basicandroid.MainActivity”>

 

<ImageButton

android:id=”@+id/technoart”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:elevation=”4dp”

android:scaleType=”centerInside”

app:srcCompat=”@drawable/logomeduim” />

 

</LinearLayout>


LINK MATERI MS WORD: PEMROGRAMAN MOBILE 1 (PERTEMUAN 4)

LINK MATERI POWER POINT: PEMROGRAMAN MOBILE 1 (PERTEMUAN 4)