Pengenalan Layouting Lanjutan (Framelayout, Listview, Gridview, Constrainlayout) pada Android Studio - naskahkode


 



 

FRAMELAYOUT

A.    Teori

FrameLayout adalah layout sederhana. layout ini bisa berisi satu atau lebih View child, dan mereka bisa tumpang tindih satu sama lain. Oleh karena itu, atribut android:layout_gravity digunakan untuk menemukan ViewChild.

Untuk membuat FrameLayout pada layout.xml tersebut, kalian perlu menambahkan tag  <FrameLayout> dan di akhri dengan tag </FrameLayout>, pada contoh  berikut ini, kita akan membuat 2 buah Button, button kedua akan kita sisipkan pada button pertama, seperti berikut ini: Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalian atur sendiri, kalian dapat menggunakan beberapa atribut

Berikut adalah atribut penting khusus untuk FrameLayout :

  •  android:layout_marginLeft: Untuk mengatur jarak (batasan) sudut kiri elemen UI pada elemen UI lainnya.

  • android:layout_marginRight: Untuk mengatur jarak (batasan) sudut kanan elemen UI pada elemen UI lainnya.

  • android:layout_marginTop: Untuk mengatur jarak (batasan) atas elemen UI pada elemen UI lainnya.

  •  android:layout_marginBottom: Untuk mengatur jarak (batasan) bawah elemen UI pada elemen UI lainnya.

  •  android:layout_gravity: Untuk mengatur posisi rata kanan, kiri, atas, bawah, center, center horizontal dan center vertical.

 

B.     Praktik  1

1. Pertama jalankan aplikasi IDE Android Studio, caranya : 

  • Pilih Start → Android Studio 

  • Pilih → Start a new Android Studio Project 

  • Pilih → Empty Activity → Next

Mengonfigurasi projek


2 . Menambahkan Button  , dan FrameLayout dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

3 . Atau bisa dengan mengedit source code activity_main.xml nya  langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 

 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="350dp"
android:layout_height="400dp"
android:layout_gravity="center"
android:text="Button 1"/>
<Button
android:id="@+id/button2"
android:layout_width="140dp"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="18dp"
android:text="Button 2"/>

</FrameLayout>

4. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini 



C.     Praktik  2

1. Disini kita akan bermain layout , dimana setiap text akan berada di tengah, samping , atas maupun bawah . Pertama jalankan aplikasi IDE Android Studio, caranya : 

  • Pilih Start → Android Studio 

  • Pilih → Start a new Android Studio Project 

  • Pilih → Empty Activity → Next

Mengonfigurasi projek

 

2 . Menambahkan TextView  , dan FrameLayout dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 


3 . Atau bisa dengan mengedit source code  activity_main.xml nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 

 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:padding="11dp"
tools:context=".MainActivity">

<TextView
android:text="LeftTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="RightTop"
android:layout_gravity="top|right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="CenterTop"
android:layout_gravity="top|center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="Left"
android:layout_gravity="left|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="Right"
android:layout_gravity="right|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="Center"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="LeftBottom"
android:layout_gravity="left|bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="RightBottom"
android:layout_gravity="right|bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="CenterBottom"
android:layout_gravity="center|bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</FrameLayout>

4. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini 


 

LISTVIEW

A.   Teori

“Sebenarnya materi ini sudah sepat kita bahas di modul sebelumnya  tp tak mengapa kita bahas lagi karena materi ini masih berhubungan dengan materi Layouting yang sedang kita pelajari di modul  ini”

 

ListView adalah salah satu widget yang digunakan untuk menampilkan data atau nilai dalam bentuk daftar/list, nilai atau data yang ditampilkan pada ListView tersebut didapat dari sebuah Array atau Database yang sudah ditentukan. ListView pada saat ini sudah tergantikan dengan RecyclerView yang memiliki konsep Material Design, karena lebih custom dan juga dapat mengatur tampilan layoutnya.

Walaupun begitu, ListView masih banyak digunakan oleh programmer untuk membuat list/daftar item yang sederhana pada aplikasi mereka.

 

 

B.     Praktik 

1. Pertama jalankan aplikasi IDE Android Studio, caranya : 

  • Pilih Start → Android Studio 

  • Pilih → Start a new Android Studio Project 

  • Pilih → Empty Activity → Next

Mengonfigurasi projek

2 . Menambahkan TextView  , dan ListView  pada relative layout dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

 

 

 

 

 

 

 

 

 

 

 

3 . Atau bisa dengan mengedit source code activity_main.xml nya  langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 

 
<?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">

