Materi 3 - Memulai User Interaktif (Lanjutan) - TeachMeSoft

Materi 3 - Memulai User Interaktif (Lanjutan)

Materi 3 - Memulai User Interaktif (Lanjutan)

Materi


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


  1. 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.
  2. 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.
  3. Pada atribut android :gravity mendefinisikan alighment konten dari view itu sendiri. Sebagai contoh android :gravity="center"
  4. 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="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/name"
            android:background="@color/colorAccent"
            android:textColor="@android:color/white"
            android:textSize="30dp"
            android:gravity="center_horizontal"
            android:text="@string/textView1" />
    
        <TextView
            android:layout_width="wrap_content"
            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="match_parent" 
            android:id="@+id/btn_count"
            android:layout_marginTop="10dp"
            android:text="@string/buttonCount"
            android:background="@color/colorPrimary"
            android:textColor="@android:color/white" />
    
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/btn_toast"
            android:layout_marginTop="10dp"
            android:text="@string/buttonToast"
            android:background="@color/colorPrimary"
            android:textColor="@android:color/white" />
        
    </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 :
  1. 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"
  2. 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
    }
    
  3. 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();
    }
  4. Jalankan Aplikasi

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 :
  1. Buat sebuah project baru .
  2. Tambahkan komponen 1 editText,1 button dan1 textView.
  3. 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>
    
  4. 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);
        }
    }
    
  5. Jalankan aplikasi


Latihan


  1. 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.
  2. Gunakan image sebagai background app. Tambahkan image ke folder drawable dan atur sebagai bacground view
  3. 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.
  4. Buatlah aplikasi untuk pemesanan kopi. Tambahkan button untuk mengubah angka kopi yang dipesan. Kemudian buatlah button yang dapat menampilkan harga berdasarkan jumlah  pesanan kopi.
  5. Buat aplikasi papan skor pertandingan olahraga. Gunakan background yang merepresentasikan jenis olahraga tersebut. Buat dua buah button yang dapat menghitung skor masing-masing  team





Disqus comments