Robbi's NoteBook

*Diasumsikan jdk, eclipse, adt dan android-sdk sudah terinstal di pc, untuk masalah penginsatalan dapat googling dan banyak yang menjelaskan mengenai hal tersebut. :D
-buka eclipse yang sudah terpasang, kemudian pilih workspace ke tempat yang diinginkan sebagai penyimpanan file android nantinya.
Pada halaman utama android pilih file>New>Android Project.
setelah keluar form new android project, isikan nama project di textbox yang tersedia, dan pilih next.
selanjutnya, akan ke form dengan menu yang disediakan untuk pemilihan target aplikasi yang dibangun, pilih sesuai dengan keinginan, disini saya menggunakan untuk versi 2.1 (eclair), kemudian pilih button next.
setelah itu akan muncul form application info, isi pada package name yang nantinya pada pemisahan dengan tanda titik akan menjadi referensi package yang kita buat.
kemudian langsung saja klik finish, dan akan muncul project yang kita buat di package explorer.

Dalam pembuatan aplikasi profil sederhana ini, terdapat 4 buah form yang akan digunakan sebagai menu utama, splash screen, profil, dan rencana hidup.
sebelum masuk kedalam desain interface dan fungsi-fungsi lain, kita akan membuat module untuk data string, gambar dan juga animasi yang nanti akan digunakan.
1. Pertama membuat module untuk string, drop down nama project dan cari folder values.
klik kanan pada folder tersebut, pilih new>android xml file, saya memberi nama string.xml.
ini adalah listing string yang saya gunakan pada aplikasi ini:
-----------------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<resources>
<string name="hello">MyProfile version 1.0.0</string>
<string name="app_name">MyProfile</string>
<string name="bawah_splash">Copyright @ Robbi Amirudin. 2012</string>
<string name="mainpage">Halaman Utama</string>
<string name="btnprofile">Profile</string>
<string name="btnprenhi">Rencana Hidup</string>
<string name="lblnama1">Nama</string>
<string name="lblnama2">:</string>
<string name="lblnama3">Robbi Amirudin</string>
<string name="lblttl1">TTL</string>
<string name="lblttl2">:</string>
<string name="lblttl3">Lampung, 29-09-1992</string>
<string name="lblhobi1">Hobi</string>
<string name="lblhobi2">:</string>
<string name="lblhobi3">Trouble Shooting</string>
<string name="lblaga1">Agama</string>
<string name="lblaga2">:</string>
<string name="lblaga3">Islam</string>
<string name="lblemail1">Email</string>
<string name="lblemail2">:</string>
<string name="lblemail3">Robbiamr@gmail.com</string>
<string name="lbltel1">Telp.</string>
<string name="lbltel2">:</string>
<string name="lbltel3">+6285716026401</string>
<string name="lbliv1">Foto</string>
<string name="lbliv2">:</string>
<string name="btn_prof_kem">Kembali ke Halaman Utama</string>
<string name="btnclose">Keluar</string>
</resources>

-----------------------------------------------------------------------------------------------------------------------

2. module untuk gambar, pada folder res klik kanan dan pilih new>folder, disini saya memberi

nama folder dengan drawable. kemudian salin gambar-gambar yang nanti akan digunakan

ke folder tersebut.

3. module untuk animasi, masih pada folder res, klik kanan dan pilih new>folder dan beri nama

folder tersebut dengan nama anim.
-animasi ini akan dibuat untuk form SplashScreen, dan ada 3 buah animasi yang akan digunakan.
sehingga di dalam folder anim buat 3 file bertipe xml.
disini saya memberinya nama anim1, anim2 dan random.xml.
-berikut listing pada anim1.xml
-----------------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">

<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="2500">
</alpha>
</set>
-----------------------------------------------------------------------------------------------------------------------

-anim2.xml
-----------------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">

<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="2500"
android:startOffset="2500">

