Modul 6 dan 7
- Reza Prihandi
- Apr 22, 2021
- 7 min read
Updated: Apr 23, 2021
PENGENALAN LAYOUTING PADA ANDROID STUDIO
Teori Singkat
Layout merupakan suatu tampilan tata letak di Android untuk mengatur penempatan teks, gambar, ataupun komponen lainnya sehingga tampilan pada aplikasi yang dibuat terlihat rapih dan nyaman untuk dilihat oleh pengguna.
Jenis - jenis dan fungsi Layout
Linear Layout
Linear Layout adalah layout yang menyejajarkan semua child view-nya (Ex : Textview, button, dan lain sebagainya, bahkan Linear Layout sendiri bisa jadi child dari Linear Layoutnya(lihat contoh Linear Layout(Horizontal))) dalam satu arah, secara vertikal atau horizontal.
Contoh Linear Layout (Vertical) :
Contoh Linear Layout (Horizontal) :
Beri sedikit warna pada background tiap textview :
Copy paste kode dibawah ini untuk mendapatkan layout yang sama dengan gambar diatas
<?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"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#6645C0"
android:padding="16dp"
android:text="Vertical 1"
android:textColor="@android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F3D029"
android:padding="16dp"
android:text="Vertical 2"
android:textColor="@android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#26A96C"
android:padding="16dp"
android:text="horizontal 1"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F05D5E"
android:padding="16dp"
android:text="horizontal 2"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#3322AA"
android:padding="16dp"
android:text="horizontal 3"
android:textColor="@android:color/white" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="to"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="subject"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="top"
android:hint="message" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="send"/>
</LinearLayout>Relative Layout
Relative Layout merupakan layout yang penataannya lebih bebas (Relative) sehingga bisa di tata di mana saja.
Contoh Relative Layout dengan 1 button:
Contoh Relative Layout dengan 9 button :
Berikut kode penuh dari layout diatas :
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Tengah"
android:textSize="18sp" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerHorizontal="true"
android:text="Ki A"
android:textSize="18sp" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="T A"
android:textSize="18sp" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:text="Ka A"
android:textSize="18sp" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Ki T"
android:textSize="18sp" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Ka T"
android:textSize="18sp" />
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="Ki B"
android:textSize="18sp" />
<Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="T B"
android:textSize="18sp" />
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:text="Ka B"
android:textSize="18sp" />
</RelativeLayout>Table Layout
Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom.
Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang dapat disimpan.
Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis kolom. Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut.
Contoh Table Layout :
Contoh Table Layout didalam Table Layout :
Berikut kode untuk layout seperti gambar di atas :
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:stretchColumns="1, 3"
tools:context=".MainActivity">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/teks1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="4"
android:gravity="center"
android:text="Form Login"
android:textSize="22dp"/>
</TableRow>
<TableRow
android:layout_height="match_parent"
android:layout_width="match_parent">
<TextView
android:id="@+id/teks2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Username"
android:paddingRight="10dp"/>
<EditText
android:id="@+id/editText1"
android:layout_span="3"
android:ems="10"
android:inputType="textPersonName"/>
</TableRow>
<TableRow
android:layout_height="match_parent"
android:layout_width="match_parent">
<TextView
android:id="@+id/teks3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Password"
android:paddingRight="10dp"/>
<EditText
android:id="@+id/editText2"
android:layout_span="3"
android:ems="10"
android:inputType="textPassword"/>
</TableRow>
<TableRow
android:layout_height="match_parent"
android:layout_width="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="right"
android:text="login"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="cancel"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Forget Pswd?"/>
</TableRow>
<TableLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:stretchColumns="1">
<TableRow
android:background="#22ff">
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip"/>
<TextView
android:layout_column="1"
android:text="CTRL-O"
android:padding="3dip"
android:gravity="right"/>
</TableRow>
<TableRow
android:background="#22ff">
<TextView
android:layout_column="1"
android:text="Save..."
android:padding="3dip"/>
<TextView
android:layout_column="1"
android:text="CTRL-S"
android:padding="3dip"
android:gravity="right"/>
</TableRow>
<TableRow
android:background="#22ff">
<TextView
android:layout_column="1"
android:text="Save As..."
android:padding="3dip"/>
<TextView
android:layout_column="1"
android:text="CTRL-Shift+S"
android:gravity="right"
android:padding="3dip"/>
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090"/>
<TableRow
android:background="#ffff00">
<TextView
android:text="X"
android:padding="3dip"/>
<TextView
android:layout_column="1"
android:text="Import..."
android:padding="3dip"/>
</TableRow>
<TableRow
android:background="#ffff00">
<TextView
android:text="X"
android:padding="3dip"/>
<TextView
android:layout_column="1"
android:text="Export..."
android:padding="3dip"/>
<TextView
android:layout_column="1"
android:text="CTRL+E"
android:gravity="right"
android:padding="3dip"/>
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090"/>
<TableRow
android:background="#aaf">
<TextView
android:text="Quit"
android:layout_column="1"
android:padding="3dip"/>
</TableRow>
</TableLayout>
</TableLayout>Beberapa tag pada Table Layout :
TableLayout : Tag pembuka untuk menggunakan TableLayout
TableRow : Tag untuk membuat Baris
Absolute Layout
Absolute Layout memungkinkan Anda menentukan lokasi yang tepat (koordinat x / y) dari child-nya. Tata letak absolut kurang fleksibel dan lebih sulit dipertahankan dibandingkan jenis tata letak lain tanpa pemosisian yang tepat.
Contoh Aboslute Layout :
Frame Layout
Frame Layout adalah Layout yang biasanya digunakan untuk membuat objek yang saling bertindihan contohnya yaitu kita membuat button di atas image.
Contoh dari Frame Layout :
Listview Layout
Listview adalah adaptor view yang tidak mengenal detail seperti jenis dan konten tampilan di dalamnya. Tetapi, listview meminta tampilan sesuai permintaan dari ListAdapter jika diperlukan, seperti untuk menampilkan tampilan baru saat user men-scroll ke atas atau bawah. Contohnya bisa kalian lihat di post modul 5 sebelumnya.
Custome Listview
Custom ListView merupakan ListView dengan item yang bisa kita buat sesuai selera, misalnya item yang memiliki atribut foto, nama, dan keterangan.
Untuk caranya, kosongkan terlebih dahulu layout di projek sebelumnya :
Lalu tambahkan listview kedalam LinearLayout nya.
Tambahkan icon apa saja kedalam folder "Drawable". Untuk mendownload iconnya bisa melalui link ini , setelah selesai mendownload iconnya, copy iconnya (CTRL+C) lalu paste di folder "Drawable".
Lalu buat class baru dengan nama "Menu". Klik kanan pada folder com.example.modul6 atau nama folder dari package kalian lalu pilih new - java class.
isikan dengan kode berikut :
package com.example.modul6;
public class Menu {
public String name;
public String brand;
public int Image;
public Menu (String name, String brand, int image){
this.name = name;
this.brand = brand;
this.Image = image;
}
public void setImage(int image) {
Image = image;
}
public int getImage(){
return this.Image;
}
public void setName(String name) {
this.name = name;
}
public String getName(){
return name;
}
public void setBrand(String brand) {
this.brand = brand;
}
public String getBrand(){
return brand;
}
}
Maka hasilnya akan seperti ini :
Tambahkan lagi java class dan layout xml nya. Untuk yang java class, beri nama "ListAdapter" dan untuk layoutnya beri nama "item".
Berikut gambar dan kode penuhnya dari ListAdapter.java
package com.example.modul6;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class ListAdapter extends ArrayAdapter {
private ArrayList<Menu> ListMenu;
private Activity act;
public ListAdapter (Activity context, ArrayList<Menu> objects){
super(context, R.layout.item, objects);
this.ListMenu = objects;
this.act = context;
}
static class ViewHolder{
protected ImageView icon;
protected TextView nama;
protected TextView keterangan;
}
@Override
public View getView (int position, View convertView, ViewGroup parent){
View view = convertView;
if (view==null){
LayoutInflater inflater = act.getLayoutInflater();
view = inflater.inflate(R.layout.item, null);
ViewHolder holder = new ViewHolder();
holder.icon = view.findViewById(R.id.item_icon);
holder.nama = view.findViewById(R.id.item_nama);
holder.keterangan = view.findViewById(R.id.item_keterangan);
view.setTag(holder);
}
ViewHolder holder = (ViewHolder)view.getTag();
Menu menu = ListMenu.get(position);
holder.icon.setImageResource(menu.getImage());
holder.nama.setText(menu.getName());
holder.keterangan.setText(menu.getBrand());
return view;
}
}Gambar dan kode penuh dari item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="8dp">
<ImageView
android:id="@+id/item_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginRight="8dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/item_nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Nama List"/>
<TextView
android:id="@+id/item_keterangan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:text="Keterangan List"/>
</LinearLayout>
</LinearLayout>Setelah itu, kita edit kode MainActivity.java nya.
package com.example.modul6;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayList<Menu> list = new ArrayList<Menu>();
list.add(new Menu("Nama List 1", "Keterangan 1",R.drawable.breakfast));
list.add(new Menu("Nama List 2", "Keterangan 2",R.drawable.chicken));
list.add(new Menu("Nama List 3", "Keterangan 3",R.drawable.cup));
list.add(new Menu("Nama List 4", "Keterangan 4",R.drawable.fries));
list.add(new Menu("Nama List 5", "Keterangan 5",R.drawable.pizza));
list.add(new Menu("Nama List 6", "Keterangan 6",R.drawable.spaguetti));
list.add(new Menu("Nama List 7", "Keterangan 7",R.drawable.waterglass));
list.add(new Menu("Nama List 8", "Keterangan 8",R.drawable.watermelon));
list.add(new Menu("Nama List 9", "Keterangan 9",R.drawable.rice));
ListAdapter adapter = new ListAdapter(this, list);
ListView listView = findViewById(R.id.id_list);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
Toast.makeText(MainActivity.this, "Isi Warningmu sendiri", Toast.LENGTH_LONG).show();
}
});
}
}Ketika di RUN, maka hasilnya akan seperti ini :
GridView Layout
GridView adalah tampilan yang menunjukkan item dalam two-dimensional scrolling grid. Item yang ada didalam grid berasal dari ListAdapter yang terkait dengan tampilan layoutnya.
Constraint Layout
Constraint Layout ditambahkan ke Android Studio 2.2 pada tahun 2016 dan menjadi tata letak default Android Studio karena kesederhanaan dan kemudahannya dalam membuat tata letak yang kompleks.
Constraint Layout menyederhanakan pembuatan tata letak yang kompleks di Android dengan memungkinkan untuk membangun sebagian besar UI Anda hanya dengan menggunakan editor visual di Android Studio.
Contoh GridView
Coba rubah activity_main.xml pada projek sebelumnya menjadi gridlayout seperti gambar dibawah ini:
Lalu rubah juga layout di item.xml nya
berikut kode dari gambar layout diatas :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:ignore="UseCompoundDrawables, UselessParent,HardcoreText">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/gambar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
tools:ignore = "ContentDescription"/>
<TextView
android:id="@+id/nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="monospace"
android:text="nama"
android:textStyle="bold"
android:textSize="10sp"/>
</LinearLayout>
</RelativeLayout>Tambahkan 1 layout lagi untuk contoh Constraint Layout nya. Klik kanan pada folder values - New - Values Resource File, dan beri nama filenya "activity_zoom".Lalu tambahkan kode berikut :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="200dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="@tools:sample/avatars" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintVertical_bias="0.127" />
</androidx.constraintlayout.widget.ConstraintLayout>
Setelah 3 layout sudah dibuat seperti diatas. Klik kanan pada file ListAdapter - Refactor - Rename, lalu rubah namanya menjadi GridAdapter.
Dan rubah kodenya menjadi seperti dibawah ini :
package com.example.modul6;
import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class GridAdapter extends BaseAdapter {
Context context;
int[] gambar;
String[] namanya;
LayoutInflater inflater;
public GridAdapter(Context applicationContext, int[] gambar, String[] namanya){
this.context = applicationContext;
this.gambar = gambar;
this.namanya = namanya;
inflater = (LayoutInflater.from(applicationContext));
}
@Override
public int getCount(){
return gambar.length;
}
@Override
public Object getItem(int i){
return null;
}
@Override
public long getItemId(int i){
return 0;
}
@SuppressLint({"ViewHolder","InflateParams"})
@Override
public View getView (int i, View view, ViewGroup viewGroup){
if (view==null){
view = inflater.inflate(R.layout.item,null);
}
ImageView gambarGrid = view.findViewById(R.id.gambar);
TextView namaGrid = view.findViewById(R.id.nama);
namaGrid.setText(namanya[i]);
gambarGrid.setImageResource(gambar[i]);
return view;
}
}Lalu buat java class lagi dengan nama "ZoomActivity", dan paste kan kode berikut :
package com.example.modul6;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class ZoomActivity extends AppCompatActivity {
@Override
protected void onCreate (Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_zoom);
ImageView imageView = findViewById(R.id.imageView);
TextView textView = findViewById(R.id.textView);
Intent intent = getIntent();
imageView.setImageResource(intent.getIntExtra("gambar",0));
textView.setText(intent.getStringExtra("namanya"));
}
}
Sekarang edit MainActivitynya :
package com.example.modul6;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
public class MainActivity extends AppCompatActivity {
int[] gambar = {R.drawable.breakfast, R.drawable.chicken, R.drawable.cup, R.drawable.fries,
R.drawable.pizza,R.drawable.rice,R.drawable.spaguetti,R.drawable.waterglass,R.drawable.watermelon};
String[] namanya = {"GridList1","GridList2","GridList3","GridList4","GridList5","GridList6",
"GridList7","GridList8","GridList9"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridView = findViewById(R.id.gridView);
GridAdapter gridAdapter = new GridAdapter(this, gambar, namanya);
gridView.setAdapter(gridAdapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Intent intent = new Intent(getApplicationContext(), ZoomActivity.class);
intent.putExtra("gambar",gambar[position]);
intent.putExtra("namanya",namanya[position]);
startActivity(intent);
}
});
}
}Hal terakhir yang harus di edit adalah file "androidmanifest" yang terletak di Folder App-Manifest, tambahkan kode seperti yang di block pada gambar dibawah :
Setelah mengikuti langkah - langkah diatas, tinggal jalankan saja di emulator / hp aplikasinya.
Hasil dari GridView :
Hasil Constraint Layout (jika salah satu icon di grid view kita klik) :
Mantapp