Berikut ini source programnya.
ource Program .xml
berikut tampilan Bagian dari layout berisi source dalam bentuk .xml
Ø Tampilan awal
Main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout //Syntax yang mengatur tampilan paling dasar xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"//untuk mengatur tampilan orientasi vertikal
android:layout_width="fill_parent"//lebar layout sesuai lebar window
android:layout_height="fill_parent”//tinggi layout sesuai tinggi window
android:background="@drawable/bg0”//untuk memanggil source background di drawable-hdpi dalam format PNG
android:gravity="center"//untuk mengatur tata letak margin di tengah
>
<TextView//Syntax yang digunakan untuk menampilkan teks
android:layout_width="fill_parent" //lebar layout sebesar window
android:layout_height="wrap_content"> //tinggi layout sebesar satu row
</TextView>//Syntax ini digunakan untuk enter satu baris
<TextView //Syntax yang digunakan untuk menampilkan teks
android:layout_width="fill_parent" //lebar layout sebesar window
android:layout_height="wrap_content"> //tinggi layout sebesar satu row
</TextView>//Syntax ini digunakan untuk enter satu baris
<ImageButton //Syntax ini digunakan untuk button bergambar
android:layout_width="wrap_content" //lebar layout sebesar lebar image.png
android:layout_height="wrap_content" //tinggi layout sebesar tinggi image.png
android:gravity="center" //untuk mengatur tataletak berada di tengah
android:id="@+id/button0" //memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:src="@drawable/btn">//memanggil source image untuk ImageButton di drawable-hdpi
</ImageButton>//penutup Syntax
<TextView //Syntax yang digunakan untuk menampilkan teks
android:layout_width="fill_parent" //lebar layout sebesar window
android:layout_height="wrap_content" //tinggi layout sebesar satu row
></TextView> //Syntax ini digunakan untuk enter satu baris
</LinearLayout> //penutup syntax LinearLayout
Source drawable-ldpi (membuat background dan image button)
Ø Tampilan Daftar isi
Utama.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout //Syntax untuk mengatur background dasar
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" //untuk mengatur orientasi window menjadi vertikal
android:layout_width="fill_parent" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="fill_parent" //untuk mengatur tinggi layout sebesar tinggi window
android:background="@drawable/bg2" //untuk memanggil source file png pada drawabel-hdpi
>
<ScrollView //Syntax yang menampilkan dan mengatur Scroll bar vertikal
android:layout_width="fill_parent" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="fill_parent”>//untuk mengatur tinggi layout sebesar tinggi window
<LinearLayout // syntax ini digunakan untuk mempresisikan scroll bar vertical dengan window
android:layout_width="fill_parent" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:orientation="vertical">//untuk mengatur orientasi layout menjadi vertikal
<TextView //Syntax yang digunakan untuk menampilkan dan mengatur text
android:text="DAFTAR ISI KISAH TAULADAN SAHABAT NABI MUHAMMAD SAW:"
android:layout_height="wrap_content" //untuk mengatur tinggi layout sebesar satu baris
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:gravity="center" //tata margin tengah
android:textStyle="bold" //text menjadi tebal
android:textSize="16sp" //mengatur ukuran font
android:typeface="serif"//mengatur jenis font
android:includeFontPadding="true" //jarak antar font
android:textColor="#FFFF00">//mengatur warna font
</TextView>
<ImageButton //Syntax yang menampilkan dan mengatur image button
android:id="@+id/button1"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="match_parent" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:gravity="center" //tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
android:src="@drawable/img"//untuk memanggil source file png pada drawabel-hdpi
></ImageButton>
<ImageButton
android:id="@+id/button2"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img2"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button3"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img3"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button4"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img4"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button5"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img5"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button6"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img6"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button7"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img7"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button8"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img8"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button9"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img9"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button10"//untuk memanggil source file png pada drawabel-hdpi
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img10"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button11"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img11"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
<ImageButton
android:id="@+id/button12"//memberikan name/id pada syntax ini supaya bisa dihubungkan dengan java
android:layout_width="wrap_content" //untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar satu baris
android:src="@drawable/img12"//untuk memanggil source file png pada drawabel-hdpi
android:gravity="center"//tata margin tengah
android:layout_gravity="center_horizontal"//tata margin tengah
></ImageButton>
</LinearLayout>
</ScrollView>//syntax untuk menutup scroll barr vertikal
</LinearLayout>
Ø Tampilan isi dari daftar isi. Ada 12, salah satunya: “Sayyidina Hasan dan Pemuda Badwi”
Dua.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"//untuk mengatur orientasi window menjadi vertikal
android:layout_width="fill_parent"//untuk mengatur lebar layout sebesar lebar window
android:layout_height="fill_parent"//untuk mengatur tinggi layout sebesar tinggi window
android:background="@drawable/bg3">//untuk memanggil source file png pada drawabel-hdpi
<ScrollView
android:layout_width="wrap_content"//untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar tinggi window
android:layout_weight="1">
<LinearLayout
android:layout_width="fill_parent"//untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"//untuk mengatur tinggi layout sebesar tinggi window
android:orientation="vertical">
<TextView
android:text="Saiyidina Hassan Dan Pemuda Badwi"
android:id="@+id/textView1"
android:layout_width="fill_parent"//untuk mengatur lebar layout sebesar lebar window
android:layout_height="wrap_content"
android:textStyle="bold"
android:gravity="center"
android:textColor="#000000"
android:typeface="monospace"
android:textSize="16sp"
android:background="#FFFF00"></TextView>
<ImageButton android:id="@+id/putarMusik"
android:layout_height="wrap_content"
android:adjustViewBounds="false" //supaya tidak aktif ketika sudah diaktifkan
android:src="@drawable/aud"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_width="fill_parent">
</ImageButton>
<TextView android:text=""
android:id="@+id/ket"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="15px">
</TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"//untuk mengatur lebar layout sebesar lebar window
android:textColor="#000000"
android:text="Saiyidina Hassan bin Ali r.a., adalah seorang tokoh Islam yang sangat dicintai oleh umat Islam. Sebagai seorang cucu Rasulullh saw. beliau adalah ibarat permata di zaman hidupnya kerana memiliki budi pekerti yang mulia dan terpuji."></TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content">//untuk mengatur lebar layout sebesar lebar window
</TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"//untuk mengatur lebar layout sebesar lebar window
android:textColor="#000000"
android:text="Pada suatu hari sedang Saiyidina Hassan duduk di muka pintu rumahnya, tiba-tiba datang seorang pemuda badwi, lalu mencacinya dan juga kedua ibu bapanya. Anehnya, Saiyidina Hassan hanya mendengar sahaja tanpa sedikit pun berubah air mukanya, atau membalas kata-katanya itu."></TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content">//untuk mengatur lebar layout sebesar lebar window
</TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"//untuk mengatur lebar layout sebesar lebar window
android:textColor="#000000"
android:text="Saiyidina Hassan berkata kepada orang itu: Wahai badwi, adakah engkau lapar atau dahaga? atau adakah sesuatu yang merungsingkan hati engkau?. Tanpa mempedulikan kata-kata Saiyidina Hassan, badwi itu terus memaki hamunnya.Oleh itu Saiyidina Hassan pun menyuruh pembantu rumahnya membawa uncang yang berisi wang perak lantas diberikannya kepada badwi itu dan berkata: Wahai badwi, maafkanlah saya. Inilah sahaja yang saya miliki. Jika ada yang lebih tidak akan saya sembunyikannya dari padamu."></TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content">//untuk mengatur lebar layout sebesar lebar window
</TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"//untuk mengatur lebar layout sebesar lebar window
android:textColor="#000000"
android:text="Sikap dan layanan Saiyidina Hassan itu akhirnya berjaya melembutkan hati badwi tersebut. Badwi itu menangis teresak-esak lantas sujud di kaki Saiyidina Hassan dan berkata: Wahai cucu baginda Rasulullah saw. maafkanlah aku kerana berlaku kasar terhadapmu. Sebenarnya aku sengaja melakukan begini untuk menguji kebaikan budi pekertimu sebagai cucu baginda Rasulullh saw. yang aku kasihi. Sekarang yakinlah aku bahawa engkau mempunyai budi pekerti yang mulia sekali."></TextView>
</LinearLayout>
</ScrollView>
</LinearLayout>
Note: pada source .xml untuk isi dari daftar isi, semua syntax yang digunakan hampir sama, untuk yang lain hanya mengedit pada bagian TextView -nya.
1. 4. Source Program .java
Source di bagian ini digunakan untuk mengatur alur dari kerja program android.
Ø Source yang mengatur tampilan awal (main.xml)
utama.java
package kisah.nabi;//package file
import android.app.Activity;//memasukkan library android
import android.content.Intent; //memasukkan library android
import android.os.Bundle; //memasukkan library android
import android.view.View; //memasukkan library android
import android.widget.ImageButton; //memasukkan library android
public class utama extends Activity {
/** Called when the activity is first created. */
ImageButton button0;//deklarasikan variable ImageButton
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);//untuk mengatur layout main.xml
ImageButton button0=(ImageButton)findViewById(R.id.button0);
//memanggil variable button0
button0.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),nabi.class);
startActivity(i);
}
});
}
}
Ø Source yang mengatur daftar isi (utama.xml)
nabi.java
package kisah.nabi;
import android.app.Activity; //memasukkan library android
import android.content.Intent; //memasukkan library android
import android.os.Bundle; //memasukkan library android
import android.view.Menu; //memasukkan library android
import android.view.View; //memasukkan library android
import android.widget.ImageButton; //memasukkan library android
public class nabi extends Activity {
/** Called when the activity is first created. */
ImageButtonbutton1,button2,button3,button4,button5,button6,button7,button8,button9,button10,button11,button12;//pendeklarasian variable imagebutton
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.utama);//mengatur layout utama.xml
ImageButton button1=(ImageButton)findViewById(R.id.button1);
ImageButton button2=(ImageButton)findViewById(R.id.button2);
ImageButton button3=(ImageButton)findViewById(R.id.button3);
ImageButton button4=(ImageButton)findViewById(R.id.button4);
ImageButton button5=(ImageButton)findViewById(R.id.button5);
ImageButton button6=(ImageButton)findViewById(R.id.button6);
ImageButton button7=(ImageButton)findViewById(R.id.button7);
ImageButton button8=(ImageButton)findViewById(R.id.button8);
ImageButton button9=(ImageButton)findViewById(R.id.button9);
ImageButton button10=(ImageButton)findViewById(R.id.button10);
ImageButton button11=(ImageButton)findViewById(R.id.button11);
ImageButton button12=(ImageButton)findViewById(R.id.button12);
button12.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay12.class);
startActivity(i);
}
});
button11.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay11.class);
startActivity(i);
}
});
button10.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay10.class);
startActivity(i);
}
});
button9.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay9.class);
startActivity(i);
}
});
button8.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay8.class);
startActivity(i);
}
});
button7.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay7.class);
startActivity(i);
}
});
button6.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay6.class);
startActivity(i);
}
});
button5.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay5.class);
startActivity(i);
}
});
button4.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay4.class);
startActivity(i);
}
});
button3.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay3.class);
startActivity(i);
}
});
button2.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0){
Intent i=new Intent (getApplicationContext(),lay2.class);
startActivity(i);
}
});
button1.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay1.class);
startActivity(i);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu){
return true;
}
}
Ø Sebagai contoh untuk source java yang lain
Dari syntax yang ada di (nabi.java)
button1.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(),lay1.class);
startActivity(i);
}
});
Buat new file.java dengan name lay1.java
package kisah.nabi;
import java.io.IOException;
import android.app.Activity;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnCompletionListener;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
public class lay1 extends Activity{
ImageButton mainkan;
MediaPlayer mp;
TextView keterangan;
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.dua);
keterangan=(TextView)findViewById(R.id.ket);
keterangan.setText("Silakan klik tombol play");
mainkan=(ImageButton)findViewById(R.id.putarMusik);
mainkan.setOnClickListener(new View.OnClickListener(){
public void onClick(View arg0){
mainkan.setEnabled(false); //ketika sudah dimainkan button tidak aktif
keterangan.setText("Tombol play tidak aktif");
go();
}
});
}
public void go(){
mp=MediaPlayer.create(lay1.this, R.raw.hasan);//memanggil source mp3 di folder hasan.
try {
mp.prepare();
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
mp.start();
mp.setOnCompletionListener(new OnCompletionListener(){
public void onCompletion(MediaPlayer arg0){
mainkan.setEnabled(true);
keterangan.setText("Silakan klik tombol play");
}
});
}
}
Note: pada source lay1.java, terdapat setContentView(R.layout.dua); ini berarti pada id button2 akan menampilkan dua.xml. begitu juga seterusnya.
Ø AndroidManifest.xml (Pada bagian ini dibutuhkan untuk mengatur mengaktifkan class pada java)
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="kisah.nabi"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".utama"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".lay1"></activity>
<activity android:name=".lay2"></activity>
<activity android:name=".lay3"></activity>
<activity android:name=".lay4"></activity>
<activity android:name=".lay5"></activity>
<activity android:name=".lay6"></activity>
<activity android:name=".lay7"></activity>
<activity android:name=".lay8"></activity>
<activity android:name=".lay9"></activity>
<activity android:name=".lay10"></activity>
<activity android:name=".lay11"></activity>
<activity android:name=".lay12"></activity>
<activity android:name=".nabi"></activity>
</application>
<uses-sdk android:minSdkVersion="8" />
</manifest>
Cara memasukkan audio
Note: untuk memasukkan audio, buat folder raw pada res. Kemudian masukkan file.mp3 ke folder raw. Kemudian pada java akan memanggil source pada folder raw.
Comments
Post a Comment