Modul 1 Kuliah Mobile Computing (Android).

AMIK Taruna Probolinggo

1. Mengenal Struktur Direktori pada Aplikasi android

Gambar 1. Struktur dirktori pada projek android

Fokus pembahasan kita yaitu pada folder src dan res.

Pada folder src terdapat file java (Praltek1Activity.java) yang merupakan class dasar dalam
pembentukan user interface. Dalam file tersebut terdapat class dengan nama class Praktek1Activity
yang merupakan pewaris dari class Activity. Dalam class tersebut terdapat methode onCreat yang
memanggil setContentView, sedangkan setContentView befungsi sebagai methode yang
menentukan tampilan utama. Methode tersebut memanggil R.layout.main. main yang dimaksud
adalah main.xml pada folder res yang bertugas sebagai user interfase.

package com.mc;
import android.app.Activity;
import android.os.Bundle;

public class Praktek1Activity extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

kode 1. Kode pada file Praktek1Activity.java

Modul 1 Kuliah Mobile Computing (Android).
AMIK Taruna Probolinggo

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />

</LinearLayout>

kode 2. Kode pada file main.xml

pada kode main.xml secara default sudah terdapat sebuah toolbox yaitu TextView. TextView ini
pada pemrograman destop lain(delphi, VB ) dikelan sebagai label. Pada kode main.xml tersebut
telah mendifinisikan lebar, tinggi serta text (android:text="@string/hello") yang akan
ditampilkan. Kode text tersebut menunjuk file string .xml yang terdapat pada folder value.

<?xml version="1.0" encoding="utf-8"?>

<resources>

<string name="hello">Praktek Pertama Android</string>

<string name="app_name">Praktek1</string>

</resources>

kode 2. Kode pada file string.xml

Jadi ketika projek pertama kali dijalankan akan menampilkan “Praktek Pertama Android”. Hal ini
sesuai dengan value yang terdapat pada kode “<string name="hello">Praktek Pertama
Android</string>”

Gambar 2. Tampilan pertama projek praktek1

2. Melakukan modifikasi terhada text yang akan di tampilkan melalui string.xml

Untuk melakukan modifikasi terhadap text yang akan ditampilkan bisa dilakukan dengan beberapa
cara diantaranya adalah pada file string.xml, lakukan modifikasi pada kode “<string
name="hello">Praktek Pertama Android</string>” menajdi “<string name="hello">Text
dari STRING.XML </string>”. Maka secara otomati ketika dijalankana text yang dihasilkan akan
berubah menjadi “Text dari STRING.XML”
Modul 1 Kuliah Mobile Computing (Android).
AMIK Taruna Probolinggo

Gambar 3. Hasil modifikasi pada string.xml

3. Melakukan modifikasi terhadap text yang akan di tampilkan melalui main.xml

Modifikasi yang dilakukan pada file main.xml terdapat kode “android:text="@string/hello"
/>” yang berada diantara kode“<TextView />”. Edit kode tersebut menjadi “android:text="Text
dari MAIN.XML" />”. Maka ketika dijalankan akan ditampilkan “Text dari MAIN.XML”

Gambar 4. Hasil modifikasi pada main.xml

4. Melakukan modifaksi terdahadap text yang akan ditampilak melalui Praktek1Activity.java

Modifikasi yang dilakukan pada file Praktek1Activity.java dengan beberapa langkah sebagai berikut:

package com.mc;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;//langkah pertama akan muncul secara
otomatis

public class Praktek2Activity extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView txt1 = new TextView(this);//langkah kedua
txt1.setText("Text dari JAVA"); //langkah ketiga
setContentView(txt1); //langkah keempat
}
}

kode 2. Modifikasi Kode pada file Praktek1Activity.java

langkah pertama, inport paket widget(widget.*; atau widget.TextView;). Kedua, buatlah objek
dari class TextView. Ketiga, setting text yang akan ditampilkan pata objek yang dibuat.pada
methode setContentView Ganti parameter “R.layout.main” mejadi nama objek“txt1”
Modul 1 Kuliah Mobile Computing (Android).
AMIK Taruna Probolinggo

Gambar 4. Hasil modifikasi pada Praktek1Activity.java

5. Modifikasi langsung pada Graphical Layout

Double klik pada main.xml yang terdatap pada folder layout. Secara default tampil dua tab
(Graphical Layout dan main.xml). untuk modifikasi TextView bisa langsung dilakukan pada Graphical
Layout yaitu dengan cara klik kanan pata TextView, pilih Edit Text, lakukan modifikasi text pada
Resolved value

Klik kanan pada textview, pilih

edit Text, lakukan modifikasi
Resolved value(gambar 5)
sesuai text yang di inginkan

Gambar 4. Graphical Layout pada main.xml

Modul 1 Kuliah Mobile Computing (Android).
AMIK Taruna Probolinggo

Gambar 5. Tampilan Edit text

6. Menampilkan gambar melalui main.xml

Langkah-langkah untuk menampilkan gambar pada aplikasi android:
a. Simpan gambar pada direktori “drawable-mdpi” yang terdapat pada folder src, format
gambar direkomendasikan adalah png, ukuran 64 x 64.
b. Widget yang di gunakan adalah ImageView, kode yang digunakan sebagai berikut

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />

kode 3. Imageview pada file main.xml

pada kode diatas terdapat id(android:id="@+id/imageView1") yang menunjukkan id pada

imageview, pada bahasa pemrograman lain misalnya Delphi disebut dengan name. Gambar
dipanggil dengan kode src (android:src="@drawable/ic_launcher"), kode tersebut
menunjukkan alamat folder (@drawable) dan nama file(ic_launcher). Pemanggilan nama
file tidak diikuti dengan extensi gambar.
Modul 1 Kuliah Mobile Computing (Android).
AMIK Taruna Probolinggo

7. Menampilkan gambar melalui actifity.java. langkah2 dan kode lengkapnya sebagai berikut:

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView; //pertama

public class Praktek10Activity extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ImageView gambar=new ImageView(this); //kedua
gambar.setImageResource(R.drawable.ic_launcher); //ketiga
setContentView(gambar); //keempat
}
}

Kode 4. Kode pada actifity untuk memanggil gambar

Langkah pertama, panggil packed widget imageview (android.widget.ImageView; atau

android.widget.;). Langkah kedua, buatlah objek dari class imageview (ImageView gambar),
langkah ketiga, panggil lokasi file gambar
“gambar.setImageResource(R.drawable.ic_launcher);” kode tersebut menjelaskan folder
(drawable)tujuan dana nama file (ic_launcher). Nama file di panggil tanpa extensi
8. Menampilkan gambar melalui graphical layout

Drag imageview pada

pada layar aplkasi

Gambar 6. ImageView pada Graphical Layout

Drag imageview pada layar aplikasi, secara otomatis akan menampilkan halaman resource choocer.
Pilih opsi project resources untuk meload gambar yang ada pada aplikasi atau pilih system resources
untuk meload gambar yang ada pada system. Kemudia klik OK. Jalankan aplikasi, hasil yang
ditampilkan sama dengan poin 6 dan 7. Pengaturan layout bisa dilakukan pada properties
Modul 1 Kuliah Mobile Computing (Android).
AMIK Taruna Probolinggo

Gambar 7. Resouce choocer untuk memilih gambar