PENGENALAN LAYOUTING LANJUTAN (FrameLayout, ListView, GridView, ConstrainLayout) PADA ANDROID STUDIO
Berikut adalah beberapa contoh praktikum FrameLayout, ListView, GridView, ConstrainLayout pada Android Studio :
A. Praktikun Frame Layout
- Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
- Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
- Akan muncul tampilan seperti dibawah ini. Kita hanya perlu memberi nama project pada “Name” dan pilih lokasi penyimpanan project-nya akan disimpan difolder mana pada bagian “Save location”, selebihnya cukup biarkan saja. Untuk name kita beri nama “FrameLayout”. Jika sudah, klik “Finish”.
- Ketikkan 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:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="140dp"
android:layout_height="200dp"
android:text="Button 2" />
</FrameLayout>
- Laku klik Run, maka akan tampil seperti dibawah ini :
VERSI RAPIH :
<?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>
- Maka akan muncul :
B. Praktikum Frame Layout 2
- Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
- Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
- Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “FrameLayout2”.
- Ketikkan script dibawah ini :
FRAMELAYOUT2 :
<?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">
<TextView android:text="LeftTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="RightTop"
android:layout_gravity="top|right"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="CentreTop"
android:layout_gravity="top|center_horizontal"/>
<TextView android:text="Left"
android:layout_gravity="left|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Right
android:layout_gravity="right|center_vertical"/><TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Centre"
android:layout_gravity="center"/>
<TextView android:text="LeftBottom"
android:layout_gravity="left|bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="RightBottom"
android:layout_gravity="right|bottom"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="CenterBottom"
android:layout_gravity="center|bottom"/>
</FrameLayout>
- Lalu dijalankan, akan tampil seperti ini :
C. Praktikum List View Custom
- Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
- Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
- Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “ListViewCustom”.
- Ketikkan pada activity_main.xlm
<?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/colorPrimary"
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>
- Ketikkan pada MainActivity.java :
package dewiratnawati246.blogspot.com.listviewcustom;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
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 Aribawa", "Darin Maulana", "Sultan Bisri", "Andrew Darwis", "Mardigu Wowik Prasetyo", "Kirdi Putra", "William Tanuwijaya", "Nadiem Makarim", "Acmad 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<?> adapterView, View view, int posisi, long id) {
switch (posisi) {
case 0:
Toast t = Toast.makeText(MainActivity.this, "Dikdik Merupakan Mhs Kelas TI 3 Semester 4 yang 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 Merupakan Mhs TI 2 Semester 6 yang 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 Aribawa Merupakan Mhs TI 1 Semester 6 yang memiliki skill Web Desain " + "cek http://www.aribawa.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 Aslab Terbaik tahun 2021 versi Majalah FORBES", Toast.LENGTH_SHORT);
t3.setGravity(Gravity.CENTER, 0, 0);
t3.show();
case 4:
Toast t4 = Toast.makeText( MainActivity.this, "Sultan Bisri Merupakan Runner Up Aslab 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 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://santara.co.id dan https://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;
}}
});
}
}
- Ketika di Run, maka akan muncul seperti dibawah ini :
- Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
- Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
- Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “GridView”
- Masukkan skrips dibawah ini, namun sebelumnya masukkan terlebih dahulu gambar dengan cara copy gambar yang akan digunakan, lalu paste pada drawable yg ada pada android studio.
Lalu membuat class java lagi dan beri nama GridAdapter.java :
package dewiratnawati246.blogspot.com.gridview;
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.item1,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;
}
}
- Maka akan muncul tampilan seperti dibawah ini :
E. Constrain Layout
ConstraintLayout merupakan salah satu komponen ViewGroup yang dapat kita
gunakan untuk menyusun tampilan aplikasi yang kompleks tanpa adanya nested layout.
ConstraintLayout tersedia dengan dukungan kompatibilitas mulai dari Android 2.3 (API
Level 9) sampai dengan yang terbaru.
ConstraintLayout memiliki kesamaan dengan RelativeLayout. Dalam penggunaan
semua view yang berada di dalamnya disusun berhubungan antara parent dan view
lainnya. Tapi ConstraintLayout lebih fleksibel dari RelativeLayout dan mudah digunakan
dengan dukungan Layout Editor pada Android Studio. Kita bisa menambah view baru ke
dalam ConstraintLayout. Kita gunakan drag and drop di Layout Editor yang berada pada
tab Design atau dengan menambahnya secara manual melalui tab Text. Kita perlu
menentukan posisi dari view atau bagaimana agar view tersebut terhubung dengan
parent layout atau view lainnya. Mengapa demikian?, Karena setelah ditambahkan,
view tersebut tidak memiliki constraint yang menghubungkannya dengan parent layout
atau view lainnya. Sehingga ketika dijalankan, posisi dari view tersebut akan berada di
bagian atas sebelah kiri.
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.
Terima kasih sudah berkunjung diblog ini dan Selamat mencoba🙂
Komentar
Posting Komentar