Materi 3 - Memulai User Interaktif (Lanjutan)

Imam Ibnu Badri Pemrograman Mobile 16.08

Materi

A Mengatur Gravity dan weight
Mengatur nilai gravity dan weight digunakan untuk menata content dan views didalam Linier Layout.

Pada atribut android: layout_gravity mengatur bagaimana posisi sebuah view terhadap parent View. Karena views adalah match parrent pada "width" sehingga pengaturan ini tidak perlu dilakukan. Kita dapat membuat view tepat ditengah layar secara horizontal terhadap parrentnya dengan android: layout_gravity=" center_horizontal" atau membuatnya vertikal.
Pada atribut android :layout_weight mengatur berapa space yang dialokasikan oleh Linier layout terhadap view yang dimaksud. Sebagai contoh apabila terdapat 4 buah view pada layout, view pertama bemilai "1" maka. view tersebut akan menem pati 1 /4 ruang pada layout dan seterusnya.
Pada atribut android :gravity mendefinisikan alighment konten dari view itu sendiri. Sebagai contoh android :gravity="center"

Lakukan perubahan pada file activity_main.xml sehingga menjadi sbb dan jalan aplikasinya.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/name"
        android:background="@color/nameColor"
        android:textColor="@android:color/white"
        android:textSize="30dp"
        android:gravity="center_horizontal"
        android:text="@string/textView1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:id="@+id/number"
        android:textSize="150dp"
        android:layout_weight="1"
        android:gravity="center"
        android:background="@color/myBackgroundColor"
        android:text="@string/textView2" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn_count"
        android:layout_marginTop="10dp"
        android:text="@string/buttonCount"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white"
        android:onClick="countUp"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn_toast"
        android:layout_marginTop="10dp"
        android:text="@string/buttonToast"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white"
        android:onClick="showToast"/>

</LinearLayout>

B Menambahkan handler onClick pada Button
Pada pembahasan ini. Sebuah method onClick digunakan untuk mengeksekusi aksi ketika user meng-klik sebuah button. Berikut adalah langkah-langkanya :

Tambahkan property onClick pada button.Yaitu pada file activity_ main.xml.
Pada button toast tambahkan ➜ android:onClick="showToast"
Pada button count tambahkan ➜ android:onClick="countUp"

Tambahkan kode berikut pada file MainActivity.java tepatnya di bawah method onCreate
public void countUp(View view) { //Some code here } public void showToast(View view) { //Some code here }

Menambah nilai textView ketika Button count di klik. Pertama deklarasikan variabel untuk nilai angka, misal menggunakan nama varNumber. Tepat dibawah

public class MainActivity extends AppCompatActivity{

Tambahkan :

private int varNumber = 0;
private TextView txtCount, txtName;

Lalu pada method onCreate buatlah menjadi:

@Override
protected void onCreate (Bundle savedInstanceState){
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 txtCount=(TextView) findViewById(R.id.number);
 txtName=(TextView) findViewById(R.id.name);
}

pada method countUp menjadi:

public void countUp(View view) {
 varNumber++;
 if (txtCount != null){
  txtCount.setText(Integer.toString(varNumber));
 }
}

Dan terakhir pada showToast menjadi:

public void showToast(View view) {
 Toast.makeText(this, txtName. getText() .toString() + " " +
txtCount.getText() .toString(), Toast.LENGTH_SHORT) .show();
}

Tampilan seluruh MainActivity.java

package com.example.aplikasitoast;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private int varNumber = 0;
    private TextView txtCount, txtName;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        txtCount=(TextView) findViewById(R.id.number);
        txtName=(TextView) findViewById(R.id.name);
    }
    
    public void countUp(View view) {
        varNumber++;
        if (txtCount != null){
            txtCount.setText(Integer.toString(varNumber));
        }
    }

    public void showToast(View view) {
        Toast.makeText(this, txtName.getText() .toString() + " " +
                txtCount.getText() .toString(), Toast.LENGTH_SHORT) .show();
    }

}

Jalankan Aplikasi
➜ Ketika tombol Count ditekan

➜ Tampilan ketika tombol Toast ditekan.

C Mengambil Nilai dari EditTextEditText merupakan view yang mengizinkan user untuk memberikan nilai dan mengambilnya untuk diproses lebih lanjut melalui sebuah metode. Ikuti langkah-langkah berikut :

Buat sebuah project baru .
Tambahkan komponen 1 editText,1 button dan1 textView.

Ubah layout menjadi "LinierLayout" dan atur view sehingga menjadi

Kode selengkapnya :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="id.ac.uty.MainActivity">

    <TextView
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:id="@+id/name"
        android:hint="Tulis sesuatu.." />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnProcess"
        android:onClick="onProcess"
        android:text="Process" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menampilkan isi edit text" />       
        
</LinearLayout>

Masuk ke MainActivity.java dan tambahkan kode berikut :

public class MainActivity extends AppCompatActivity {
    EditText edPesan;
    TextView textPesan;
    String pesannya;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        
        edPesan = (EditText) findViewById(R.id.edit1);
        textPesan = (TextView) findViewById(R.id.textPesan);        
    }
    
    public void onProcess (View view){
        pesannya = String.valueOf(edPesan.getText());
        textPesan.setText(pesannya);
    }
}

Tampilan Seluruh coding activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <EditText
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:id="@+id/edit1"
        android:hint="Tulis sesuatu.." />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnProcess"
        android:onClick="onProcess"
        android:text="Process"/>

    <TextView
        android:id="@+id/hasil"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menampilkan isi edit text" />

</LinearLayout>

Tampilan Seluruh coding MainActivity.java

package com.example.layoutsample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    EditText edPesan;
    TextView textPesan;
    String pesannya;

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

        edPesan = (EditText) findViewById(R.id.edit1);
        textPesan = (TextView) findViewById(R.id.hasil);
    }

    public void onProcess (View view){
        pesannya = String.valueOf(edPesan.getText());
        textPesan.setText(pesannya);
    }
}

Jalankan aplikasi

Latihan

Buatlah sebuah project aplikasi yang terdiri dari 5 komponen views. Buat salah satu view menempati setengah bagian atas dari layar, dan empat view lainnya menempati sisa ruang yang ada. Gunakan Linier Layout, gravity dan weight untuk mengakomodasi aplikasi ini.
Gunakan image sebagai background app. Tambahkan image ke folder drawable dan atur sebagai bacground view
Buatlah sebuah aplikasi kalkulator sederhana. Tambahkan dua buah editText sebagai input angka. Tambahkan empat button dengan masing masing fungsi matematika yaitu tambah, kurang, bagi dan kali. Lalu tampilkan hasil operasi matematika tersebut ke dalam sebuah textView.
Buatlah aplikasi untuk pemesanan kopi. Tambahkan button untuk mengubah angka kopi yang dipesan. Kemudian buatlah button yang dapat menampilkan harga berdasarkan jumlah pesanan kopi.
Buat aplikasi papan skor pertandingan olahraga. Gunakan background yang merepresentasikan jenis olahraga tersebut. Buat dua buah button yang dapat menghitung skor masing-masing team

Daftar Isi - Pemrograman Mobile

TeachMeSoft