Kode di balik Tombol di HP Android

Masih banyak yang menanyakan tentang proses pembuatan tombol di android. Tombol yang saya maksudkan adalah ketika di pencet maka akan membawa kita ke halaman lain, sama seperti link pada web site.
Link pada android itu sendiri adalah gampang2 susah karena orientasi android yang portable.

Berikut adalah logika tombol atau link pada android.
Untuk mempermudah memahami logika tombol maka di sini saya akan membuat contoh sederhana dengan dua halaman, satunya berwarna merah dan satunya lagi berwarna hijau. Ketika sampai di halaman merah akan ada tombol yang kalau di klik akan menuju ke halaman hijau begitupun sebaliknya, seperti di tunjukan pada gambar berikut.
Contoh ini memang terasa sangat sederhana tapi kalau kita memahami benar implikasi cara kerja dan logika tombol maka akan membuka cakrawala baru dalam proses belajar untuk menjadi developer android yang tangguh.

Akan ada 7 buah file yang secara bersama merenda perkawinan antara halaman hijau dan halaman merah tersebut di atas sehingga bisa berhubungan antara satu dengan yang lain-nya melalui sebuah tombol, bahkan proses kerjanya akan meniru aplikasi benaran dalam arti dapat di install ke device.

Pada awal jaman android, aplikasi kecil seperti ini sering di pakai sebagai 'obor'/senter dengan cara mengubah salah satu halaman dengan warna putih bersih, sehingga kalau di kegelapan malam layar HP akan terang-benderang bagai lampu neon.

Ke 7 buah file yang saya singgung di atas antara lain
  • 2 buah class java untuk ke 2 halaman
  • 2 buah halaman xml sebagai tampang untuk ke 2 halaman
  • 1 buah halaman xml untuk menyimpan informasi tentang warna
  • 1 buah halaman xml untuk menyimpan semua text(tulisan)
  • 1 buah halaman xml yang di sebut AndroidManifest.xml 
Ke 2 class java antara lain (saya kasih nama sesuai logika saya sendiri, silahkan menamakan class sesuai logika masing2)
  • HalamanMerah.java
  • HalamanHijau.java
Isi dari HalamanMerah.java adalah sbb:
package com.vik_sintus.projects.pencetTombol;

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


public class HalamanMerah extends Activity {
    /** aktivitas awal yang akan di pakai mirip home page lah. */
    @Override
    public void onCreate(Bundle saveInstanceState) {
        super.onCreate(saveInstanceState);
        setContentView(R.layout.merah);
        Button tombolHijau = (Button) findViewById(R.id.tombol_hijau);
        tombolHijau.setOnClickListener(new View.OnClickListener() {
   
   
   @Override
   public void onClick(View v) {
   Intent intent = new Intent(
     HalamanMerah.this,
     HalamanHijau.class
   );
   startActivity(intent);
    
   }
  });
    }
}
Isi dari HalamanHijau.java adalah:
package com.vik_sintus.projects.pencetTombol;

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

public class HalamanHijau extends Activity {

 @Override
 protected void onCreate(Bundle saveInstantState) {
  super.onCreate(saveInstantState);
  setContentView(R.layout.hijau);
  Button tombolMerah = (Button) findViewById(R.id.tombol_merah);
  tombolMerah.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    finish();

   }
  });
 }

}
Sebagai UI(user interface) dari kedua class di atas adalah dua buah halaman xml yang saya beri nama merah.xml dan hijau.xml.
Tadi di HalamanMerah.java sudah mengisyaratkan HP untuk melihat bentuk dari halaman merah di setContentView(R.layout.merah);
 Berikut adalah isi dari merah.xml
<?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:gravity="bottom|center_horizontal"
    android:background="@color/latar_merah"
    >
    <TextView 
    android:id="@+id/tulisan_tombolMerah"
    android:text="@string/tulisanHalamanMerah"
    android:textColor="#cccccc" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
     />
    <Button
    android:id="@+id/tombol_hijau"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/tulisan_keHijau"
    android:textColor="@color/warnaTextHijau"
    />
</LinearLayout>
Demikian juga dengan halaman hijau, telah di isyaratkan oleh HalamanHijau.java untuk melihat bentuk halaman hijau di setContentView(R.layout.hijau);
Berikut adalah isi dari hijau.xml
<?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:gravity="bottom|center_horizontal"
    android:background="@color/latar_hijau"
    >
    <TextView 
    android:id="@+id/tulisan_tombolHijau"
    android:text="@string/tulisanHalamanHijau"
    android:layout_width="wrap_content"
    android:textColor="#000000" 
    android:layout_height="wrap_content" 
     />
    <Button
    android:id="@+id/tombol_merah"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/tulisan_keMerah"
    android:textColor="@color/warnaTextMerah"
    />
</LinearLayout>
Berikut adalah untuk semua tulisan yang akan nampak di layar dan memakai default name bawaan android strings.xml
Isi dari strings.xml adalah tersirat pada isi @string di halaman hijau.xml dan halaman merah.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="tulisan_keMerah">Pergi ke Halaman Merah</string>
    <string name="tulisan_keHijau">Pergi ke Halaman Hijau</string>
    <string name="nama_aplikasi">Contoh Pencet Tombol</string>
    <string name="tulisanHalamanHijau">Ini Halaman Hijau</string>
    <string name="tulisanHalamanMerah">Ini Halaman Merah</string>
</resources>
Berikut adalah isi dari color.xml untuk mengatur warna halaman yang isinya di ambil dari @color
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="latar_merah">#FF0000</color>
<color name="latar_hijau">#00FF00</color>
<color name="warnaTextHijau">#006600</color>
<color name="warnaTextMerah">#FF0000</color>
</resources>
Berikut adalah isi dari AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.vik_sintus.projects.pencetTombol"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="3" />

    <application 
        android:icon="@drawable/icon" 
        android:label="@string/nama_aplikasi">
        <activity 
            android:name=".HalamanMerah"
            android:label="@string/nama_aplikasi">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.vik_sintus.projects.pencetTombol.HalamanHijau" />

    </application>
</manifest>
Please klik like kalau suka dengan artikel ini ..........Selamat mencoba

6 comments:

  1. makasih banget artikel nya bermanfaat (y)

    ReplyDelete
  2. Bagai mana kalau mau nambah layer satu lagi gan.
    Misalnya kuning.java.

    script buat merah.java bagaimana?

    ReplyDelete
  3. pada metode onCreate tambahkan Button tombolKuning
    pada metode onClick tambahkan HalamanKuning.class
    Isi HalamanKuning.java = HalamanHijau.java

    lengkapi semua xml untuk user interfacenya
    silahkan di coba dulu nanti kalau macet nanti kita akan lihat dimana kemacetan-nya

    ReplyDelete