Senin, 14 Januari 2013

Belajar Pemrograman Android Bagian 3

Hello, dalam posting kali ini kita akan belajar bagaimana cara membuat splash dan loading screen.
pertama untuk membuat splash kita harus membuat dulu file xml nya, misal splash.xml dalam direktori res > layout yang isinya :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/simple"
    android:id="@+id/table">
<TableRow >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/splash1"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    </TableRow>

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:src="@drawable/logo"
     android:layout_marginTop="80dp"/>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_marginTop="80dp"
    android:text="@string/splash2"
    android:textAppearance="?android:attr/textAppearanceMedium" />

</TableLayout>


kemudian buatlah folder dengan nama "anim" pada direktori > res , dalam folder anim buatlah 3 buah file XML dengan nama, custom.xml, fade_in.xml, dan fade_in2.xml lalu sesuaikan dengan code berikut :

Custom.xml
<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
<rotate
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="5000"
    />
<alpha
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="5000">
</alpha>
<scale
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale=".1"
    android:fromYScale=".1"
    android:toXScale="1.0"
    android:toYScale="1.0"
    android:duration="5000"
    />
</set>


fade_in.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>


fade_in2.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>


 lalu buat class dengan nama splashActivity.java dalam di direktori src > rheza.project.main isi code berikut :

package rheza.project.main;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
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 splashActivity 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() {
        // TODO Auto-generated method stub
        TextView textView1 = (TextView) findViewById(R.id.textView1);
        Animation fade1 = AnimationUtils.loadAnimation(this, R.anim.fade_in);
        textView1.startAnimation(fade1);
       
        TextView textView2 = (TextView) findViewById(R.id.textView2);
        Animation fade2 = AnimationUtils.loadAnimation(this, R.anim.fade_in2);
        textView2.startAnimation(fade2);
       
        ImageView imageview1 = (ImageView )findViewById(R.id.imageView1);
        Animation fade3 = AnimationUtils.loadAnimation(this,R.anim.custom);
        imageview1.startAnimation(fade3);
       
        Animation spinin = AnimationUtils.loadAnimation(this, R.anim.fade_in2);
        LayoutAnimationController controller = new LayoutAnimationController(spinin);
       
        TableLayout table = (TableLayout) findViewById(R.id.table);
        TableRow row = (TableRow) table.getChildAt(0);
        row.setLayoutAnimation(controller);
       
spinin.setAnimationListener(new AnimationListener() {
           
            public void onAnimationStart(Animation animation) {
                // TODO Auto-generated method stub
               
            }
           
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub
               
            }
           
            public void onAnimationEnd(Animation animation) {
                // TODO Auto-generated method stub
                startActivity(new Intent(splashActivity.this,HelloActivity.class));
                splashActivity.this.finish();
            }
        });
    }
      
}



jika tidak ter jadi error ketika dirun hasilnya akan seperti ini :

 selanjutnya kita akan membuat loading screen , disini saya akan membuat loading screen pada halaman _dua.xml cara nya dengan membuat class activity pada src>rheza.project.main misal nama activitynya Halamandua.java lalu isi code berikut :

package rheza.project.main;

import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Intent;
import android.graphics.Typeface;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.TextView;




public class Halamandua extends Activity{
protected ProgressDialog progressDialog;
     @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            progressDialog = progressDialog.show( Halamandua.this,"Harap Tunggu",null);
            new Thread (){
                public void run (){
                    try {
                        sleep (700);
                    }
                    catch (Exception e){
                        Log.e("tag",e.getMessage());
                    }
                    progressDialog.dismiss();
                }
            }.start();
            setContentView(R.layout.halaman_dua);
           
            Typeface tf = Typeface.createFromAsset(getAssets(),"fonts/HARNGTON.TTF");
            TextView textView1 = (TextView)findViewById(R.id.textView1);
            textView1.setTypeface(tf);
        }

        public void biodata (View view) {
            Intent intent= new Intent (this,Biodata.class);
            startActivity(intent);
        }
        public void rencana (View view) {
            Intent intent2= new Intent (this,Rencana.class);
            startActivity(intent2);
        }
             public void  main(View view) {
                 Intent intent3 = new Intent (this,HelloActivity.class);
                 startActivity(intent3);
        }
      
       
      
      
       
       // @Override
       // public boolean onCreateOptionsMenu(Menu menu) {
       //     getMenuInflater().inflate(R.layout.halaman_dua, menu);
         //   return true;
        }
    //}

