Tuesday, December 4, 2018

Home » » Radio Button, CheckBox, EditText

Radio Button, CheckBox, EditText

No comments
Paket widget pada dasarnya merupakan visualisasi dari elemen user integace (UI) yang digunakan pada layar aplikasi Android di mana kita dapat merancang sendiri sesuai kebutuhan. Widget di dalam Android ditampilkan dengan konsep View. Di mana aplikasi Android pada umumnya menggunakan widget sebagai Layout XML.

Untuk mengimplementasikan widget, selain file java kita juga membutuhkan tambahan dua file. Berikut ini adalah file-file yang umumnya kita butuhkan apabila kita membuat widget :

1. File Java. Berupa file java di mana merupakan file yang mengimplementasikan aksi dari widget. Jika kita mendefinisikan suatu widget beserta posisinya di layar yang didefinisikan dari file XML, kita harus melakukan coding di file java di mana kita dapat mengambil semua nilai atribut dari tata letak file XML yang didefinisikan.
2. File XML. Sebuah file yang mendefinisikan komponen elemen-elemen XML yang digunakan untuk inisialisasi widget serta atribut yang mendukungnya.
3. Layout XML. File XML menggambarkan atau penambahan keterangan pada layout widget kita. Beberapa komponen widget akan kita bahas saat ini. Widget TextView, menampilkan teks ke layar dan memiliki optional bisa dilakukan edit, tetapi secara default TextView tidak dapat diedit. Untuk dapat melakukan edit harus menggunakan subclass yang berfungsi untuk menampilkan TextView. 

EditText adalah kostumisasi TextView dimana menjadi TextView yang dapat mengkonfigurasi dirinya sendiri sehingga dapat diedit.  Sedangkan widget RadioButton/RadioGroup biasanya digunakan bersama-sama. Di dalam satu RadioGroup terdapat beberapa RadioButton. Dan di dalam satu RadioGroup user hanya dapat melakukan satu check/pemilihan RadioButton. 

Langsung Saja Kita Membuat Widget seperti dibawah ini :
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:text="Tuliskan Nama anda"
        android:textStyle="bold" />

    <Button
        android:text="Proses"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_above="@+id/editHasil"
        android:layout_alignParentStart="true"
        android:layout_marginStart="16dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:hint="name"
        android:ems="10"
        android:id="@+id/editNama"
        android:layout_below="@+id/textView2"
        android:layout_alignParentStart="true"
        android:layout_marginTop="10dp" />

    <TextView
        android:text="TextView"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:id="@+id/editHasil"
        tools:fontFamily="casual"
        android:gravity="center_horizontal"
        tools:textColor="#00ffff"
        android:layout_marginBottom="19dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/editUsia"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="6dp"
        android:layout_marginEnd="346dp"
        android:layout_marginBottom="7dp"
        android:text="Usia"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/editUsia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="4dp"
        android:layout_marginEnd="164dp"
        android:layout_marginBottom="79dp"
        android:ems="10"
        android:hint="usia"
        android:inputType="textPersonName" />

    <CheckBox
        android:text="CheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="45dp"
        android:id="@+id/cb" />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/activity_vertical_margin"></RadioGroup>

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Yellow"
        android:id="@+id/yellow"
        android:onClick="onRadioButtonClicked"
        android:layout_alignBottom="@+id/editHasil"
        android:layout_alignStart="@+id/button"
        android:layout_marginBottom="25dp" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Green"
        android:id="@+id/green"
        android:onClick="onRadioButtonClicked"
        android:layout_above="@+id/yellow"
        android:layout_alignStart="@+id/yellow" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Red"
        android:id="@+id/red"
        android:onClick="onRadioButtonClicked"
        android:layout_above="@+id/green"
        android:layout_alignStart="@+id/green" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Blue"
        android:id="@+id/blue"
        android:onClick="onRadioButtonClicked"
        android:layout_alignBaseline="@+id/cb"
        android:layout_alignBottom="@+id/cb"
        android:layout_alignEnd="@+id/red" />
</RelativeLayout>

untuk membuat layout pada aplikasi mobile dengan cara melakukan dengan tools yangersedia atau dengan coding langsung pada android studio. Yang pertama yaitu text view untuk menampilkan tulisan nama yang nanti akan menjadi panduan untuk input data nama dengan settingan layout dengan width dan hight wrap content.