</alpha>
</set>
-----------------------------------------------------------------------------------------------------------------------

-random.xml
-----------------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">

<rotate
android:fromDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"/>

<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="2000">

</alpha>

<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale=".1"
android:fromYScale=".1"
android:toXScale="1.0"
android:toYScale="1.0">

</scale>

</set>
-----------------------------------------------------------------------------------------------------------------------

setelah membuat module-module tersebut, sekarang kita beralih pada desain interfacenya, pada folder layout yang berada didalam res, tambahkan 3 file bertipe xml dan ditambah satu dengan file yang sudah tersedia didalamnya(main.xml).
disini saya memberi nama-nama file tersebut main.xml, profile.xml, splash.xml dan renhi.xml.
tampilannya seperti ini:

berikut listing-listingnya:
-main.xml
-----------------------------------------------------------------------------------------------------------------------

<?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:textSize="20dp"
android:layout_marginTop="30dp"
android:text="@string/mainpage"
android:textStyle="bold"
android:gravity="center"/>

<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/btnprofile"
android:text="@string/btnprofile"
android:layout_marginTop="50dp"
android:textSize="18dp"
android:textStyle="bold"/>

<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/btnrenhi"
android:text="@string/btnprenhi"
android:layout_marginTop="0dp"
android:textSize="18dp"
android:textStyle="bold"/>

<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/btnclose"
android:text="@string/btnclose"
android:layout_marginTop="0dp"
android:textSize="18dp"
android:textStyle="bold"/>
</LinearLayout>
-----------------------------------------------------------------------------------------------------------------------

-profile.xml

-----------------------------------------------------------------------------------------------------------------------

<?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:text="@string/btnprofile"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="30dp"
android:textSize="20dp"
android:textStyle="bold"
/>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/lblnama1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblnama1"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

<TextView
android:id="@+id/lblnama2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblnama2"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="@+id/lblnama3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblnama3"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/lblttl1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblttl1"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

<TextView
android:id="@+id/lblttl2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblttl2"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="@+id/lblttl3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblttl3"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/lblhobi1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblhobi1"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

<TextView
android:id="@+id/lblhobi2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblhobi2"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="@+id/lblhobi3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblhobi3"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/lblaga1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblaga1"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

<TextView
android:id="@+id/lblaga2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblaga2"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="@+id/lblaga3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblaga3"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/lblemail1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblemail1"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

<TextView
android:id="@+id/lblemail2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblemail2"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="@+id/lblemail3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lblemail3"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:autoLink="email"/>

</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/lbltel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lbltel1"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

<TextView
android:id="@+id/lbltel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lbltel2"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="@+id/lbltel3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lbltel3"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:autoLink="phone"/>

</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/lbliv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lbliv1"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

<TextView
android:id="@+id/lbliv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lbliv2"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>

<ImageView
android:id="@+id/ivfoto"
android:layout_width="180dp"
android:layout_height="140dp"
android:src="@drawable/i"
android:layout_marginTop="5dp"
/>

</TableRow>

</TableLayout>

<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/btnkem"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textSize="16dp"
android:text="@string/btn_prof_kem"
android:gravity="center"
android:layout_marginTop="40dp"/>
</LinearLayout>
-----------------------------------------------------------------------------------------------------------------------

-renhi.xml

-----------------------------------------------------------------------------------------------------------------------

<?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:id="@+id/judul_splash"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:textSize="20dp"
android:layout_marginTop="50dp"
android:textStyle="bold"
android:gravity="center"
/>

<ImageView
android:id="@+id/img1"
android:layout_width="160dp"
android:layout_height="140dp"
android:src="@drawable/presentatio"
android:layout_gravity="center"
android:layout_marginTop="50dp"
/>

<TextView
android:id="@+id/bawah_splash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dp"
android:textStyle="bold"
android:layout_gravity="center"
android:layout_marginTop="50dp"
android:text="@string/bawah_splash"

/>