maka hasilnya akan seperti ini :

kemudian code untuk halaman yang muncul ketika button di klik adalah ini :
Biodata.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
   



<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/note2"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="24dp"
        android:src="@drawable/photo" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="200dp"
        android:layout_height="30dp"
        android:textSize="7pt"
        android:layout_alignRight="@+id/imageView1"
        android:layout_below="@+id/imageView1"
        android:layout_marginTop="46dp"
        android:text="@string/profil"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:textSize="7pt"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:text="NPM   : 10215410523"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:textSize="7pt"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2"
        android:text="@string/tgl"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:textSize="7pt"
        android:layout_alignLeft="@+id/textView3"
        android:layout_below="@+id/textView3"
        android:text="@string/alamat"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="7pt"
        android:layout_alignLeft="@+id/textView4"
        android:layout_below="@+id/textView4"
        android:text="Phone : 08999575738"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />



    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="7pt"
        android:layout_alignLeft="@+id/textView5"
        android:layout_below="@+id/textView5"
        android:layout_marginTop="16dp"
        android:text="Email   : rezza.rey@gmail.com"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />



    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="7pt"
        android:layout_alignLeft="@+id/textView8"
        android:layout_below="@+id/textView8"
        android:layout_marginTop="21dp"
        android:text="Blog     : Android-daisuki.blogspot.com"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />

</RelativeLayout>

</ScrollView>


jangan lupa untuk membuat Biodata.java nya

package rheza.project.main;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;

public class Biodata extends Activity{
    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.biodata);
       
        Typeface tf = Typeface.createFromAsset(getAssets(),"fonts/L_10646.TTF");
        TextView textView1 = (TextView)findViewById(R.id.textView1);
        TextView textView2 = (TextView)findViewById(R.id.textView2);
        TextView textView3 = (TextView)findViewById(R.id.textView3);
        TextView textView4 = (TextView)findViewById(R.id.textView4);
        TextView textView5 = (TextView)findViewById(R.id.textView5);
        TextView textView6 = (TextView)findViewById(R.id.textView6);
        TextView textView8 = (TextView)findViewById(R.id.textView8);
        textView1.setTypeface(tf);
        textView2.setTypeface(tf);
        textView3.setTypeface(tf);
        textView4.setTypeface(tf);
        textView5.setTypeface(tf);
        textView6.setTypeface(tf);
        textView8.setTypeface(tf);

}
   
}

 hasilnya seperti ini :


rencana.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     android:background="@drawable/note" xmlns:android="http://schemas.android.com/apk/res/android">


    <TextView
        android:id="@+id/textView1"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginTop="70dp"
        android:gravity="center"
        android:text="@string/rencana1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />
lalu Rencana.java
package rheza.project.main;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;

public class Rencana extends Activity{
    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.rencana);
       
        Typeface tf = Typeface.createFromAsset(getAssets(),"fonts/HARNGTON.TTF");
        TextView textView1 = (TextView)findViewById(R.id.textView1);
        TextView textView2 = (TextView)findViewById(R.id.textView2);
        TextView textView3 = (TextView)findViewById(R.id.textView3);
        TextView textView4 = (TextView)findViewById(R.id.textView4);
        TextView textView5 = (TextView)findViewById(R.id.textView5);
        textView1.setTypeface(tf);
        textView2.setTypeface(tf);
        textView3.setTypeface(tf);
        textView4.setTypeface(tf);
        textView5.setTypeface(tf);

}
}


dan ini hasilnya akan seperti ini :
sekian posting kali ini,  semoga dapat membantu kawan - kawan belajar pemrograman android .
untuk source code dapat download disini
untuk file .apk bisa download disini

Belajar Pemrograman Android Bagian 2

Hello sobat bloggers kali ini saya akan membahas cara membuat aplikasi android sederhana,  bagaimana caranya? simak aja sob..

pertama jalankan aplikasi eclipse kemudian pilih menu file > new >android application project , maka akan muncul window seperti ini :
isi Application name sesuai dengan aplikasi yang ingin dibuat , misal hello kemudian project name akan terisi sendiri , dalam package name akan muncul com.example.hello , ganti com.example dengan nama project anda misal rheza.project.hello setelah itu klik next > next > finish . halaman workspace anda pun sudah jadi...

