Modul Pelatihan User Interface dan Pembu

Modul Pelatihan User Interface dan
Pembuatan Aplikasi Android
Kementerian Perindustrian Republik Indonesia
Silabus :


Installing Software



Create Project



Struktur projek



Hello world



Layouting halaman interface (padding, margin, weight, size, color)



onclick listener : Toast, Snackbar, Alert Dialog, Intent



Mengganti icon



Splashscreen



Pindah antar Activity



Menu Utama



Item menu tentang

INSTALLING SOFTWARE
Untuk dapat menggunakan aplikasi Android Studio ini ada beberapa software yang diperlukan
yakni Java Development Kit (JDK) minimum versi 7 atau yang lebih tinggi dan software
Android Studio yang dapat di download melalui situs web http://developer.android.com.
1. Install Java Development Kit (JDK) versi 8 – 64 bit.
Berikut ini langkah – langkah untuk melakukan instalasi software Java Development Kit
(JDK) versi 8 – 64 bit pada windows :
a. Download software JDK melalui link berikut :
http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads1880260.html
b. Install Java JDK dan ingat path dimana file java disimpan.

c. Klik tombol windows dan type Environment Variables  klik Edit the system
Environment Variables. Pada jendela window akan tampil System Properties.

Kemudian klik Environment Variables.

d. Setelah itu klik New

e. Pada kolom pertama tulislah JAVA_HOME. Lihat lokasi dimana path java tadi di
install. Dan pada kolom kedua Variable_value isilah path lokasi java tersebut di
install.

f.

Setelah itu pilih OK.

Pemecahan masalah :
Jika terdapat error pada saat memulai install Android Studio, hal itu disebabkan karena
class java nya tidak ditemukan dan terdapat error yang berhubungan dengan path. Hal
yang harus dilakukan adalah buka Environment, cari JAVA_HOME yang telah
ditambahkan, kemudian masukkan path jre, bukan jdk.

INSTALL ANDROID STUDIO
Setelah berhasil melakukan proses install Java Development Kit (JDK), selanjutnya install

software Android Studio seperti langkah – langkah dibawah ini :
a. Double klik pada file android_studio.exe kemudian pilih NEXT

b. Kemudian muncul tampilan seperti dibawah ini :

Kemudian pilih NEXT

c. Setelah itu pilih Agree

d. Klik NEXT

e. Kemudian pilih alokasi RAM yang akan digunakan misalnya 3 GB. Kemudian pilih
NEXT

f.

Klik Install, setelah itu tunggu proses selesai

g. Klik Next

h. Setelah proses selesai KLIK NEXT

i.

Proses checking for Update SDK components.

j.

Proses check updated SDK components selesai, klik NEXT.

k. Proses instalasi selesai,

CREATE NEW PROJECT
1. Buka Aplikasi Android Studio
2. Buat Project baru dengan Pilih Start a new Android Studio project. Atau jika sudah
membuka project lain klik File NewNew Project

3. Isi nama Application Name dan Companion Domain. Kedua input ini akan menjadi
Package Name pada aplikasi anda. Package ini akan menjadi nama yang tetap dan
sebagai link ketika aplikasi anda diupload di Play Store nanti. Seperti contoh di bawah

ini,maka link pada Play Store akan menjadi
https://play.google.com/store/apps/details?id=com.ikitas.tebakbuah
Selain itu setting Project Location sebagai tempat peyimpanan project sesuai
keinginan anda.

4. Pilih Target Device dan Minimum SDK untuk aplikasi yang akan anda buat, pilih
Phone and Tablet dan Minimal SDK Gingerbread, kemudian pilih Next.

5. Pilih Empty Activity untuk project baru, pilih Next.

6. Secara default akan muncul setting sebagai berikut;

Activity Name
: MainActivity
Layout Name
: activity_main
Title
: MainActivity
Menu Resource Name : menu_main
Kita boleh mengganti isi dari setiap kolom tersebut sesuai yang kita inginkan. Namun

disini saya tetap memakai nama tersebut. Keudian Klik Finish. Maka Android Studio
akan membuka tampilan utama. Harap sabar ketika pertama kali membuat projek
karena membutuhkan waktu yang cukup lama sampai proses Gradle (cek) selesai.

STRUKTUR DIREKTORI PROJEK ANDROID STUDIO
Setelah Anda membuka projek, maka Anda akan melihat banyak sekali folder yang otomatis
dibuat di sebelah panel kiri. Nah, alangkah baiknya jika kita memahami terlebih dahulu apa
maksud dari adanya folder-folder tersebut. Mari kita simak satu-satu :

