Materi 8 - Komponen View (Lanjutan) - TeachMeSoft

Materi 8 - Komponen View (Lanjutan)

Materi 8 - Komponen View (Lanjutan)

Materi


A      Menambahkan View Spinner
Untuk menambahkan komponen Spinner terlebih dahulu buatlah sebuah project baru pada Android Studio. Berikut langkah-langkahnya :
  1. Buat project baru, misal dengan nama MyAplication
  2. Buka file strings.xml dan tambahkan resource string sbb :
        <string-array name="spinner_item_suka">
            <item>Mercury</item>
            <item>Venus</item>
            <item>Bumi</item>
            <item>Mars</item>
            <item>Jupiter</item>
            <item>Saturnus</item>
            <item>Uranus</item>
        </string-array>
    
  3. Buka file activity_main.xml dan ubah layout menjadi LinearLayout
  4. ambahkan kode berikut pada layoout editor text untuk membuat view CheckBox
        <Spinner
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/planet"
            android:entries="@array/spinner_item_suka"/>
    
  5. Tampilan Seluruh code 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"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mengambil Nilai dari Edit Text"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="35dp"
            android:textStyle="bold"
            android:textColor="#000000"
            android:background="#FFC0CB"
            android:textSize="24sp"/>
    
        <Spinner
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/planet"
            android:entries="@array/spinner_item_suka"/>
        <Button
            android:id="@+id/btnProcess"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onProcess"
            android:text="Pilih"
            android:theme="@style/AppTheme" />
    
    </LinearLayout>
    
  6. Tambahkan 1 Button process, sehingga desain layout menjadi

B      Mengambil Nilai Spinner
Untuk mengambl nilai dari Spinner dan menampilkan melalui Toast, langkahnya adalah sebagai berikut :
  1. Buka file MainActivity.java dan tambahkan kode sebagai berikut di bawah
    public class MainActivity extends AppCompatActivity {
        Spinner planetSpinner;
    
  2. Buat method onProcess() untuk Button dan tambahkan kode berikut didalamnya :
            String namaPlanet = (String) planetSpinner.getSelectedItem();
    
            Toast.makeText(MainActivity.this, "Anda hidup di : " + namaPlanet,
                    Toast.LENGTH_SHORT) .show();
  3. Tampilan seluruh MainActivity.java
    package com.example.myapplication3;
    
    import androidx.appcompat.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import android.widget.Spinner;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity {
        private Spinner spNamen;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            spNamen = (Spinner) findViewById(R.id.planet);
    
            Button btSpinner = (Button) findViewById(R.id.btnProcess);
            btSpinner.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this, "Selected "+ spNamen.getSelectedItem().toString(), Toast.LENGTH_SHORT).show();
                }
            });
        }
    
    }
    
  4. Jalankan Aplikasi


C      Menambahkan View Date/Time Picker
Untuk menambahkan komponen View CheckBox terlebih dahulu buatlah sebuah project baru pada Android Studio. Berikut langkah-langkahnya :
  1. Buat project barn, misal dengan nama MyAplication
  2. Buka file activity_main.xml dan ubah layout menjadi LinearLayout
  3. Tambahkan kode berikut pada layoout editor text untuk membuat view. Dalam kasus ini kita akan menampilkan datePicker melalui EditText
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tgl"
            android:hint="cari tanggal..."/>
        
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/waktu"
            android:hint="cari waktu..."/>
        
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Submit"
            android:id="@+id/proses"
            android:onClick="onProcess"/>
        
    
  4. Kemudian untuk mengambil nilai date/time dari view ke dalam EditText, ubah file Main Activity.java dan tambahkan kode beri kut :
    public class MainActivity extends AppCompatActivity {
        DatePickerDialog datePickerDialog;
        EditText tglEt, waktuEt;
    
  5. Kemudian di dalam method onCreate tambahkan Kod

            final EditText tglEt = (EditText) findViewById(R.id.tgl);
            final EditText waktuEt = (EditText) findViewById(R.id.waktu);
            tglEt.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Calendar c = Calendar.getInstance();
                    int tahun = c.get(Calendar.YEAR);
                    int bulan = c.get(Calendar.MONTH);
                    int hari = c.get(Calendar.DAY_OF_MONTH);
                    datePickerDialog = new DatePickerDialog(MainActivity.this, new
                            DatePickerDialog.OnDateSetListener() {
                        @Override
                        public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
                            tglEt.setText(dayOfMonth + "/" + (month + 1) + "/" + year);
                        }, tahun, bulan, hari);
                    datePickerDialog.show();
                    }
                    });
                waktuEt.setOnClickListener(new View.OnClickListener(){
                    @Override
                            public void onClick(View v){
                        Calendar mcurrentTime = Calendar.getInstance();
                        int hour = mcurrentTime.get(Calendar.HOUR_OF_DAY);
                        int minute = mcurrentTime.get(Calendar.MINUTE);
    
                        TimePicker mTimerPicker;
    
                        mTimerPicker = new TimePickerDialog(MainActivity.this, new TimePickerDialog.OnTimeSetListener() {
                            @Override
                            public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                                waktuEt.setText(minute + ":" + minute);
                            }
                        }, hour, minute, true;
                        mTimerPicker.show();
                        }
                        })
    
  6. Jalankan Aplikasi sehingga hasilnya akan menjadi sbb :

D      Menambahkan Button Image
Kita dapat mem buat view dapat di-klik, seperti Button dengan menambahkan atribut android:onClick di imageView pada kode XML. Berikut langkah-langkahnya  :
  1. Buat project baru, misal dengan nama MyAplication
  2. Buka file activity_main.xml dan ubah layout menjadi LinearLayout
  3. Siapkan sebuah image dan letakkan pada folder res/drawable
    Tambahkan kode beriku t pada layoout editor text untuk menambahkan Image View.
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="125dp"
            android:paddingTop="50dp"
            android:scr="@drawaable/nama_file_image"
            android:onClick="onImageKlik"/>
    
  4. Sehingga Layout akan menjadi
  5. Pada file ActivitiMain.java tambahkan method berikut dibawah method
        public void onImageKlik(View view){
            Toast.makeText(MainActivity.this, "di klik", Toast.LENGTH_SHORT) .show();
        }
    
  6. Jalankan Aplikasi dan cobalah klik pada image




Latihan


  1. Buatlah sebuah project aplikasi baru dengan tema bebas. Aplikasi tersebut menggunakan kumpulan view yang pemah dibahas pada materi ini dan materi sebelumnya. Buatlah views tersebut dapat diambil nilainya dan ditampilkan dalam Toast atau dalam TextView.
  2. Tambahkan kom ponen view Image ke dalam Linier layout grup yang terdapat NestedScrollView.  Kemudian aturlah supaya image yang ada dapat ditampilkan di dalam scrollView tersebut. Letakkan posisi image di atas article TextView.
  3. Tambahkan sebuah button dibagian paling bawah didalam Linier layout grup. NestedScrol l View tepatnya setelah komponen article TextView. Buatlah string resource dan aturlah agar text dari Button menjadi "Add Comment"
  4. Buatlah sebuah project aplikasi baru (tema bebas) dengan menggunakan ScrollView. Misalnya membuat aplikasi untuk memesan tiket nonton di bisoskop, tiket kereta atau yang lainnya. Buatlah desain layoutnya kurang lebih seperti pada gambar. Terakhir tambahkan button Process  yang dapat mengambil nilai input dari EditText dan menampilkannya pada TextView result.





Disqus comments