Membuat Halaman Baru

 ketika kita membuat project baru maka secara default akan muncul file activity_main.xml (jika namanya belum di ubah) dalam direktori hello > res > layout ,dan jika di run maka akan muncul kata "Hello world"
ubah lah code tersebut sehingga menyerupai :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/eveb"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btn.next"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="10dp"
        android:layout_marginBottom="32dp"
        android:text="@string/btn.next" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="110dp"
        android:layout_height="80dp"
        android:layout_above="@+id/btn.next"
        android:layout_alignRight="@+id/btn.next"
        android:layout_marginRight="28dp"
        android:gravity="center"
        android:text="@string/text"
        android:textColor="@color/blue"
        android:textSize="5pt" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_above="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="26dp"
        android:src="@drawable/logo" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="95dp"
        android:layout_height="70dp"
        android:layout_above="@+id/imageView1"
        android:layout_marginBottom="25dp"
        android:layout_marginRight="23dp"
        android:layout_toLeftOf="@+id/textView1"
        android:text="@string/text2"
        android:textColor="@color/purple"
        android:textSize="7pt"
        android:textStyle="bold" />

</RelativeLayout> 

 
buatlah terlebih dahulu foldedrawable didalam direktori res lalu masukkan file image kedalam folder tersebut kemudian nama disesuaikan android:background="@drawable/eveb" eveb adalah nama file imagenya ubah lah sesuai dengan nama file image yang anda simpan di folder drawable. kemudian klik tab graphical layout yang terletak di bawah untuk melihat hasilnya tanpa di run di emulator.

 kok tidak ada textnya? :hammers, tentu saja karena saya menggunakan strings.xml untuk textnya bila tidak ingin memakai strings hapus saja kata @string/btn.next  pada android:text="@string/btn.next" /> menjadi Click Me atau yang lainnya. tapi jika ingin memakai string bisa lihat code di bawah
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="hello">Hello World!</string>
    <string name="app_name">MyInfo</string>
    <string name="text">This is my first project, to get started click button below</string>
     <string name="text2">Hi, how are you? </string>
     <string name="btn.next">Click Me !</string>
     <string name="btn.back">HOME</string>


 </resources>
file ini ada di direktori res > values
lalu untuk membuat file XML baru klik kanan pada direktori layout lalu pilih new > Android XML File ,beri nama misal halaman_dua kemudian isi code berikut :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/hal"
    android:orientation="vertical" >

    <Button
        android:id="@+id/rencana"
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@color/blu"
        android:onClick="rencana"
        android:text="@string/rencana" />

    <Button
        android:id="@+id/biodata"
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:layout_above="@+id/rencana"
        android:layout_alignLeft="@+id/rencana"
        android:layout_marginBottom="34dp"
        android:background="@color/blu"
        android:onClick="biodata"
        android:text="@string/biodata" />

    <Button
        android:id="@+id/btn.back"
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:layout_alignLeft="@+id/rencana"
        android:layout_below="@+id/rencana"
        android:layout_marginTop="32dp"
        android:background="@color/blu"
        android:onClick="main"
        android:text="@string/btn.back" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/biodata"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="36dp"
        android:textSize="8pt"
        android:text="@string/menu" />

</RelativeLayout> 

oh iya disini saya menggunakan color.xml untuk memberi warna pada text android:background="@color/blu" ,cara membuatnya hampir sama seperti membuat code pada string.xml ,buat file xml dengan nama color pada direktori res > values

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple">#1D4948</color>
    <color name="blue">#FFE8EB</color>
    <color name="blu">#808080</color>
    <color name="black">#000000</color>
</resources>

maka hasilnya akan terlihat seperti ini
selanjutnya kita akan me-link halaman pertama dengan halaman kedua dengan membuat activity code pada java class ,pertama buka direktori src > rheza.project.main kemudian klik main.java isi code berikut :

package rheza.project.main;

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

