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

Jalankan eclipse, File > New > Android Project
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>

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>

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

Sabtu, 23 Januari 2016

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

Tidak ada komentar:

My Profil

Jam

Calender