Cara Membuat Layout Dynamic di Android

Cara Membuat Layout Dynamic di Android

22:20:00
Untuk lebih mudahnya maka pada tutorial ini saya akan memberikan 2 contoh sekaligus.
1. Linear Layout
Ikutilah langkah berikut:
  1. Buatlah sebuah project Android di Eclipse.
  2. Kemudian, buka file xml yang berada di direktori res>layout.
  3. Kemudian, ubah source code di dalamnya menjadi seperti berikut.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <?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>
  4. 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).
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    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);
                }
            });
        }
     
         
    }
  5. 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
  1. Buatlah sebuah project android.
  2. Buka file xml yang berada di direktori res>layout dan ubah source code di dalamnya menjadi seperti berikut.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <?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>
  3. Buka file java yang berada di direktori src dan ubah source code di dalamnya menjadi seperti berikut.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    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);
                }
            });
        }  
    }
  4. Running projectnya dan outputnya akan seperti berikut.
Gambar : 0.3

Gambar : 0.4

About

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Next
« Prev Post
Previous
Next Post »
Subscribe to: Post Comments (Atom)