Membuat Desain Interface Android Dinamis Dari Kode Program Tanpa XML

Artikel Membuat Desain Interface Android Dinamis Dari Kode Program Tanpa XML ini penulis buat karena pernah mengalami harus membuat tampilan Aplikasi Android yang dinamis. Misalnya jumlah TextView atau jumlah Button yang ada harus dibuat secara dinamis mengikuti jumlah data di Database.

Hal ini menyebabkan tampilan tidak bisa dibuat menggunakan file XML di res/layout seperti biasa, karena akan menjadi tampilan yang statis. Tetapi tentu saja kurang praktis jika membuat tampilan aplikasi seperti kebanyakan aplikasi yang statis tampilannya tetapi menggunakan kode program yang dinamis, karena cukup sulit untuk mengubah-ubah tampilan secara cepat.


Caranya pertama kita buat Project Android baru di Eclipse. Kemudian di MainActivity.java silakan masukkan kode program berikut ini :

package com.amijaya.design_interface_programmatically_without_xml;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

// http://cariprogram.blogspot.com
// nuramijaya@gmail.com

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
ScrollView sv = new ScrollView(this);
LinearLayout l = new LinearLayout(this);
l.setOrientation(LinearLayout.VERTICAL);
sv.addView(l);
HorizontalScrollView hv = new HorizontalScrollView(this);
l.addView(hv);

String[][] data = {{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"},{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q"}};

LinearLayout ll = tampiltabel(data);
ll.setOrientation(LinearLayout.VERTICAL);

TextView textview1 = new TextView(this);
textview1.setText("Say Something here");
ll.addView(textview1);
Button button1 = new Button(this);
button1.setText("Click Me!");
button1.setWidth(100);
button1.setHeight(80);
ll.addView(button1);

button1.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "Hello Boys", Toast.LENGTH_LONG).show();
}
});

hv.addView(ll);

this.setContentView(sv);

}

public LinearLayout tampiltabel(String[][] data)
{
LinearLayout llv = new LinearLayout(this);
llv.setOrientation(LinearLayout.VERTICAL);
for (int i=0; i<data.length; i++)
{
LinearLayout llh = new LinearLayout(this);
llh.setOrientation(LinearLayout.HORIZONTAL);
llv.addView(llh);

for (int j=0; j<data[0].length; j++)
{
TextView textview = new TextView(this);
textview.setText(data[i][j]);
textview.setWidth(20);
llh.addView(textview);
}
}
return llv;
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

Pada desain tampilan pada file activity_main.xml tidak perlu diubah, karena pada dasarnya layout ini juga tidak akan digunakan pada aplikasi :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />

</RelativeLayout>

Konfigurasi di AndroidManifest.xml juga tidak perlu dirubah :

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

    <uses-sdk
        android:minSdkVersion="9"
        android:targetSdkVersion="16" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.amijaya.design_interface_programmatically_without_xml.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Hasilnya ketika dijalankan akan muncul tampilan seperti biasa tetapi custom dari kode program, jadi tidak berdasarkan Layout XML. Kemudian Button yang ada juga bisa diklik akan mengeluarkan Toast.

File project selengkapnya dapat anda download disini. Jika bingung cara download, silakan lihat caranya disini.

Semoga berguna ^_^