1. Manifest

Pada folder ini terdapat satu file yaitu
AndroidManifest.xml, adalah file yang
berfungsi untuk mengatur nama aplikasi,
icon aplikasi, tema aplikasi, dan juga
mengatur Activity mana yang akan
dijalankan pertama kali. Selain itu juga
untuk mengatur permission aplikasi
tersebut.
2. Java

Di dalamnya folder app kita, dan folder
AndroidTest. AndroidTest digunakan untuk
mengecek tanpa menjalankan aplikasinya,
sedangkan folder yang biasa berisi file
utama MainActivity, yaitu tempat kita
ngoding alias menulis source code untuk
memberikan perintah tertentu pada aplikasi
yang kita buat.
3. Res

Singkatan dari resource, adalah folder
tempat kita membuat layout dalam format
xml, selain itu juga berfungsi untuk
menyimpan gambar, musik, icon, dan juga
beverapa values, seperti : colors, string,
style, dimens.
4. Gradle

Adalah tempat untuk edit minimal SdkVersion, target SdkVersion, Version Code,

Version Name, buildTypes, dan depencies untuk library yang akan kita pakai.

MENJALANKAN PROJEK ANDROID STUDIO
Untuk menjalankan project cukup dengan pilih Run  Run ‘app’ atau melalui
icon run berbentuk segitiga hijau atau dengan kombinasi keyboard Shift + F10.
Setelah itu, ada beberapa cara untuk menjalankan aplikasi pertama kita, yaitu :
1. Menggunakan Android Virtual Device (AVD).
2. Langsung disambungkan dengan USB Device.
3. Menggunakan Emulator pihak ketiga, seperti Genymotion.

CARA MENGAKTIFKAN DUBUGGING MODE PADA HP
Supaya kita dapat menjalankan aplikasi pada hp, kita perlu mengaktifkannya debugging
mode, caranya sebagai berikut :
1.
2.
3.
4.
5.

Buka Setting

Pilih About Phone
Tekan beberapa kali sampai muncul tulisan “Developer Option” telah diaktifkan
Kembali ke Setting, akan muncul menu baru “Developer Option”
Centang pada USB Debugging

Jika HP masih belum terdeteksi : masuk ke Klik Kanan My Computer  Properties 
advanced System Setting  Environtment Variables  Pada Kotak System Variable  Edit
PATH : tambahkan dengan lokasi sdk, biasanya ada di
C:\Users\Win8\AppData\Local\Android\sdk\platform-tools;
Jika HP sudah muncul tapi masih OFFLINE : end task Adb.exe pada TaskManager, dan
jalankan lagi.

MEMASUKKAN RESOURCE
Untuk memasukkan resource berupa image, musik, icon, maupun video caranya sangat
mudah, tinggal copy file yang akan dimasukkan dari Windows Explorer kemudian paste di
Folder Drawable. Ketentuannya nama file hanya boleh terdiri dari a-z dan 1-9.

MEMBUAT LAYOUT TAMPILAN UTAMA
Tampilan pada menu utama yang kita pakai disini berbentuk ikon ikon dengan menggunakan
ImageView dimana jika kita memilih ikon tersebut maka akan muncul halaman menu

lainnya.
Berikut adalah tampilan desain dari content_main.xml. Supaya tiap Linear Layout terbagi 2
dengan sama rata, maka digunakan Weight dengan perbandingan 1:1.

Berikut ini adalah kode pada Java dan Layout pada Menu Utama :

content_main.xml
















Dalam pembuatan layout ada beberapa hal yang dapat kita atur, seperti :
- Layout width dan height :
Match Parent : menyesuaikan dengan ukuran layar
Wrap Content : meyesuaikan dengan ukuran asli file
- Padding : jarak dari file ke dalam
- Margin : jarak dari file ke luar
- id : identitas pengenal jika akan menyambungkan objek tsb dengan java
- src : sumber resource dari objek kita
- background : gambar background objek
- weight : berat objek terhadap objek lainnya
- dan masih banyak lain, coba sendiri-sendiri ya

MEMAHAMI PENGGUNAAN onClickListener
Setelah membuat layout tampilan di atas, kita akan melakukan sesuatu pada gambar di atas,
sehingga apabila kita klik gambar tersebut, maka akan muncul Toast. Untuk itu buka
MainActivity.java dan ketikkan source code berikut:
MainActivity.java
package com.ikitas.tebakbuah;
import
import
import
import
import
import
import
import
import
import
import
import

