Tinggalkan pesan mu disana =>>

Sabtu, 23 Januari 2016

Kodding Splash dan ImageButton pada Eclipse Android serta pengertian bagian eclipse Part I

Berhubung sekarang lagi ngetrend ngetrend nya smartphone berbasis ANDROID, dan kebetulan juga ada makul berbasis android. Jadi pas banget kan aku post ini.

Berikut ini aku akan jelasin tutorial membuat "Aplikasi Matematika Learning Berbasis Android for Eclipse"

lets chekidotdotdot :

Sebelumnya mari sekilas kita mengenal pengertian dari beberapa bagian dalam ECLIPSE :

Eclipse 
Eclipse adalah sebuah IDE (Integrated Development Environment) untuk mengembangkan perangkat lunak dan dapat dijalankan di semua platform (platform-independent). 


Linear Layout
Linear Layout adalah jenis layout yang ada di Activity.  yang berjenis file .xml saat kita mendesain Aplikasi Android dan mempunyai dua jenis linearlayout yaitu vertikal dan hoizontal. Untuk di Android Studio ini peletakan folder layout.xml berada di  folder resource di bawah folder drawable.  

Splash Screen
Splash Screen adalah tampilan pertama program sebelum masuk ke menu utama atau tampilan utama.


Relative Layout
Relative Layout digunakan untuk mengatur posisi secara relatif berdasarkan widget yang lain dan parentnya.

File .java
File .java biasanya berisikan kode atau logika utama program yang dituliskan dalam bahasa java. Java yang digunakn dalam android hampir irip dengan java yang kita gunakan untuk program aplikasi dektop, namun ditambahkan package-pakage khusus yang dibutuhkan android.

File .xml 
File .xml berkaitan dengan tampilan/layout program. File .xml biasanyabjuga digunakan untuk menyimpan values contohnya strings yang dipakai di layout, dan juga properti lain seperti mengatur animasi, membuat list, membuat efek gradasi atau gradient dan lain-lain.

File AndroidManifest
File AndroidManifest juga berakhiran .xml nsmun file ini digunakan untuk menyiman data-data yang sangat penting untuk menjalankan aplikasi Android. Seperti versi berapa android, deklarasi aktivitas-aktivitas deklarasi nama aplikasi, deklarasi ikon aplikasi dan lain sebagainya.

Image View
Image View adalah komponen dasar android yang tugasnya menampilkan gambar. Gambar dikomponen image view bisa diambil dari Assets atau dari Drawable.
Cukup sekian penjelasan mengenai beberapa bagian pada eclipse sisa nya buat yang mau lebih lengkap bisa tanyain di mbah GOOGLE dijamin de pasti semua pertanyaan kalian bisa dijawab :D 

Uda gak usah basa basi lagi, langsung aja masuk ke kodding ya :

Tampilan Awal

 Nanti tampilan diatas merupakkan tampilan awal splash kita, berikut step step awal membuat aplikasi Eclipse nya lets ....

  1.  Jalankan eclipse, File > New > Android Project
  2.  Isikan kotak dialog new seperti berikut
Project Name
Matematika
Contents
Create new project in workspace
Built Target
Android 2.1
Application Name
Matematika
Package Name
Matematika
Create Activity
Activity_matematika
Min SDK Version
7

3. Pada package explorer, pilih Mateatika > res > layout >Matematika.xml
Tuliskan kode dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#BA55D3"> 
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MATEMATIKA LEARNING"
            android:textSize="22dp"
            android:textStyle="bold" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/splash" /> 

       <TextView
            android:paddingTop="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Loading..."
            android:textStyle="bold"/> 
   </LinearLayout>
</LinearLayout>


4. Pada Matematika.Java tulis kode berikut ini :

package com.droid.matematika;



import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;

public class Matematika extends Activity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          this.requestWindowFeature(Window.FEATURE_NO_TITLE);
          setContentView(R.layout.activity_matematika);
          Thread logotimer = new Thread() {
                    public void run() {
                     try {
                      int logotimer = 0;
                      while (logotimer < 5000) {
                       sleep(100);
                       logotimer = logotimer + 100;
                      };
                      startActivity(new Intent(getBaseContext(), Menu.class));
                     } catch (InterruptedException e) {
                      e.printStackTrace();
                     } finally {
                      finish();
                     }
                    }
                   };
                   logotimer.start();
}
}