public class HelloActivity extends Activity {
    protected Button next;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        Typeface tf = Typeface.createFromAsset(getAssets(),"fonts/LHANDW.TTF");
        TextView textView1 = (TextView)findViewById(R.id.textView1);
        TextView textView2 = (TextView)findViewById(R.id.textView2);
        textView1.setTypeface(tf);
        textView2.setTypeface(tf);

       
        next = (Button)findViewById(R.id.btn_next);
        next.setOnClickListener(new View.OnClickListener() {
           
            public void onClick(View v) {
                // TODO Auto-generated method stub
   
                gantihalaman ();
            }
        });
    }
           
           
        public void gantihalaman (){
            Intent gh = new Intent(this,Halamandua.class );
            startActivity(gh);
           

       
    }
}


untuk code yang diberi warna biru itu merupakan script untuk mengganti font default dengan custom font, jika tidak ingin di pakai hapus saja, jika dipakai maka anda harus membuat folder dengan nama fonts dalam direktori assets kemudian masukan font yang diinginkan dan sesuaikan code ini "fonts/LHANDW.TTF" dengan nama font yang dimasukkan tadi..
jika di run dengan emulator maka hasilnya akan seperti ini:


Halaman Utama

Halaman Dua
Demikianlah postingan kali ini, semoga dapat membantu kawan - kawan dalam belajar pemrograman android, postingan yang akan datang adalah belajar cara membuat loading screen dan splash screen

source code

file apk

Minggu, 13 Januari 2013

Belajar Pemrograman Android Bagian 1

Siapa sih yang tidak kenal android? OS besutan google ini pasti sudah tidak asing lagi di telinga sobat blogger,  mungkin ada beberapa sobat blogger yang sudah memilikinya,hehe... android memang terkenal karena sifatnya yang open source sehingga banyak para pengembang aplikasi yang ikut mengembangkannya terlebih lagi sebagian besar aplikasi android tidak berbayar alias gratis,wow...

lalu bagaimana dengan sobat blogger sendiri? apakah tertarik untuk ikut mengembangkannya? disini saya akan memberi tahu bagaimana cara membuat sebuah aplikasi di android , dan aplikasi yang dibutuhkan adalah :

  • Java Eclipse
  • Java Development Kit (JDK)
  • Android SDK
  • Android ADT 
Setelah semua aplikasi sudah lengkap maka yang pertama dilakukan adalah melakukan penginstalan JDK ,bagaimana cara menginstalnya? tinggal next next aja kok, setelah itu extract java eclipse ke direktori mana saja, setelah selesai klik eclipse.exe maka akan muncul splash screen seperti ini

setelah itu akan muncul tampilan welcome eclipse, pilih workbench maka akan muncul halaman kerja eclipse setelah itu ngapain lagi? sabar-sabar... untuk membuat aplikasi android kita membutuhkan plugin tambahan yaitu android SDK dan ADT untuk menginstalnya  klik menu help lalu install new software..


setelah itu pilih add kemudian local dan browse file android sdk kemudian klik ok..ok, oh ya sebaiknya file android sdk di extract terlebih dahulu. setelah proses instalasi android sdk selesai yang selanjutnya diinstal adalah android ADT, caranya sama hanya saja yang dipilih bukan local tapi archive, untuk ADT ini tidak perlu di extract.

Saat diinstal ceklis saja semua pluginnya lalu klik next, tunggu sampai proses instalasi selesai kemudian restart eclipse.
 selanjutnya adalah membuat AVD, apa itu ? emulator untuk menjalankan program android yang kita buat
caranya klik ikon android seperti pada panah no 1, lalu klik new, isi nama sesuai keinginan, pilih target sesuai aplikasi yang akan dibuat misal jika kita ingin membuat aplikasi untuk android ginger bread maka pilih android 2.3.3, ukuran SD card isi sesuai keinginan setelah itu klik create AVD, emulator pun siap digunakan. :-)

untuk menjalankannya klik emulator yang sudah dibuat lalu klik start. lalu akan muncul boot screen seperti ini.
tunggu beberapa lama, karena emulator ini cukup berat ketika dijalankan. ini tergantung spesifikasi komputer masing-masing, biasanya membutuhkan waktu 5 menit sampai homescreen muncul. setelah ber lama lama kemudian maka munculah tampilan seperti di bawah ini.

 Demikian lah belajar pemrograman android bagian 1, untuk pengcodingan akan di bahas pada posting berikutnya.