• Tidak ada hasil yang ditemukan

Modul Pelatihan User Interface dan Pembu

N/A
N/A
Protected

Academic year: 2018

Membagikan "Modul Pelatihan User Interface dan Pembu"

Copied!
33
0
0

Teks penuh

(1)

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

(2)

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.

(3)

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.

(4)

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 :

(5)

c.

Setelah itu pilih Agree

(6)

e.

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

NEXT

(7)

g.

Klik Next

h.

Setelah proses selesai KLIK NEXT

(8)

j.

Proses check updated SDK components selesai, klik NEXT.

(9)

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

(10)

4.

Pilih Target Device dan Minimum SDK untuk aplikasi yang akan anda buat, pilih

Phone and Tablet dan Minimal SDK Gingerbread, kemudian pilih Next.

(11)

6.

Secara default akan muncul setting sebagai berikut;

Activity Name

: MainActivity

Layout Name

: activity_main

Title

: MainActivity

Menu Resource Name : menu_main

(12)

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

(13)

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;

(14)

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.

(15)

content_main.xml

tools:showIn="@layout/activity_main">

<LinearLayout

android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

(16)

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

(17)

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);

(18)

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) {

(19)

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

(20)

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

(21)

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

(22)

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

(23)

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

(24)
(25)

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

(26)

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"

(27)

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;

(28)

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();

} } });

}

(29)

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">

(30)

android:layout_height="wrap_content" meningkat pengetahuan kita dengan menebak nama buah-buahan"

(31)

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);

(32)

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

(33)

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.

Referensi

Dokumen terkait

Jumlah Saham yang ditawarkan Saham Biasa Atas Nama dengan Nilai Nominal Rp..

Pemikiran HAM telah mendapat legitimasi secara formal karena memperoleh pengaturan dan masuk ke dalam hukum dasar negara (konstitusi) yaitu UUD 1945 dan prinsipkedaulatan rakyat

Faktor meteorologis yang ada dalam penelitian, termasuk jumlah kendaraan dengan suhu, waktu dengan suhu, waktu dengan jumlah kendaraan dan kebisingan,waktu

[r]

Berdasarkan hasil analisa data pada penelitian ini serta diperkuat dengan dasar teori yang telah dijabarkan, maka dapat ditarik kesimpulan bahwa “ada perbedaan stress

Pada Lampiran 1 terlihat bahwa ketika lambda 0.1, ragam pendugaan dan rata-rata bias mutlak yang dihasilkan cukup besar untuk semua metode, sehingga nilai KTG

Meningkatnya jumlah penduduk sekaligus akan menambah jumlah tenaga kerja di Provinsi Bali khususnya di kota Denpasar sehingga mendorong terciptanya berbagai aktivitas