android.content.DialogInterface;
android.content.Intent;
android.os.Bundle;
android.support.design.widget.Snackbar;
android.support.v7.app.AlertDialog;
android.support.v7.app.AppCompatActivity;
android.support.v7.widget.Toolbar;
android.view.Menu;
android.view.MenuItem;
android.view.View;
android.widget.ImageView;
android.widget.Toast;

public class MainActivity extends AppCompatActivity {
ImageView menu1, menu2, menu3, menu4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
menu2 = (ImageView) findViewById(R.id.btnApel);
menu3 = (ImageView) findViewById(R.id.btnCeri);
menu4 = (ImageView) findViewById(R.id.btnDurian);
menu2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Menu ini belum ada",
Toast .LENGTH_SHORT).show();
}
});
menu3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar .make(v, "Maaf, menu ini juga masih belum bisa",
Snackbar.LENGTH_SHORT).show();
}
});
menu4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AlertDialog.Builder builder = new
AlertDialog.Builder(MainActivity.this);
builder
.setTitle("Tahukah Anda")
.setMessage("Menu ini tidak akan bisa jika belum

anda buat kodingnya")
.setNeutralButton("OK", new
DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int
which) {
dialog.dismiss();
}
})
.show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is
present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_about) {
Intent i = new Intent(MainActivity.this,About.class);
startActivity(i);
}
return super.onOptionsItemSelected(item);
}
}

MEMBUAT SPLASH SCREEN
Splashscreen adalah tampilan pembuka awal ketika aplikasi pertama kali dijalankan sebelum
masuk ke Menu Utama. Pada splashscreen ini layout akan otomatis berpindah ke layout
selanjutnya tanpa harus diklik. Biasanya splashscreen berisi logo atau nama developer
aplikasi. Splashscreen bisa kita gunakan untuk branding, menunggu loading data, dan supaya
aplikasi terlihat professional.
Berikut adalah langkah langkah dalam pembuatan splashscreen :
1. Buat New Empty Activity pada folder app>java>package name dengan cara Klik
Kanan  New  Activity  Empty Activity

2. Beri nama SplashScreen Centang “Launcher Activity”  Klik Finish

3. Copy dahulu Asset gambar / logo dari Explorer, lalu Paste pada res>drawable , klik
OK, maka gambar akan masuk ke folder Drawable.
Catatan : Untuk nama file dalam folder drawable harus menggunakan huruf kecil
semua.
4. Buat tampilan Splashscreen pada Layout pada res>layout >
activity_splash_screen.xml. Ada 2 cara untuk membuat tampilan pada layout yaitu
menggunakan Design atau Text. Pada Design tinggal memasukkan widget dari
toolbar yang beraad di sisi kiri dan merubah propertise pada toolbar sisi kanan.
Sedangkan untuk membuat tampilan splashscreen menggunakan Text, masukkan
kode berikut ini :
5.




Berikut ini adalah tampilan layout Splashscreen jika sudah jadi, gambar di
bawah ini hanyalah contoh saja, anda bisa merubah warna background, logo, tulisan
sesuai dengan kreatifitas anda sendiri.

6. Ubah pada bagian java  SplashScreen.java seperti di bawah ini
package com.ikitas.tebakbuah;
import
import
import
import

android.content.Intent;
android.os.Bundle;
android.os.Handler;
android.support.v7.app.AppCompatActivity;

public class SplashScreen extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash_screen);
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
startActivity(new Intent(SplashScreen.this,
MainActivity.class));
}
}, 2000L); // berpindah ke class Mainactivity setelah 2000ms
}
}

7. Ubah pada bagian java  activity_splash_screen.xml seperti di bawah ini






8. Supaya Layout bisa muncul pertama kali saat pertama kali dibuka kita perlu
mensetting AndroidManifest.xml pada folder Manifest

9.
















10. Lalu kita coba aplikasinya dengan cara Klik Menu Run  Run atau Tollbar Run
berbentuk segitiga hijau atau menggunakan shorcut Shift F10. Maka akan terlihat
Splash Screen muncul selama 2 detik kemudian pindah ke halaman Menu Utama.

MENGGANTI ICON
Seperti yang kita tahu, sampai sekarang, kita masih menggunakan icon default untuk aplikasi
kita, tentunya akan lebih keren jika kita membukan ikon sendiri, berikut langkah-langkahnya
:
1. Klik kanan pad folder Drawable  New  Image Asset

