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