Pengenalan Layouting lanjutan (FrameLayout, ListView, GridView, ConstrainLayout) pada android strudio

 Assalamualaikum, semoga kita semua dalam lindungan Allah SWT, aamiin. Kali ini akan membahas sesuai judul blog yaitu Pengenalan Layouting lanjutan (FrameLayout, ListView, GridView, ConstrainLayout) pada android strudio.

1. FrameLayout
FrameLayout adalah layout sederhana, layout ini bisa berisi satu atau lebih View child, dan bisa tumpang tindih satu sama lain. Oleh karena itu, atribut android:layout_gravity digunakan untuk menemukan ViewChild.
Contoh 1 :
a. buka aplikasi android studio
b. Jalankan aplikasi Android studio, caranya :
Pilih start (android studio) -> start A new Android studio project -> Empty activiti -> Next.
Konfigurasikan Project dengan:
– Name = FrameLayout
– Save Location = Pilih tempat dimana Project akan disimpan
– Languange = Java. Jika sudah, klik Finish.
c. Ubah script file activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”>

<Button
android:layout_width=”320dp”
android:layout_height=”400dp”
android:layout_gravity=”center”
android:id=”@+id/button1″
android:text=”Button 1″/>
<Button
android:layout_width=”140dp”
android:layout_height=”200dp”
android:layout_gravity=”center_horizontal”
android:id=”@+id/button2″
android:text=”Button 2″/>

</FrameLayout>

d. Jika sudah lalu jalankan, kurang lebih seperti gambar di bawah ini :

• 

Contoh 2 :
Buat Project baru dengan cara pilih Start a new Android Studio Project. Selanjutnya pada menu Template kita pilih Empty Activity.
Konfigurasikan Project dengan:
– Name = FrameLayout2
– Save Location = Pilih tempat dimana Project akan disimpan
– Languange = Java. Jika sudah, klik Finish.
c. Ubah script file activity_main.xml
<?xml version=”1.0″encoding=”utf-8″?>
<FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:padding=”11dp”
tools:context=”.MainActivity”>

<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”LeftTop”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”RightTop”
android:layout_gravity=”top|right”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”CenterTop”
android:layout_gravity=”top|center_horizontal”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Left”
android:layout_gravity=”left|center_vertical”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Right”
android:layout_gravity=”right|center_vertical”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Center”
android:layout_gravity=”center”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”LeftBottom”
android:layout_gravity=”left|bottom”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”RightBottom”
android:layout_gravity=”right|bottom”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”CenterBottom”
android:layout_gravity=”center|bottom”/>

</FrameLayout>

d. Jika sudah lalu jalankan, kurang lebih seperti gambar di bawah ini :

• 

2. ListView
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.

Buat Project baru dengan cara pilih Start a new Android Studio Project. Selanjutnya pada menu Template kita pilih Empty Activity.
Konfigurasikan Project dengan:
– Name = ListView
– Save Location = Pilih tempat dimana Project akan disimpan
– Languange = Java. Jika sudah, klik Finish.
c. Ubah script file activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”>

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

</RelativeLayout>

Ubah script MainActivity.java

package objectoprogramming.wordpress.com.listview;

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”, “Brick Thohir”, “Chairul Tanjung”, “Muhammad Debian AN-Nizami”, “Muhammad Bilal Al-Khawirizmi”};
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<?> adapterView, View view, int posisi, long id) {
switch (posisi){
case 0:
Toast t = Toast.makeText(MainActivity.this, “Didik Merupakan Mhas Kelas TI 3 Semseter 4 yang memiliki Skill Desain Grafis ” + “https://didikpangestu311.wixsite.com/dikynbghlh&#8221;, Toast.LENGTH_SHORT);
t.setGravity(Gravity.CENTER, 0, 0);
t.show();
break;
case 1:
Toast t1 = Toast.makeText(MainActivity.this, “Faizal Anwar Merupakan Mhs TI 2 Semester 6 yang berprofesi sebagai Copywriter di ” + “https://www.naskahkode.com&#8221;, Toast.LENGTH_SHORT);
t1.setGravity(Gravity.CENTER, 0, 0);
t1.show();
break;
case 2:
Toast t2 = Toast.makeText(MainActivity.this, “Ananda Ariwibawa Merupakan Hhs TI 1 semester 6 yang meiliki Skill Web Desain ” + “https://ariwibawa.my.id&#8221;, Toast.LENGTH_SHORT);
t2.setGravity(Gravity.CENTER, 0, 0);
t2.show();
break;
case 3:
Toast t3 = Toast.makeText(MainActivity.this, “Darin Maulana Merupakan Aslab 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 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/&#8221;, 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://santara.co.id dan https://dinaran.id/&#8221;, 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://shiokaya.id/&#8221;, 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/&#8221;, Toast.LENGTH_SHORT);
t8.setGravity(Gravity.CENTER, 0, 0);
t8.show();
break;
case 9:
Toast t9 = Toast.makeText(MainActivity.this, “Nadiem Makarin Merupakan CEO https://www.gojek.com/&#8221;, Toast.LENGTH_SHORT);
t9.setGravity(Gravity.CENTER, 0, 0);
t9.show();
break;
}
}
});
}
}

d. Jika sudah lalu jalankan, kurang lebih seperti gambar di bawah ini :

• 

3. GridView

GridView adalah salah satu container yang digunakan untuk menampilkan konten View.

Buat Project baru dengan cara pilih Start a new Android Studio Project. Selanjutnya pada menu Template kita pilih Empty Activity.
Konfigurasikan Project dengan:
– Name = GridView
– Save Location = Pilih tempat dimana Project akan disimpan
– Languange = Java. Jika sudah, klik Finish.
c. Ubah script file activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<GridView xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”

android:id=”@+id/gridview”
android:paddingTop=”10dp”
android:background=”#FFF5F5F5″
android:columnWidth=”90dp”
android:gravity=”center”
android:horizontalSpacing=”10dp”
android:numColumns=”auto_fit”
android:stretchMode=”columnWidth”
android:verticalSpacing=”10dp”>

</GridView>

Ubah script MainActivity.java

package objectoprogramming.wordpress.com.gridview;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.BadParcelableException;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
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”);
TampilanGrid = findViewById(R.id.gridview);

TampilanGrid.setAdapter(new ImageAdapter(this));

TampilanGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View v, int position, long id) {
Toast.makeText(MainActivity.this, “” + position, Toast.LENGTH_SHORT).show();
}
});
}
}

class ImageAdapter extends BaseAdapter{
private int[] gambar = {R.drawable.cash, R.drawable.checkbook, R.drawable.coins, R.drawable.creditcard, R.drawable.discount, R.drawable.gift, R.drawable.insurance, R.drawable.invoice, R.drawable.mobilepayment, R.drawable.payment, R.drawable.paymentsystem, R.drawable.paymentterminal, R.drawable.price, R.drawable.shoppingbag, R.drawable.stats};
private Context mContext;
ImageAdapter(Context c){
mContext = c;
}
public int getCount(){
return gambar.length;
}

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;
}
}

d. Jika sudah lalu jalankan, kurang lebih seperti gambar di bawah ini :

• 

Sekian, mohon maaf bila ada salah pengetikan maupun bahasa yang digunakan. Wassalamu’alaikum wr wb