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
- 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.
- 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.
- CARA MEMBUAT WIDGET DI ANDROID STUDIO
Terdapat 2 cara dalam pembuatan widget di android studio, yaitu:
- Drag and Drop
- Mengedit dengan XML
- TextView
TextView adalah salah satu widget yang digunakan untuk menampilkan Text ataupun angka serta simbol lainnya.
Cara membuat textview di android studio
- 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 |
- 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.
- 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” |
- 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.
- 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.
- 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.
- Ekstrak sumber daya string untuk string “Article Subtitle” yang di-hardcode atribut android:text dalam TextView ke article_subtitle.
- 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” |
- Ekstrak sumber daya string untuk “Article text” ke article_text, dan ekstrak sumber dimensi “5sp” ke line_spacing.
- 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
- url web
- memulai dengan membuat project Android baru di Android Studio terlebih dahulu.
- 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
- Pertama buat project baru pada Android Studio
- 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
- pertama kita buat project baru di Android Studio kita seperti biasa
- 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
- Pertama buat project baru pada Android Studio
- “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
- Pertama buat project baru pada Android Studio
- 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 :
- Pertama buat project baru pada Android Studio
- 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)