</LinearLayout>
-----------------------------------------------------------------------------------------------------------------------

setelah membuat desain interfacenya, lanjut ke pembuatan fungsi.
pada folder nama project, drop down ke src>nama package dan buat 3 file class java baru selain satu yang sudah tersedia dari awal. disini nama-nama class saya adalah AndroidTaskActivity.java, profile.java, renhi.java dan splash.java.

-AndroidTaskActivity.java
-----------------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="tugas.uts.profile"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk android:minSdkVersion="7" />

<application
android:icon="@drawable/presentatio"
android:label="@string/app_name" >
<activity
android:name=".Splash"
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=".AndroidTaskActivity"
android:label="@string/app_name">
</activity>
<activity
android:name=".profile"
android:label="@string/app_name">
</activity>
<activity
android:name=".renhi"
android:label="@string/app_name">

</activity>
</application>

</manifest>
-----------------------------------------------------------------------------------------------------------------------

-profile.java
-----------------------------------------------------------------------------------------------------------------------

package tugas.uts.profile;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class profile extends Activity {
protected Button prof_kem;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.profile);

prof_kem = (Button)findViewById(R.id.btnkem);
prof_kem.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
gantihalaman();
}
});
}
public void gantihalaman(){
Intent gh = new Intent(this, AndroidTaskActivity.class);
startActivity(gh);
}
}
-----------------------------------------------------------------------------------------------------------------------

-renhi.java
-----------------------------------------------------------------------------------------------------------------------

package tugas.uts.profile;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class renhi extends Activity {
protected Button ren_kem;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.renhi);

ren_kem = (Button)findViewById(R.id.btnkem2);
ren_kem.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
gantihalaman();
}
});
}
public void gantihalaman(){
Intent gh = new Intent(this, AndroidTaskActivity.class);
startActivity(gh);
}
}
-----------------------------------------------------------------------------------------------------------------------

-Splash.java
-----------------------------------------------------------------------------------------------------------------------

package tugas.uts.profile;

import android.app.Activity;
import android.os.Bundle;
import android.content.Intent;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.ImageView;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;

public class Splash extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.splash);
startAnimating();
}

private void startAnimating(){
TextView judul_splash = (TextView) findViewById(R.id.judul_splash);
Animation anim1 = AnimationUtils.loadAnimation(this, R.anim.anim1);
judul_splash.startAnimation(anim1);

TextView bawah_splash = (TextView) findViewById(R.id.bawah_splash);
Animation anim2= AnimationUtils.loadAnimation(this, R.anim.anim2);
judul_splash.startAnimation(anim2);

anim2.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
startActivity(new Intent(Splash.this, AndroidTaskActivity.class));
Splash.this.finish();
}
});
ImageView iv1 = (ImageView)findViewById(R.id.img1);
Animation spinin = AnimationUtils.loadAnimation(this, R.anim.random);
iv1.startAnimation(spinin);

}
}
-----------------------------------------------------------------------------------------------------------------------

Setelah selesai pembuatan fungsi, itu masih belum bisa berjalan. kita harus mendaftarkan file class java yang baru terlebih dahulu di AndroidManifest.xml agar bisa berjalan.
berikut listingnya dari file tersebut:
-----------------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="tugas.uts.profile"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk android:minSdkVersion="7" />

<application
android:icon="@drawable/presentatio"
android:label="@string/app_name" >
<activity
android:name=".Splash"
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=".AndroidTaskActivity"
android:label="@string/app_name">
</activity>
<activity
android:name=".profile"
android:label="@string/app_name">
</activity>
<activity
android:name=".renhi"
android:label="@string/app_name">

</activity>
</application>

</manifest>
-----------------------------------------------------------------------------------------------------------------------

Untuk lebih jelasnya, bisa di download source codenya di Sini...

Robbi's NoteBook

Wednesday, January 9, 2013

Membuat aplikasi profil sederhana di android