Wednesday, December 5, 2018

Membuat Spinner

Sebelum kita memulai praktik apa sie Spinner itu ?
Spinner adalah sebuah view di android yang bisa digunakan dengan mudah untuk membuat dropdown dari sebuah dataset yang dibuat dalam sebuah array. Dataset yang ingin ditampilkan dalam spinner harus dimasukkan di dalam sebuah adapter terlebih dahulu. Dalam kata lain, untuk membuat dropdown menggunakan Spinner, kita perlu membuat sebuah adapter untuk mengadapsi sekumpulan data yang dimasukkan ke dalam array.

Langsung kita praktikan buka file activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="Bahasa Pemrograman"
        android:textAlignment="center"
        android:textSize="24sp"
        android:textStyle="bold" />

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="#d11f08"
        android:entries="@array/arrays"
        android:padding="5dp" />

</LinearLayout>

Sedangkan untuk file MainActivity.java
package com.example.bcb.spinner;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Spinner spinner1;

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

        spinner1 = (Spinner) findViewById(R.id.spinner);
        spinner1.setOnItemSelectedListener(new CustomOnItemSelectedListener());
    }

    public class CustomOnItemSelectedListener implements AdapterView.OnItemSelectedListener {

        String firstItem = String.valueOf(spinner1.getSelectedItem());

        public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {
            if (firstItem.equals(String.valueOf(spinner1.getSelectedItem()))) {
                // ToDo when first item is selected
            } else {
                Toast.makeText(parent.getContext(),
                        "Kamu memilih : " + parent.getItemAtPosition(pos).toString(),
                        Toast.LENGTH_LONG).show();
            }
        }

        @Override
        public void onNothingSelected(AdapterView<?> arg) {

        }

    }
}

Hasil :


Share:

Basic ArrayAdapter

Kelas ArrayAdapter dapat menangani array objek Java sebagai input. Setiap objek Java dipetakan ke satu baris. Secara default, ini memetakan toString () metode objek ke tampilan dalam tata letak baris.

Secara default, kelas ini mengharapkan bahwa id sumber daya yang disediakan merujuk satu TextView. Di sini diberikan di bawah contoh contoh ArrayAdapter dasar.

Langusung Kita Praktikan saja :
Masukan script di bawah ini di File activity_main.xml

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>
 

Lalu buka file MainActivity.java ganti seperti di bawah ini :
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String[] values = new String[] {
  "Jakarta", "Bandung", "Yogyakarta", "Semarang", "Solo",
         "Bogor", "Tanggerang", "Bekasi", "Sulawesi",
          "Kalimantan","Papua","Irian","Palembang","Gorontalo"};

        ArrayAdapter<String> adapter = new ArrayAdapter<String>
  (this, android.R.layout.simple_list_item_1, values);

        ListView listView = (ListView) findViewById(R.id.listview);
        listView.setAdapter(adapter);

        listView.setOnItemClickListener(new OnItemClickListener()
        {
            @Override
            public void onItemClick
  (AdapterView<?> parent, View view,int position, long id)
            {
                Toast.makeText(getApplicationContext(),
  "Click ListItem Number " + position, Toast.LENGTH_LONG).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        // Mengembang menu; ini menambahkan item ke bilah tindakan jika ada.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
        // Tangani klik action bar di sini
        // secara otomatis menangani klik pada tombol Home
 
        int id = item.getItemId();
        if (id == R.id.action_settings)
        {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
} 

Hasil :

Share:

Tuesday, December 4, 2018

Radio Button, CheckBox, EditText

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:

Labels