2. Pilih gambar yang akan dijadikan icon, disini kita dapat mengatur nama, tipe, shape,
dll. Disini saya menggunakan nama ic_launcher, tipe Image, dan shape Circle

3. Kemudian muncul dialog Confirm Icon Path, langsung saja klik Finish. disini gambar
yang akan kita upload akan otomatis dibagi menjadi hdpi, mdpi, xhdpi, xxhdpi,
xxxhdpi. Hal ini untuk menyesuaikan dengan ukuran layar setiap handphone.

PINDAH ANTAR ACTIVITY MENGGUNAKAN INTENT
Sebelum kita menulis source code untuk pindah antar activity, tentunya kita perlu membuat
Activity Baru terlebih dahulu, Langkahnya klik kanan pada folder Java  New  Activity
 Empty Activity

Kemudian isi nama Activity, dan nama Layoutnya, kemudian klik Finish.

Setelah itu tambahkan kode berikut pada MainActivity.java :
menu1 = (ImageView) findViewById(R.id.btnAlpukat);
menu1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, Alpukat.class );
startActivity(i);
}
});

Maksud dari kode di atas yaitu ketika menu1 diklik, maka akan pindah dari MainActivity ke
Activity Alpukat.

MENU UTAMA
Ini adalah menu utama dari aplikasi ini yang berfungsi untuk gambar buah yang akan ditebak,
kemudian terdapat EditText untuk mengisi tebakan dan sebuah tombol untuk cek apakah
jawaban benar atau salah.
Langkah pertama yaitu membuat desain sebagai berikut :

Atau dapat dilihat kodenya sebagai berikut pada activity_alpukat.xml









Setelah itu kita tambahkan kode berikut pada Alpukat.Java
package com.ikitas.tebakbuah;
import
import
import
import
import
import

android.os.Bundle;
android.support.v7.app.AppCompatActivity;
android.view.View;
android.widget.Button;
android.widget.EditText;
android.widget.Toast;

public class Alpukat extends AppCompatActivity {
//Deklarasi variabel
private EditText edAlpukat;
private Button buttonCek;
private String jawaban;
@Override

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_alpukat);
//inisialisasi UI
edAlpukat = (EditText)findViewById(R.id.editTextAlpukat);
buttonCek = (Button)findViewById(R.id.buttonCek);
//Inisialisasi event
buttonCek.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
jawaban = edAlpukat.getText().toString();
if (jawaban.equalsIgnoreCase("alpukat")){
Toast.makeText(Alpukat.this, "Jawaban Anda Benar",
Toast .LENGTH_SHORT).show();
}else {
Toast.makeText(Alpukat.this, "Jawaban Salah, Silahkan
coba lagi", Toast .LENGTH_SHORT).show();
}
}
});

}
}

MENU ITEM
Menu Item adalah menu yang ada di sebelah kanan atas, biasanya untuk navigasi supaya
lebih cepat ke halamanan lain, seperti : Setting, Tentang, dll :
Untuk mengaplikasikannya, kita buat terlebih dahulu Activity baru About dengan cara seperti
sebelumnya dengan desain sesuka anda

activity_about.xml













Kemudian kita edit file menu_main.xml menjadi sbb:




Kemudian tambahkan intent pada kode berikut pada MainActivity.java
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is
present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_about) {
Intent i = new Intent(MainActivity.this,About.class);
startActivity(i);
}
return super.onOptionsItemSelected(item);
}

EXPORT PROJECT ANDROID MENJADI FILE APK
Agar bisa upload aplikasi ke google playstore, file yang kita butuhkan adalah file dengan ekstensi APK
yang didapatkan dengan cara melakukan export pada project android tersebut. Berikut langkah –
langkah untuk export project android menjadi file Apk :
1. Pilih project yang ingin di export
2. Pada menu Build  pilih Generated Signed ApK

3. Muncul tampilan seperti ini, pilih create new

Tentukan lokasi tempat penyimpanan apk
Setelah itu pilih OK
kemudian isi Data Seperti berikut ini :

4. Setelah semua data berhasil di isi, pilih OK. Setelah itu muncul tampilan seperti ini :

Pilih NEXT
5. Muncul Tampilan seperti ini, Pada bagian buld type pilih release

6. Kemudian pilih Finish
7. Tunggu beberapa saat hingga muncul tampilan Signed APK’s generated succesfully.

8. Pilih Show In Explorer untuk menampilkan file APK dari project tersebut atau pilih Close
untuk menuntup jendela tersebut.
9. Tampilan ketika memilih show in explorer