<TextView
android:id="@+id/daftarMHS"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:gravity="center"
android:background="@color/design_default_color_primary"
android:textStyle="bold"
android:textSize="20sp"
android:text="Mahasiswa Teladan STIKOM"/>
<ListView
android:layout_below="@+id/daftarMHS"
android:id="@+id/listKarakter"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

</RelativeLayout>

4. Buka dan ubah script MainActivity.java menjadi seperti code di bawah ini

package com.naskahkode.listviewcustom;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String[] MahasiswaTeladan = {
"Dikdik Yanbagilaha Pangestu","Faizal Anwar","Ananda Ariwibawa",
"Darin Maulana","Sultan Bisri","Andrew Darwis","Mardigu Wowik Prasetyo",
"Kirdi Putra","William Tanuwijaya","Nadiem Makarim","Achmad Zaky","Ferry Unardi",
"Muhammad Alfatih Timur","Kevin Aluwi","Adamas Belva Syah Devara","Gita Wirjawan",
"Erick Thohir","Chairul Tanjung","Muhammad Debian An-Nizami","Muhammad Bilal Al-Khawarizmi"
};
ListView daftar = findViewById(R.id.listKarakter);
ArrayAdapter<String> adaptor = new ArrayAdapter<>(this,
android.R.layout.simple_list_item_1, MahasiswaTeladan);
daftar.setAdapter(adaptor);
daftar.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int posisi, long id) {
switch (posisi) {
case 0:
Toast t = Toast.makeText(MainActivity.this,
"Dikdik Merupakan MHS Kelas TI.3 Semester 4 Memiliki Skill Desain Grafis" +
"https://dikdikpangestu311.wixsite.com/dikynbghlh", Toast.LENGTH_SHORT);
t.setGravity(Gravity.CENTER, 0, 0);
t.show();
break;

case 1:
Toast t1 = Toast.makeText(MainActivity.this,
"Faizal Anwar Merupakan MHS Kelas TI.2 Semester 6 berprofesi sebagai Copywriter di " +
"https://www.naskahkode.com", Toast.LENGTH_SHORT);
t1.setGravity(Gravity.CENTER, 0, 0);
t1.show();
break;

case 2:
Toast t2 = Toast.makeText(MainActivity.this,
"Ananda Ariwibawa Merupakan MHS Kelas TI.1 Semester 6 Memiliki Skill Web Desain" +
"cek http:/www.ariwibawa.my.id", Toast.LENGTH_SHORT);
t2.setGravity(Gravity.CENTER, 0, 0);
t2.show();
break;

case 3:
Toast t3 = Toast.makeText(MainActivity.this,
"Darin Maulana Merupakan Asleb Terbaik tahun 2021 versi Majalah Forbes"
, Toast.LENGTH_SHORT);
t3.setGravity(Gravity.CENTER, 0, 0);
t3.show();
break;

case 4:
Toast t4 = Toast.makeText(MainActivity.this,
"Sultan Bisri Merupakan Runner UP Asleb Terbaik tahun 2021 versi Majalah Forbes"
, Toast.LENGTH_SHORT);
t4.setGravity(Gravity.CENTER, 0, 0);
t4.show();
break;

case 5:
Toast t5 = Toast.makeText(MainActivity.this,
"Andrew Darwis Merupakan CEO https://www.kaskus.co.id"
, Toast.LENGTH_SHORT);
t5.setGravity(Gravity.CENTER, 0, 0);
t5.show();
break;

case 6:
Toast t6 = Toast.makeText(MainActivity.this,
"Mardigu WP Merupakan CEO https://www.santara.co.id dan https://www.dinaran.id"
, Toast.LENGTH_SHORT);
t6.setGravity(Gravity.CENTER, 0, 0);
t6.show();
break;

case 7:
Toast t7 = Toast.makeText(MainActivity.this,
"Kirdi Putra Merupakan CEO https://www.shiokaya.id"
, Toast.LENGTH_SHORT);
t7.setGravity(Gravity.CENTER, 0, 0);
t7.show();
break;

case 8:
Toast t8 = Toast.makeText(MainActivity.this,
"William Tanuwijaya Merupakan CEO https://www.tokopedia.com"
, Toast.LENGTH_SHORT);
t8.setGravity(Gravity.CENTER, 0, 0);
t8.show();
break;

case 9:
Toast t9 = Toast.makeText(MainActivity.this,
"Nadiem Makarim Merupakan CEO https://www.gojek.com"
, Toast.LENGTH_SHORT);
t9.setGravity(Gravity.CENTER, 0, 0);
t9.show();
break;

/*Letakaan disini untuk case berikutnya*/
}
}
});
}
}


5. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini 

 

GRIDVIEW

A.    Teori

