Dalam pemrograman Android, khususnya untuk aplikasi Native.
Anda harus menguasai Java dan XML. Java sebagai algoritmanya dan XML
sebagai UI-nya. Seperti yang Anda tahu, bahwa untuk mendesain UI di XML
itu sifatnya statik. Maksudnya ialah apabila Anda hanya mendesain 3
EditText di XML maka, pada saat di running hasilnya pun akan tetap
menghasilkan 3 EditText. Namun, untuk kasus tertentu dimana, apabila
algoritma programnya membutuhkan desain layout yang dynamic maka, file
XML saja tidak bisa meng-handle permasalahan tersebut. Nah, maksud dari
tutorial ini adalah untuk menciptakan layout yang dynamic sehingga user
bisa dengan sendirinya menambahkan sebuah Button, EditText atau TextView
melalui sebuah komponen yang ada. Misal, untuk contoh kasus ini sering
digunakan pada TableLayout. Dimana yang Anda tahu bahwa pada
TableLayout, Anda bisa menambahkan TableRow dan komponen lainnya.
Seperti program menampilkan biodata diri yang mana di dalamnya terdapat
sebuah TableLayout untuk menampilkan Data - Data Biodata yang sudah user
input. Teknik ini tidak hanya berlaku pada TableLayout saja melainkan
bisa digunakan pada semua komponen yang ada di Android.
Untuk lebih mudahnya maka pada tutorial ini saya akan memberikan 2 contoh sekaligus.
1. Linear Layout
Ikutilah langkah berikut:
Untuk lebih mudahnya maka pada tutorial ini saya akan memberikan 2 contoh sekaligus.
1. Linear Layout
Ikutilah langkah berikut:
- Buatlah sebuah project Android di Eclipse.
- Kemudian, buka file xml yang berada di direktori res>layout.
- Kemudian, ubah source code di dalamnya menjadi seperti berikut.
<?xml version = "1.0" encoding = "utf-8"?> <LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:id = "@+id/linear1" android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" > <Button android:id = "@+id/btnTambahEditText" android:text = "Tambah EditText" android:layout_width = "fill_parent" android:layout_height = "wrap_content" /> </LinearLayout>
- Kemudian, buka file java yang berada di direktori src dan ubah
source code di dalamnya menjadi seperti berikut. (Catatan: Nama Package
dan class nya sesuaikan dengan yang Anda buat sendiri).
package jaco.belajar; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.LinearLayout; /** * * @author Yudi Setiawan * */ public class MainActivity extends Activity { @Override protected void onCreate(Bundle b) { super.onCreate(b); setContentView(R.layout.activity_main); final LinearLayout linear1 = (LinearLayout) findViewById(R.id.linear1); Button btnTambahEditText = (Button) findViewById(R.id.btnTambahEditText); btnTambahEditText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { LinearLayout.LayoutParams linearParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT); EditText et = new EditText(MainActivity.this); et.setLayoutParams(linearParams); linear1.addView(et); } }); } }
- Sekarang running program tersebut maka, outputnya akan terlihat seperti pada gambar berikut. Lihat, mudah bukan cara membuat komponen dynamic di Android.
Gambar : 0.1
Gambar : 0.2
Sedikit keterangan, bahwa fungsi LinearLayout.LayoutParams ialah untuk membuat width dan height dari komponennya.
2. Table Layout
- Buatlah sebuah project android.
- Buka file xml yang berada di direktori res>layout dan ubah source code di dalamnya menjadi seperti berikut.
<?xml version = "1.0" encoding = "utf-8"?> <ScrollView xmlns:android = "http://schemas.android.com/apk/res/android" android:layout_width = "match_parent" android:layout_height = "match_parent" android:scrollbars = "vertical" > <LinearLayout android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:orientation = "vertical" > <RelativeLayout android:layout_width = "fill_parent" android:layout_height = "wrap_content" > <Button android:id = "@+id/btnTambahNama" android:text = "Tambah Nama" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_alignParentLeft = "true" /> <Button android:id = "@+id/btnTambahUmur" android:text = "Tambah Umur" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_alignParentRight = "true" /> </RelativeLayout> <TableLayout android:id = "@+id/table1" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:stretchColumns = "2" > </TableLayout> </LinearLayout> </ScrollView>
- Buka file java yang berada di direktori src dan ubah source code di dalamnya menjadi seperti berikut.
package jaco.belajar; import android.app.Activity; import android.os.Bundle; import android.text.InputType; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TableLayout; import android.widget.TableRow; import android.widget.TextView; /** * * @author Yudi Setiawan * */ public class MainActivity extends Activity { @Override protected void onCreate(Bundle b) { super.onCreate(b); setContentView(R.layout.activity_main); final TableLayout table1 = (TableLayout) findViewById(R.id.table1); final TableRow.LayoutParams rowParams = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT); rowParams.setMargins(0, 0, 20, 0); Button btnTambahNama = (Button) findViewById(R.id.btnTambahNama); btnTambahNama.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { TableRow trNama = new TableRow(MainActivity.this); TextView tvNama = new TextView(MainActivity.this); tvNama.setText("Nama"); tvNama.setLayoutParams(rowParams); TextView tvTitik = new TextView(MainActivity.this); tvTitik.setText(":"); EditText etNama = new EditText(MainActivity.this); trNama.addView(tvNama); trNama.addView(tvTitik); trNama.addView(etNama); table1.addView(trNama); } }); Button btnTambahUmur = (Button) findViewById(R.id.btnTambahUmur); btnTambahUmur.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { TableRow trUmur = new TableRow(MainActivity.this); TextView tvUmur = new TextView(MainActivity.this); tvUmur.setText("Umur"); tvUmur.setLayoutParams(rowParams); TextView tvTitik = new TextView(MainActivity.this); tvTitik.setText(":"); EditText etUmur = new EditText(MainActivity.this); etUmur.setInputType(InputType.TYPE_CLASS_NUMBER); trUmur.addView(tvUmur); trUmur.addView(tvTitik); trUmur.addView(etUmur); table1.addView(trUmur); } }); } }
- Running projectnya dan outputnya akan seperti berikut.
Gambar : 0.3
Gambar : 0.4
0 comments
Post a Comment