Tutorial Membuat Layout Dinamic di Android

Discussion in 'Android' started by seotog, Jul 10, 2018.

  1. seotog

    seotog Guest

    sampul website.jpg

    Pada pemrograman Android, khususnya untuk di aplikasi Native. Kita harus menguasai Java dan XML. Java sebagai algoritmanya dan XML sebagai UI-nya. Seperti yang kita tahu, bahwa untuk mendesain UI di XML itu sifatnya statik. Maksudnya ialah apabila kita 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 untuk permasalahan tersebut.

    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.

    Di tutorial kali ini akan ada 2 contoh sekaligus:

    1. Linear Layout

    Ikutilah langkah berikut:

    a. Buatlah sebuah project Android di Eclipse.

    b. Kemudian, buka file xml yang berada di direktori res>layout.

    c. Kemudian, ubah source code di dalamnya menjadi seperti berikut.

    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    3 android:id = "@+id/linear1"
    4 android:layout_width = "match_parent"
    5 android:layout_height = "match_parent"
    6 android:eek:rientation = "vertical"
    7 >
    8
    9 <Button
    10 android:id = "@+id/btnTambahEditText"
    11 android:text = "Tambah EditText"
    12 android:layout_width = "fill_parent"
    13 android:layout_height = "wrap_content"
    14 />
    15
    16 </LinearLayout>

    d. Kemudian, buka file java yang berada di direktori src dan ubah source code di dalamnya menjadi seperti berikut. (Catatan: Nama Package dan classnya disesuaikan dengan yang Anda buat sendiri).

    1 package jaco.belajar;
    2
    3 import android.app.Activity;
    4 import android.os.Bundle;
    5 import android.view.View;
    6 import android.widget.Button;
    7 import android.widget.EditText;
    8 import android.widget.LinearLayout;
    9
    10 /**
    11 *
    12 * @author Dede Sudrajat
    13 *
    14 */
    15
    16 public class MainActivity extends Activity {
    17
    18 @Override
    19 protected void onCreate(Bundle b) {
    20 super.onCreate(b);
    21 setContentView(R.layout.activity_main);
    22
    23 final LinearLayout linear1 = (LinearLayout) findViewById(R.id.linear1);
    24 Button btnTambahEditText = (Button) findViewById(R.id.btnTambahEditText);
    25 btnTambahEditText.setOnClickListener(new View.OnClickListener() {
    26
    27 @Override
    28 public void onClick(View v) {
    29 LinearLayout.LayoutParams linearParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    30 EditText et = new EditText(MainActivity.this);
    31 et.setLayoutParams(linearParams);
    32 linear1.addView(et);
    33 }
    34 });
    35 }
    36
    37
    38 }

    e. Sekarang running program tersebut maka, outputnya akan terlihat seperti pada gambar berikut. Lihat, mudah bukan cara membuat komponen dynamic di Android.

    [caption id="attachment_2231" align="aligncenter" width="480"][​IMG] Gambar 01[/caption][caption id="attachment_2232" align="aligncenter" width="480"][​IMG] Gambar 02[/caption]
    Sedikit keterangan, bahwa fungsi LinearLayout.LayoutParams ialah untuk membuat width dan height dari komponennya.

    2. Table Layout

    a. Buatlah sebuah project android.

    b. Buka file xml yang berada di direktori res>layout dan ubah source code di dalamnya menjadi seperti berikut.

    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <ScrollView xmlns:android = "http://schemas.android.com/apk/res/android"
    3 android:layout_width = "match_parent"
    4 android:layout_height = "match_parent"
    5 android:scrollbars = "vertical"
    6 >
    7
    8 <LinearLayout
    9 android:layout_width = "fill_parent"
    10 android:layout_height = "wrap_content"
    11 android:eek:rientation = "vertical"
    12 >
    13
    14 <RelativeLayout
    15 android:layout_width = "fill_parent"
    16 android:layout_height = "wrap_content"
    17 >
    18
    19 <Button
    20 android:id = "@+id/btnTambahNama"
    21 android:text = "Tambah Nama"
    22 android:layout_width = "wrap_content"
    23 android:layout_height = "wrap_content"
    24 android:layout_alignParentLeft = "true"
    25 />
    26
    27 <Button
    28 android:id = "@+id/btnTambahUmur"
    29 android:text = "Tambah Umur"
    30 android:layout_width = "wrap_content"
    31 android:layout_height = "wrap_content"
    32 android:layout_alignParentRight = "true"
    33 />
    34 </RelativeLayout>
    35
    36 <TableLayout
    37 android:id = "@+id/table1"
    38 android:layout_width = "fill_parent"
    39 android:layout_height = "wrap_content"
    40 android:stretchColumns = "2"
    41 >
    42
    43 </TableLayout>
    44 </LinearLayout>
    45 </ScrollView>

    c. buka file java yang berada di direktori src dan ubah source code di dalamnya menjadi seperti berikut.

    1 package jaco.belajar;
    2
    3 import android.app.Activity;
    4 import android.os.Bundle;
    5 import android.text.InputType;
    6 import android.view.View;
    7 import android.widget.Button;
    8 import android.widget.EditText;
    9 import android.widget.TableLayout;
    10 import android.widget.TableRow;
    11 import android.widget.TextView;
    12
    13 /**
    14 *
    15 * @author Dede Sudrajat
    16 *
    17 */
    18
    19 public class MainActivity extends Activity {
    20
    21 @Override
    22 protected void onCreate(Bundle b) {
    23 super.onCreate(b);
    24 setContentView(R.layout.activity_main);
    25
    26 final TableLayout table1 = (TableLayout) findViewById(R.id.table1);
    27 final TableRow.LayoutParams rowParams = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT);
    28
    29 rowParams.setMargins(0, 0, 20, 0);
    30 Button btnTambahNama = (Button) findViewById(R.id.btnTambahNama);
    31 btnTambahNama.setOnClickListener(new View.OnClickListener() {
    32
    33 @Override
    34 public void onClick(View v) {
    35 TableRow trNama = new TableRow(MainActivity.this);
    36 TextView tvNama = new TextView(MainActivity.this);
    37 tvNama.setText("Nama");
    38 tvNama.setLayoutParams(rowParams);
    39 TextView tvTitik = new TextView(MainActivity.this);
    40 tvTitik.setText(":");
    41 EditText etNama = new EditText(MainActivity.this);
    42 trNama.addView(tvNama);
    43 trNama.addView(tvTitik);
    44 trNama.addView(etNama);
    45 table1.addView(trNama);
    46 }
    47 });
    48
    49 Button btnTambahUmur = (Button) findViewById(R.id.btnTambahUmur);
    50 btnTambahUmur.setOnClickListener(new View.OnClickListener() {
    51
    52 @Override
    53 public void onClick(View v) {
    54 TableRow trUmur = new TableRow(MainActivity.this);
    55 TextView tvUmur = new TextView(MainActivity.this);
    56 tvUmur.setText("Umur");
    57 tvUmur.setLayoutParams(rowParams);
    58 TextView tvTitik = new TextView(MainActivity.this);
    59 tvTitik.setText(":");
    60 EditText etUmur = new EditText(MainActivity.this);
    61 etUmur.setInputType(InputType.TYPE_CLASS_NUMBER);
    62 trUmur.addView(tvUmur);
    63 trUmur.addView(tvTitik);
    64 trUmur.addView(etUmur);
    65 table1.addView(trUmur);
    66 }
    67 });
    68 }
    69 }

    d. Running projectnya dan outputnya akan seperti berikut.

    [caption id="attachment_2233" align="aligncenter" width="480"][​IMG] Gambar 03[/caption]


    [caption id="attachment_2234" align="aligncenter" width="480"][​IMG] Gambar 04[/caption]


    Sekian untuk tutorial membuat layout dinamic di Android, Untuk kalian yang sedang mencari info lowongan kerja khususnya di bagian IT silahkan mampir ke sini.



    Salam Sukses

    TOG Indonesia
     
  2. Ganyool

    Ganyool Member

    Joined:
    May 20, 2016
    Messages:
    421
    Likes Received:
    45
    Trophy Points:
    28
    Wah ini pake eclipse yak? ane pakenya anstud hehje
     
Loading...

Share This Page