Dengan id textnama. Kemudian edit text pada bagian ini digunakan untuk memasukan inputan data yang telah dimasukan, kemudian  pada layout yang diberikan sesuai dengan coding diatas dengan id textNama. Semuanya sama dengan edit dan textview, kemudian button digunakan untuk mengirim data ke server agar nanti data dapat diproses, dengan layout wrap_content dengan  text yang dibuat adalah “proses” kemudian idnya buttonProses.

 Pada text view dan edit yang lain sama cuman beda pada nama dan penggunaan id. Kemudian ada checkbox ini digunakan untuk memilih dengan pilihan yang sedikit dengan bentuk ceklist, bila ini di pilih maka akan ada masukan sesuai pilihan kemudian adalah radio button disini digunakan untuk memilih dengan sedikit pilihan dengan bentuk lingkaran. Disini radio button yang digunakan berbentuk group jadi nantinya akan dibungkus dalam satu layout vertical atau hirsontal pada urutannya. Disini dibuat vertical sesuai script.

Dengan pihihan text dan id yaitu blue dengan id blue, red dengan id red,  green dan yellow. Maka nanti hasilnya harus seperti yang dipilih diatas. Kemudian akan dikoneksi kan dengan menggunakan script dibawah ini yaitu pada file Main_Activity.java yang akan mengubungkan tampilan dengan file java.

Main_Activity.java
 package com.example.olip.bcb_widget;

  import android.graphics.Color;
  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.View;
  import android.widget.Button;
  import android.widget.CheckBox;
  import android.widget.EditText;
  import android.widget.RadioButton;
  import android.widget.RelativeLayout;
  import android.widget.TextView;
  
  public class MainActivity extends AppCompatActivity {

    EditText editNama, editUsia;
    TextView editHasil;
    Button button;
    CheckBox cb;
    RelativeLayout relativeLayout;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editNama = (EditText) findViewById(R.id.editNama);
        editUsia = (EditText) findViewById(R.id.editUsia);
        editHasil = (TextView) findViewById(R.id.editHasil);
        button = (Button) findViewById(R.id.button);
        cb = (CheckBox) findViewById(R.id.cb);

 relativeLayout = (RelativeLayout) findViewById(R.id.activity_main);
    }
  protected void onClick(View view) {

     String nama, usia;
     nama = editNama.getText().toString();
     usia = editUsia.getText().toString();
      editHasil.setText("" + nama + usia);
    }
    public void onCheckboxClicked(View view) {

        boolean checked = ((CheckBox) view).isChecked();
        if (checked)
            cb.setText("checkBox ini: Dicenthang");
        else
            cb.setText("checkBox ini: Tidak Dicenthang");
    }
 
    public void onRadioButtonClicked(View view) {  
boolean checked = ((RadioButton) view).isChecked();
  switch (view.getId()) {
   case R.id.blue:
     if (checked) {
       relativeLayout.setBackgroundColor(Color.BLUE);
        }
         break;
      case R.id.red:
    if (checked) {
       relativeLayout.setBackgroundColor(Color.RED);
         }
         break;
       case R.id.green:
     if (checked) {
         relativeLayout.setBackgroundColor(Color.GREEN);
         }
         break;
        case R.id.yellow:
      if (checked) {
          relativeLayout.setBackgroundColor(Color.YELLOW);
          }
         break;
        }
    }
}

Main_Activity.java disini akan meng import file dengan memasukan id yang ada sebelumnya yaitu view, button, checkbox, edit text, radio button, relative layout, Text view, disini nantinya akan menghubungkan dengan file Activity_main.xml kemudian kemudian akan membuat class public dengan class utama AppCombatActivity dan class turunan MainActivity lalu akan membuat id yang sudah dibuat sebelumnya, dengan id yaitu edit text ada editNama, editNim, kemudian textview editnama,  kemudian button id button, checkboc id cb, Realative layout id relative layout. Kemudian protected void onClick digunakan untuk menampilkan hasil sesuai koding diatas. Kemudian untuk menampilka checkbox lalu untuk menampilkan radio button sesuai yang aka dipilih sesuai case yang akan dipilih. Bila sudahn maka akan ditam[pilkan sesuai yag dipilih. Maka setelah sesuai hasilnya akan seperti gambar dibawah ini :
Membahas :
1. Tutorial Menginstal Android Studio
2. Pengenalan Pada Aplikasi Android Studio
3. Menggunakan Layout dan Widget View
4. Radio Button, CheckBox, EditText


Share:

0 Comments:

Post a Comment

  • Layout dan Widget View
    Langusung saja Kita Membuat Layout dan Widget View ikuti Langkah - Langkah Seperti di Bawah ini: 1. Buka Projek yang Sebelumnya kita buat ...

Labels