GridView adalah salah satu container, yang digunakan untuk menampilkan konten View, konten View dalam GridView akan tersusun bentuk kotak-kotak seperti sebuah rak lemari, , yang dimana kita dapat menyimpan barang-barang. Penulisan coding beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yang ditampilkan secara Grid atau Kotak-kotak.

Penjelasan pada atribut-atribut yang digunakan:

  • android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.
  • android:gravity : Menentukan gravitasi di dalam setiap sel.
  • android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris.
  • android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang kosong, jika ada.
  • android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.
  • android:numColumns : Menentukan berapa kolom yang akan ditampilkan.

 

B.     Praktik 

1. Pertama jalankan aplikasi IDE Android Studio, caranya : 

  • Pilih Start → Android Studio 

  • Pilih → Start a new Android Studio Project 

  • Pilih → Empty Activity → Next

Mengonfigurasi projek

2 . Menambahkan GridView dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

3 . Atau bisa dengan mengedit source code activity_main.xml nya  langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 

 
<?xml version="1.0" encoding="utf-8"?>
<GridView 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/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="10dp"
android:background="#FFF5F5F5"
android:columnWidth="90dp"
android:layout_gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp"
tools:context=".MainActivity">

</GridView>

 

4. Buka dan ubah script MainActivity.java menjadi seperti code di bawah ini

 
package com.naskahkode.gridview;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridLayout;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
protected GridView TampilanGrid;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setTitle("Menu Gallery UggasID.com");
TampilanGrid = findViewById(R.id.gridview);
TampilanGrid.setAdapter(new ImageAdapter(this));
TampilanGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(MainActivity.this, ""+ position, Toast.LENGTH_SHORT).show();
}
});
}
}
class ImageAdapter extends BaseAdapter{
private int[] gambar = {R.drawable.bibit,R.drawable.panenunggas,R.drawable.iklan,
R.drawable.panen,R.drawable.kandang,R.drawable.karkas,
R.drawable.kebutuhan, R.drawable.kemitraan,R.drawable.loker,
R.drawable.ovk,R.drawable.armada, R.drawable.peralatan};
private Context mContext;
ImageAdapter(Context c){
mContext = c;
}
public int getCount(){
return gambar.length;
}

@Override
public Object getItem(int position) {
return null;
}

public long getItemId(int position){
return 0;
}
public View getView(int position, View convertView, ViewGroup parent){
ImageView imageView;

if (convertView == null) {
imageView = new ImageView(mContext);
imageView.setLayoutParams(new ViewGroup.LayoutParams(240,240));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

imageView.setPadding(4, 4, 4, 4);
}else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(gambar[position]);
return imageView;
}

}

5. Siapkan sebuah Icon / gambar yang akan kita gunakan untuk element ImageView lalu copy ke dalam folder Drawable seperti gambar di bawah ini  , bisa di downlod disini 

6. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini 


CONSTRAINLAYOUT

A.    Teori

Constraint layout merupakan layout terbaru dari android. Layout ini berbasis relative layout, namun mempunyai tingkat kemudahan yang lebih baik dalam penggunaannya. Hal ini dikarenakan, contraint layout dapat digunakan dengan baik pada design mode didalam Android Studio. Setiap item pada constraint layout memiliki 4 arah constraint yaitu top, left, right, dan bottom. Ke empat arah ini memiliki sebuah connection source yang dapat ditarik ke parent atau ke objek lain.

Pada Constraint Layout, setiap View memiliki tali (Constraint) yang menarik tiap sisinya, yang mana tali tersebut bisa kita atur Elastisitas, Margin, dsb.

Berbeda ceritanya dengan RelativeLayout. Saat kita ingin menentukan posisi atau menghubungkan dua buah view, kita bisa menggunakan attribute seperti layout_below atau layout_above. Nah untuk ConstraintLayout kita akan menggunakan constraint sebagai dasar dalam menentukan posisi agar sebuah view dapat terhubung dengan view lainnya sesuai harapan kita.

B.     Praktik 

1. Pertama jalankan aplikasi IDE Android Studio, caranya : 

  • Pilih Start → Android Studio 

  • Pilih → Start a new Android Studio Project 

  • Pilih → Empty Activity → Next

Mengonfigurasi projek

2 . Menambahkan Constrain Layout ,textView,Button dan editText dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja

3 . Atau bisa dengan mengedit source code activity_main.xml nya  langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini 

 
<?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_margin="20dp"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Login Account"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.055"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Register"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.73"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.676"/>
<ImageView
android:id="@+id/imageView"
android:layout_width="201dp"
android:layout_height="203dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.198"
app:srcCompat="@drawable/bibit"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.279"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.676"/>
<EditText
android:hint="Username"
android:textAlignment="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textEmailAddress"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.472"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.582" />

</androidx.constraintlayout.widget.ConstraintLayout>


4. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini