PEMROGRAMAN BERGERAK
“Widget”
DISUSUN OLEH:
1. ANDRE GUNAWAN (160402079)
2. DANNY AGUNG PRATAMA (160402010)
3. NOFRI MISALDI (160402033)
SEMESTER : V Reg-A
SISTEM INFORMASI
FAKULTAS ILMU KOMPUTER
UNIVERSITAS MUHAMMDIYAH RIAU
T.A 2018
1
KATA PENGANTAR
Segala puji bagi Allah SWT yang telah memberikan nikmat serta hidayah-Nya terutama
nikmat kesempatan dan kesehatan sehingga kami dapat menyelesaikan makalah kami yang
berjudul “Widget” ini. Shalawat serta salam kita sampaikan kepada Nabi besar kita
Muhammad SAW yang telah memberikan pedoman hidup yakni Al-Qur’an dan sunnah untuk
keselamatan umat di dunia.
Makalah ini merupakan salah satu tugas mata kuliah Pemrograman Bergerak di
program studi Sistem Informasi, Fakultas Ilmu Komputer pada Universitas Muhammadiyah
Riau. Selanjutnya penulis mengucapkan terima kasih yang sebesar-besarnya kepada Bapak
Syahril, S. Kom., M. Kom. selaku dosen pembimbing mata kuliah ini dan kepada segenap
pihak yang telah memberikan bimbingan serta arahan selama penulisan makalah ini.
Kami berharap semoga makalah ini dapat menambah pengetahuan dan pengalaman
untuk para pembaca. Bahkan kami berharap lebih jauh lagi agar makalah ini bisa pembaca
praktekkan dalam kehidupan sehari-hari.
Kami yakin masih banyak kekurangan dalam penyusunan makalah ini karena
keterbatasan pengetahuan dan pengalaman kami. Untuk itu kami sangat mengharapkan kritik
dan saran yang membangun dari pembaca demi kesempurnaan makalah ini.
Pekanbaru, 20 September 2018
Penyusun
2
DAFTAR ISI
Halaman Makalah…………………………………………………………………………... 1
Kata Pengantar……………………………………………………………………………… 2
Daftar Isi……………………………………………………………………………………. 3
TextView…………...………………………………………………………………………. 4
EditText………………...…………………………………………………………………... 6
CheckBox…………...……………………………………………………………………… 9
Button…..…………...……………………………………………………………………… 14
Radio Button………..……………………………………………………………………… 18
ImageView….……...……………………………………………………………………… 20
Daftar Pustaka……………………………………………………………………………… 27
3
Text View
Setiap aplikasi yang kita lihat sudah pasti tentu terdapat teks atau nama lain yang
sering akrab ditelinga kita adalah font maka dari itu Text View termasuk salah satu
widget yang paling banyak digunakan pada sebuah aplikasi android. Android sudah
memiliki font bawaan diantaranya : sans, monoscape, dan serif. Namun kita juga
bisa mengcustom font sesuai dengan keingingan kita.
Untuk menggunakan TextView kita bisa mengaplikasikan atribut-atribut penting yang
sering digunakan pada TextView diantaranya sebagai berikut :
Id
Atribut ini digunakan untuk memberikan nama pada TextView. Biasanya pada aplikasi
ada beberapa teks yang ingin di tampilkan dalam satu activity. Agar tidak terjadi error
maka kita harus memberikan nama unik atau id pada masing-masing teks tersebut.
Dengan menggunakan id bisa memudahkan kita saat mengatur layout untuk teks yang
akan ditampilkan di aplikasi. Penggunaan ID atau android:id :
<TextView
android:id="@+id/wak"
/>
Text Color
Warna teks sangat berpengaruh pada tampilan UI dan UX pada aplikasi android.
Untuk memberikan warna teks kita menggunakan atribut ini.
<TextView
android:textColor="#00ccff"
/>
Text Size
Atribut ini digunakan untuk memberikan ukuran pada teks yang ingin kita tampilkan
pada aplikasi.
<TextView
android:textSize="22sp"
/>
4
Text Appearance
Ini digunakan untuk mengubah ukuran teks yang digunakan untuk heading atau sub
heading.
<TextView
android:textAppearance="?android:attr/textAppearanceLarge"
/>
Text Style
Kadang ada beberapa style yang ingin kita gunakan saat menampilkan teks yaitu bold
dan italic.
<TextView
android:textStyle="bold"
/>
Type Face
Dengan atribut ini kita bisa memilih tipe font bawaan yang disebutkan tadi diatas yaitu
serif, monoscape, dan sans.
<TextView
android:typeface="monospace"
/>
Text Aligment
Digunakan untuk melakukan pengaturan posisi teks (perataan).
<TextView
android:textAlignment="center"
/>
5
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. EditText dapat digunakan untuk mengubah teks
dan juga dapat digunakan untuk memasukkan input berupa hint, password , dan lain-
lain.
Penggunaan EditText dapat kita tambahkan ke dalam layout dengan kode XML
berikut:
<EditText
android:id="@+id/et_simple"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</EditText>
Perlu diketahui EditText memiliki properti yang sama dengan TextView. Pengambilan
teks yang dimasukkan lewat EditText dapat kita lakukan di Java dengan kode:
EditText simpleEditText = (EditText) findViewById([Link].et_simple);
String strValue = [Link]().toString();
Penyesuaian Input Type
Kita dapat menentukan aturan-aturan khusus untuk mendapatkan masukan dari
pengguna dengan mengatur atribut android:inputType. Dengan atribut ini kita bisa
meminta informasi nomor telepon, password, angka, dll.
Berikut input type paling umum:
Tipe Deskripsi
textUri Teks yang akan dipakai sebagai URI
textEmailAddress Teks yang akan dipakai sebagai alamat email
6
Tipe Deskripsi
textPersonName Teks yang akan sebagai nama orang
Teks yang akan dipakai sebagai password dan
textPassword
dirahasiakan
number Pengguna hanya dapat memasukkan angka
phone Untuk memasukkan nomor telepon
date Untuk mengisi tanggal
time Untuk mengisi waktu (jam)
textMultiline Untuk mengisi data teks yang terdiri dari beberapa baris
Warna Background
Kita dapt menyesuaikan warna background dari teks terpilih di EditText dengan
atribut android:textColorHighlight:
<EditText
android:textColorHighlight="#7cff88"
/>
Membatasi Baris dan Karakter
Kita dapat memaksa pengguna hanya memasukkan satu baris teks:
<EditText
android:maxLines="1"
android:lines="1"
/>
7
Kita dapat membatasi jumlah karakter dengan:
<EditText
android:maxLength="5"
/>
Menampilkan HINT
Kita mungkin perlu memberitahu pengguna apa yang harus mereka masukkan:
<EditText
...
android:hint="@string/my_hint">
</EditText>
8
CheckBox
CheckBox adalah salah satu widget yang berfungsi sebagai komponen User
Interface (Antar Muka), yang berfungsi sebagai daftar menu. Di Android, kita bisa
menggunakan class [Link] untuk menampilkan CheckBox view.
CheckBox sendiri biasa digunakan untuk menampilkan pilihan, dimana kita bisa
memilih lebih dari satu (multiple choices), berbeda dengan Spinner atau
RadioButton dimana kita hanya bisa memilih satu item saja (single choice).
Contoh penggunaan checkbox di layout :
<CheckBox
android:id="@+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Setuju"
/>
<CheckBox
android:id="@+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buat WIDGET"
/>
Sedangkan pemanggilan di javanya :
cb1 = (CheckBox)findViewById([Link].cb1);
cb2 = (CheckBox)findViewById([Link].cb2);
9
Contoh Aplikasi Penggunaan Widget TextView, editText dan
checkbox.
Pada activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:text="Widget Wak"
android:typeface="monospace"
android:textColor="#00ccff"
android:textColorLink="#8DE67F"
android:id="@+id/wak"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAlignment="center"
android:textSize="22sp" />
<EditText
android:id="@+id/firstName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Masukan Nama Pertama" />
<EditText
android:id="@+id/lastName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
10
android:layout_marginTop="16dp"
android:hint="Masukan Nama Terakhir" />
<CheckBox
android:id="@+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Setuju"
/>
<CheckBox
android:id="@+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buat WIDGET"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:onClick="display"
android:text="Tampil" />
<TextView
android:id="@+id/displayName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:textColor="#3498db"
android:textSize="22sp" />
</LinearLayout>
11
Dan Pada [Link] :
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends AppCompatActivity{
CheckBox cb1;
CheckBox cb2;
EditText firstName, lastName;
TextView displayname;
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
firstName = (EditText) findViewById([Link]);
lastName = (EditText) findViewById([Link]);
cb1 = (CheckBox)findViewById([Link].cb1);
cb2 = (CheckBox)findViewById([Link].cb2);
displayname = (TextView) findViewById([Link]);
}
public void display(View view) {
String getFirstName = [Link]().toString();
String getLastName = [Link]().toString();
[Link]("Nama saya adalah " + getFirstName + " " + getLastName
);
}
}
12
Hasilnya :
13
Button
Pada bagian ini, akan dibahas 3 jenis button yang sering digunakan dalam
mengembangkan aplikasi di Android. Button tersebut antara lain Basic Button, Image
Button dan Toggle Button.
Basic Button
Button yang paling dasar di Android adalah [Link] ini hanya dapat
menangani event ketika buttondi tekan dengan menggunakan OnClickListener. Berikut ini
adalah potongan kode definisi pebuatan button dalam bentuk XML :
<Buttonandroid:id="@+id/ccbtn1"
android:text="Basic Button"
android:typeface="serif"
android:textStyle="bold"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
Berikut ini adalah potongan kode pemanggilan button menggunakan code Java:
Button btn = (Button)[Link]([Link].ccbtn1);
[Link](new OnClickListener(){
publicvoid onClick(View v){
finish();
}
});
Hasil potongan kode di atas adalah sebagai berikut:
Tampilan Basic Button.
14
Kode diatas menjelaskan tentang bagaimana event ketika button ditekan. Event tersebut
didaftarkan pada method setOnClickListener() dari ClassOnClickListener.
Didalam kode, listener dibuat untuk menangani event ketika button ditekan. Ketika button
ditekan method OnClick() otomatis langsung dieksekusi.
Image Button
Android mendukung image button [Link] image
button hampir sama dengan basic button. Berikut adalah potongan kode menggunakan
layout XML :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contoh Android ImageButton"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginTop="16dp"
android:elevation="4dp"
android:onClick="firstImageButton"
android:scaleType="centerInside"
android:src="@drawable/button1" />
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_marginTop="16sp"
android:elevation="4dp"
android:onClick="secondImageButton"
android:scaleType="centerCrop"
android:src="@drawable/button2" />
</LinearLayout>
15
Dan Pada [Link] :
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
}
public void firstImageButton(View view) {
[Link](getApplicationContext(), "Kalian telah memilih imagebutton
pertama", Toast.LENGTH_LONG).show();
}
public void secondImageButton(View view) {
[Link](getApplicationContext(), "Kalian telah memilih imagebutton
kedua", Toast.LENGTH_LONG).show();
}
}
Hasilnya :
16
Toggle Button
ToggleButton ini seperti check box atau radio button. Button ini mengarah pada
On dan Off. ToggleButton akan menampikan green-bar pada keadaan On dan grayed-
outbar pada keadaan Off. Selain itu juga, button akan bertuliskan On pada saat keadaan
On dan bertuliskan Off pada saat keadaan Off.
<ToggleButtonandroid:id="@+id/cctglBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toggle Button"/>
Selain itu, tulisan On-Off tersebut dapat diubah dengan android:textOn dan
android:textOff. Seperti yang terlihat pada potongan kode berikut:
<ToggleButtonandroid:id="@+id/cctglBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Run"
android:textOff="Stop"
android:text="Toggle Button"/>
Hasil potongan kode di atas adalah sebagai berikut:
Tampilan Toggle Button.
17
Radio Button
RadioButton memberikan pilihan kepada pengguna, namun pengguna hanya
dapat memilih satu item saja. Untuk membuat group dari RadioButton, pertama
buat RadioGroup kemudian tambahkan RadioButton ke dalam group. RadioButton
juga termasuk turunan dari View, Radio button banyak digunakan sebagai salah
satu user input selain EditText.
Berikut ini adalah potongan kode pemanggilan radiobutton menggunakan
layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="Contoh RadioButton Android"
android:textSize="20sp" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="Pilih makanan favorit:"
android:textSize="15sp" />
<RadioGroup
android:id="@+id/rg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<RadioButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/rbbaso"
android:text="Baso Tahu"
/>
18
<RadioButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/rbMie"
android:text="Mie Ayam"
/>
</RadioGroup>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center|bottom"
android:text="MIE AYAM MAAL"
android:textColor="#2ecc71"
android:textSize="29sp" />
</LinearLayout>
Berikut ini adalah potongan kode pemanggilan RadioButton menggunakan code Java:
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends AppCompatActivity implements
OnCheckedChangeListener {
RadioButton rb1,rb2;
RadioGroup rg;
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
rg = (RadioGroup)findViewById([Link]);
rb1 = (RadioButton)findViewById([Link]);
rb2 = (RadioButton)findViewById([Link]);
[Link](this);
}
public void onCheckedChanged(RadioGroup group,
int checkedId) {
if(checkedId==[Link])
{
[Link](this, "Anda Membeli Baso Tahu",
Toast.LENGTH_SHORT).show();
}
if(checkedId==[Link])
{
[Link](this, "Anda Membeli Mie Ayam",
Toast.LENGTH_SHORT).show();
}
}
}
19
Hasilnya :
Image View
ImageView adalah komponen dasar android yang tugasnya menampilkan gambar.
Gambar di komponen imageview bisa diambil dari Assets atau dari Drawable.
Cara penggunaannya yaitu :
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:src="@drawable/my_image" />
20
View ini secara umum akan memuat gambar dari drawable bernama my_image.
Atribut scaleType memungkinkan kita untuk memposisikan sebuah gambar di dalam
ImageView.
Mengatur Ukuran ImageView
ImageView dapat memiliki tinggi dan lebar yang sudah ditentukan sejak awal.
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="fitXY"
...
/>
Atribut scaleType akan memaksa gambar untuk menurunkan tinggi dan lebarnya agar
sama dengan layout_width dan layout_height (dalam hal ini 50dp).
Kita dapat memuat gambar yang memiliki lebar atau tinggi menyesuaikan ukuran yang
ditentukan (aspek rasio) dengan memanfaatkan parameter adjustViewBounds.
<ImageView
android:layout_width="50dp"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
...
/>
Scala Type
Sebuah ImageView dapat menampilkan gambar berdasarkan atribut scaleTypeyang
diberikan. Berikut ini beberapa properti atribtu scaleType:
21
Scale Type Deskripsi
Menampilkan gambar ditengah view tanpa merubah
center
skalanya.
Merubah skala gambar sehingga dimensi x dan y lebih besar
centerCrop atau sama dengan view dengan menjaga aspek rasionya,
lalu menampilkan gambar ditengah view.
Merubah skala gambar agar pas di dalam view dengan
centerInside menjaga aspek rasionya. Jika ukuran gambar lebih kecil dari
view, maka hasil yang didapatkan sama seperti center.
Menampilkan gambar agar pas berada didalam view dengan
fitCenter menjaga aspek rasionya. Setidaknya akan ada satu sisi yang
pas dengan view, lalu hasilnya ditampilkan di tengah.
Sama seperti fitCenter tapi sejajar dengan posisi kiri atas
fitStart
dari view.
Sama seperti fitCenter tapi sejajar dengan posisi kanan
fitEnd
bawah view
Merubah dimensi x dan y agar pas dengan ukuran view;
fitXY
aspek rasio gambar tidak dijaga.
Merubah skala gambar melalui kelas Matrix. Matrix ini
matrix dapat diberikan lewat method setImageMatrix. Kelas Matrix
dapat melakukan transformasi misalnya memutar gambar.
22
Berikut ini hasil penggunaan atribut ScaleType di atas.
Mendukung Beberapa Jenis Layar Sekaligus
Karena perangkat Android memiliki lebar layar, resolusi serta kerapatan layar
yang berbeda-beda, diciptakanlah sebuah sistem untuk memilih gambar yang paling
sesuai dengan ukuran perangkat yang memuatnya.
23
Ada folder-folder drawable khusus untuk setiap kerapatan layar diantaranya:
ldpi (resolusi rendah), mdpi (resolusi menengah), hdpi (resolusi tinggi), xhdpi (resolusi
lebih tinggi). DPI di sini merupakan singkatan dari dots per inch.
Untuk membuat jenis-jenis gambar yang berbeda ukuran, kita harus
memastikan aspek rasio 3:4:6:8 untuk jenis-jenis kerapatan. Perhatikan tabel di
bawah:
Kerapatan Layar DPI Contoh Perangkat Skala Piksel
ldpi 120 Galaxy Y 0.75px 1dp=0.75px
mdpi 160 Galaxy Tab 1.0x 1dp=1px
hdpi 240 Galaxy SII 1.5x 1dp=1.5px
xhdpi 320 Nexus 4 2.0x 1dp=2.0px
xxhdpi 480 Nexus 5 3.0x 1dp=3.0px
xxxhdpi 640 Nexus 6 4.0x 1dp=4px
Ini artinya jika kita membuat sebuah gambar dengan dimensi 100.100 untuk mdpi,
maka kita harus membuat gambar yang sama dengan dimensi 150x150 (1.5x) untuk
hdpi, 200x200 untuk xhdpi (2x), 300x300 (3x) dan 75x75 (0.75x) untuk ldpi.
24
Bitmap
Kita dapat mengubah bitmap yang ditampilkan oleh ImageView dengan cara:
ImageView image = (ImageView) findViewById([Link].test_image);
[Link]([Link].test2);
Untuk mengatur skala Bitmap di Java kita perlu memanggil method
createScaledBitmap untuk mengatur tinggi dan lebar yang diinginkan.
// Baca bitmap dari folder drawable
Bitmap bMap = [Link](getResources(), [Link].my_image);
// Atur ukuran bitmap to 150x100 (lebar x tinggi)
Bitmap bMapScaled = [Link](bMap, 150, 100, true);
// Baca bitmap yang telah diubah ukurannya ke ImageView
ImageView image = (ImageView) findViewById([Link].test_image);
[Link](bMapScaled);
Contoh ImageView , layout xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/simpleImageViewLion"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:scaleType="fitXY"
android:src="@drawable/lion" />
<ImageView
android:id="@+id/simpleImageViewMonkey"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:layout_below="@+id/simpleImageViewLion"
android:layout_marginTop="10dp"
android:scaleType="fitCenter"
android:src="@drawable/monkey" />
</RelativeLayout>
25
Pemanggilan dengan .java :
package [Link].imageview1;
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
ImageView simpleImageViewLion = (ImageView)
findViewById([Link]);//get the id of first image view
ImageView simpleImageViewMonkey = (ImageView)
findViewById([Link]);//get the id of second image view
[Link](new [Link]() {
@Override
public void onClick(View view) {
[Link](getApplicationContext(), "Lion",
Toast.LENGTH_LONG).show();//display the text on image click event
}
});
[Link](new [Link]() {
@Override
public void onClick(View view) {
[Link](getApplicationContext(), "Monkey",
Toast.LENGTH_LONG).show();//display the text on image click event
}
});
}
Hasilnya :
26
DAFTAR PUSTAKA
[Link]
[Link]
[Link]
fundamentals-course-concepts/details
[Link]
27