"Ini merupakan koding splash pada anroid" 
spalsh sama seperti loading



Tampilan Menu Utama 

 


4.  Pada package explorer, pilih Matematika > klik kanan –> New> Android XML File  > beri nama Menu.xml


Tuliskan kode dibawah ini :


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/menu"> 
        <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text=" "
             android:textStyle="bold"
             android:textSize="22dp"/>
    <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="MENU UTAMA"
             android:textStyle="bold"
             android:textSize="22dp"/>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:orientation="vertical" >
        
         <ImageButton
             android:id="@+id/materi"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/materi"
             android:textStyle="bold"
             android:textSize="12dp"/>
        
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text=" "
             android:textStyle="bold"
             android:textSize="15dp"/>
         
         <ImageButton
             android:id="@+id/game"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/game"
             android:textStyle="bold"
             android:textSize="12dp"/>
        
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text=" "
             android:textStyle="bold"
             android:textSize="15dp"/>
          <ImageButton
             android:id="@+id/bantuan"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/bicon"
             android:textStyle="bold"
             android:textSize="12dp"/>

          <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text=" "
             android:textStyle="bold"
             android:textSize="15dp"/>
         
         <ImageButton
             android:id="@+id/tentang"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/tentangicon"
             android:textStyle="bold"
             android:textSize="12dp"/>
        
       
         <LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="50dp"
         android:gravity="center"
         android:orientation="vertical">
        </LinearLayout>
 </LinearLayout>   
</LinearLayout>


 Pada package explorer, pilih Matematika > klik kanan –New> Class > beri nama Menu.java
Tuliskan kode dibawah ini :



package com.droid.matematika;

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

public class Menu  extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.menu);
       
        ImageButton go =
                 (ImageButton)findViewById(R.id.materi);
        ImageButton go3 =
                 (ImageButton)findViewById(R.id.game);
        ImageButton go1 =
                 (ImageButton)findViewById(R.id.tentang);
        ImageButton go2 =
                 (ImageButton)findViewById(R.id.bantuan);
       
        go.setOnClickListener(new View.OnClickListener()
        {
          public void onClick(View v) {
                 //TODO Auto-generated method stub
                 Intent i = new Intent(Menu.this, Materi.class);
                 i.putExtra("pesan", "dari Menu");
                 startActivity(i);
          }
        });
       
        go3.setOnClickListener(new View.OnClickListener()
        {
          public void onClick(View v) {
                 //TODO Auto-generated method stub
                 Intent iv = new Intent(Menu.this, Game.class);
                 startActivity(iv);
          }
        });
       
        go1.setOnClickListener(new View.OnClickListener()
        {
          public void onClick(View v) {
                 //TODO Auto-generated method stub
                 Intent ii = new Intent(Menu.this, Tentang.class);
                 startActivity(ii);
          }
        });
       
        go2.setOnClickListener(new View.OnClickListener()
        {
          public void onClick(View v) {
                 //TODO Auto-generated method stub
                 Intent iii = new Intent(Menu.this, Bantuan.class);
                 startActivity(iii);
          }
        });
    }
}
Jangan lupa atur manifesh nya ya :
Pada androidmanifesh ketikkan koding berikut :

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

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.droid.matematika.Matematika"
            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="Menu"/>
        
               </application>

</manifest>


 

S   Sampai ke menu utama dulu ya, di sini menu utamanya dalam bentuk imagebutton, jadi kalian siapin gambarnya dan masukkan ke drawable pada res.
      Cara membuat drawable pada res yaitu : Klik kanan pada res -> pilih new -> Folder -> Ketik drawable. 
       Cara memasukkan gambarnya ke drawable :  Copy image yang mau kamu jadiin imagebutton (icon) lalu, klik kanan pada folder drawable yang sudah kamu buat tadi kemudia pilih paste.
      pada koding gambar, pastikan nama yang kamu buat sama dengan nama yang kamu ketik di koding.

untuk next aplikasi Matematika Learning lanjuut ke next posting yaaaaa ........

Tidak ada komentar: