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
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-downloads-1880260.html
b.
Install Java JDK dan ingat path dimana file java disimpan.
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.
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 :
c.
Setelah itu pilih Agree
e.
Kemudian pilih alokasi RAM yang akan digunakan misalnya 3 GB. Kemudian pilih
NEXT
g.
Klik Next
h.
Setelah proses selesai KLIK NEXT
j.
Proses check updated SDK components selesai, klik NEXT.
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
4.
Pilih Target Device dan Minimum SDK untuk aplikasi yang akan anda buat, pilih
Phone and Tablet dan Minimal SDK Gingerbread, kemudian pilih Next.
6.
Secara default akan muncul setting sebagai berikut;
Activity Name
: MainActivity
Layout Name
: activity_main
Title
: MainActivity
Menu Resource Name : menu_main
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
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.
Buka Setting
2.
Pilih About Phone
3.
Tekan beberapa kali sampai muncul tulisan “Developer Option” telah diaktifkan
4.
Kembali ke Setting, akan muncul menu baru “Developer Option”
5.
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;
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.
content_main.xml
tools:showIn="@layout/activity_main">
<LinearLayout
android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
android:layout_weight="1"
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
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
public class MainActivity extends AppCompatActivity {
ImageView menu1, menu2, menu3, menu4; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
anda buat kodingnya")
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is
public boolean onOptionsItemSelected(MenuItem 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
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. <?xml version="1.0" encoding="utf-8"?>
<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: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="com.ikitas.tebakbuah.SplashScreen" android:background="#FF02A85A">
<ImageView
6.
Ubah pada bagian java
SplashScreen.java seperti di bawah ini
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();
7.
Ubah pada bagian java
activity_splash_screen.xml seperti di bawah ini
<?xml version="1.0" encoding="utf-8"?>
<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: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="com.ikitas.tebakbuah.SplashScreen" android:background="#FF02A85A">
<ImageView
9. <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ikitas.tebakbuah">
<application action bar di atas halaman Splashscreen
-->
Pindahkan intent filter yang sebelumnya di MainActivity ke Splashscreen Activity.
intent-filter ini digunakan untuk memilih activity mana yang pertama kali dibuka
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
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
Setelah itu tambahkan kode berikut pada MainActivity.java :
menu1 = (ImageView) findViewById(R.id.btnAlpukat);
menu1.setOnClickListener(new View.OnClickListener() { @Override
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
<?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"
tools:context=".Alpukat"
android:orientation="vertical"
android:background="@android:color/holo_blue_dark">
<ImageView android:layout_height="match_parent" android:layout_margin="5dp"
android:layout_gravity="center_horizontal|bottom" android:background="#FFFFFFFF"
android:layout_weight="3"
android:textSize="@dimen/abc_text_size_large_material" android:textColor="@android:color/holo_blue_dark" /> </LinearLayout>
</LinearLayout>
Setelah itu kita tambahkan kode berikut pada Alpukat.Java
package com.ikitas.tebakbuah;
public class Alpukat extends AppCompatActivity {
//Deklarasi variabel
private EditText edAlpukat;
private Button buttonCek;
private String jawaban;
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
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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: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="com.ikitas.tebakbuah.About">
android:layout_height="wrap_content" meningkat pengetahuan kita dengan menebak nama buah-buahan"
android:gravity="center"
Kemudian kita edit file menu_main.xml menjadi sbb:
<menu 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"
tools:context="com.bekatei.sinauandroid.MainActivity"> <item
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);
