Assalamualaikum
Hai sahabat blogger yang setia,, hihi... mari kita lanjutkan pengenalan Layouting pada Android Studio Part 3, alangkah baiknya sahabat terlebih dahulu mengenal beberapa layouting pada Android Studio di Part 1 ada LinearLayout, RelativeLayout, TableLayout, AbsoluteLayout, dan di Part 2 ada FrameLayout, ListView.
Pada Pengenalan Layouting Part 3 pada Android Studio ini, akan membuat tutorial yang mudah dipahami dan tentunya menggunakan dua Layouting yaitu :
1. Menggunakan GridView
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 berbagai macam barang-barang. Penulisan code beserta struktur datanya hampir sama dengan ListView, hanya saja data yang ditampilkan akan berupa Grid atau kotak-kotak.
Pada tutorial sekarang kita belakar membuat program dengan menggunakan layout GridView pada aplikasinya, kita akan menampilkan gambar atau icon sebuah menu galerry dengan menggunakan GridView.
Sebelum ke tutorial sahabat harus mempersiapkan gambar yang menjadi iconnya, sahabat bisa melihat tutorial ListView, atau bisa download icon nya di Flaticon.com.
Penjelasan atribut-atribut yang akan 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 dafault jarak horizontal antar kolom.
➼ android:numColumns → menentukan berapa kolom yang akan ditampilkan.
Tutorial Membuat GridView
1). Buka aplikasi IDE Android Studio, dan buat sebuah project baru dengan nama file: GridView atau bisa sesuai keinginan. Bagi yang masih bingung cara membuat project baru bisa diklik disini!!
2). Download icon di flaticon.com dengan cara download icon, saya pilih icon Wedding. Setelah semua icon yang dibutuhkan sudah di download, copy semua icon ke dalam folder drawable.
 |
| Copy Semua Gambar Icon |
 |
| Pastekan Semua Gambar Icon Pada Drawable |
3). Selanjutnya buka dan ubah script pada file: activity_main.xml seperti 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:padding="10dp"
android:background="#FFF5F5F5"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp"
tools:context=".MainActivity">
</GridView>
Maka hasil Design dan Blueprint nya seperti gambar berikut :
4). Lalu buka dan ubah srcipt pada file MainActivity.java seperti dibawah ini:
package ryeyen08.blogspot.com.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.GridView;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
//Deklarasi Variabel GridView
protected GridView TampilanGrid;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setTitle("Paket RahmaWedding.com");
TampilanGrid = findViewById(R.id.gridview);
//Menerapkan adapter pada GridView
TampilanGrid.setAdapter(new ImageAdapter( this));
//menerapkan listener untuk menangani kejadian saat salah satu item di klik
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();
}
});
}
//Digunakan untuk mengatur konten yang akan ditampilkan
class ImageAdapter extends BaseAdapter{
//List konten gambar yang akan ditampilkan pada GridView
private int[] gambar = { R.drawable.pakethome, R.drawable.paketgedung, R.drawable.paketdekorasi, R.drawable.paketdokumentasi, R.drawable.paketgaun,R.drawable.paketmakeup, R.drawable.paketmakanancake,R.drawable.pakettunangan};
private Context mContext;
//Membuat constructor, dengan parameter Context, untuk menghubungkan Adapter dengan GridView
ImageAdapter(Context c) {
mContext = c;
}
public int getCount(){
//menghitung jumlah/panjang dari daftar konten
return gambar.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
//membuat ImageView baru untuk setiap item yang direferensikan oleh Adaptor
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
//Jika tidak di daur ulang
if (convertView == null) {
//maka menginisialisasi beberapa atribut
imageView = new ImageView(mContext);
//mengatur panjang dan lebar pada ImageView
imageView.setLayoutParams(new ViewGroup.LayoutParams(240, 240));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
//Mengatur Padding
imageView.setPadding(4,4,4,4);
} else {
imageView = (ImageView) convertView;
}
//Mengset Image dari Resource/sumber berdasarkan posisinya
imageView.setImageResource(gambar[position]);
return imageView;
}
}
}
5). Run App untuk menjalan kan Aplikasi di emulator, dan akan tampil seperti gambar dibawah ini:
 |
| Hasil App Menggunakan GridView |
Tutorial Membuat GridView Custom
1). Buka aplikasi IDE Android Studio, dan buat project baru dengan nama file: GridViewCustom atau apa saja yang diinginkan. Bagi masih bingung membuat project baru bisa klik disini!.
2). Download icon di flaticon.com dengan cara download icon, saya pilih icon Wedding. Setelah semua icon yang dibutuhkan sudah didownload, copy semua icon ke dalam folder drawable.
 |
| Copy Semua Gambar Icon |
 |
| Paste pada Drawable |
 |
| Setelah Semua Gambar Icon di Simpan |
3). Pada tampilan IDE Android Studion yang tampil sahabat buka dan ubah script activity_main.xml seperti script dibawah :
<?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">
<GridView
android:id="@+id/gridview"
android:layout_width="wrap_content"
android:layout_height="1137dp"
android:layout_marginStart="6dp"
android:layout_marginLeft="6dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="6dp"
android:layout_marginRight="6dp"
android:layout_marginBottom="6dp"
android:gravity="center_horizontal|center_vertical"
android:horizontalSpacing="10dp"
android:listSelector="#FF03DAC5"
android:numColumns="3"
android:verticalSpacing="20dp"/>
</RelativeLayout>
4). Buatlah sebuah layout dengan nama: costom_grid.xml , seperti cara dibawah ini:
Pada custom_grid.xml ini nanti nya akan di inflate melalui file java adaptor, yang berisi dua buah komponen User Interface yaitu ImageView untuk penempatan icon dari item-itemnya dan TextView untuk penempatan teks dari item-itemnya. Masukan script dibawah ini pada custom_grid.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="UseCompoundDrawables, UselessParent, HardcodedText">
<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>
5). Kemudian buat adapter nya dengan nama: GridAdapter.java.
Nah layout cutom_grid.xml tadi di inflate di dalam file ini, lalu adaptor ini akan menghubungkan layout ke MainActivity.java, namanya juga adaptor yaa begitulah fungsinya. Ini nih isi script dari file GridAdapter.java :
package ryeyen08.blogspot.com.gridviewcustom;
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.custom_grid, null);
}
ImageView gambarWedding = view.findViewById(R.id.gambar);
TextView namaWedding = view.findViewById(R.id.nama);
namaWedding.setText(namanya[i]);
gambarWedding.setImageResource(gambar[i]);
return view;
}
}
6). Buatlah script coding pada MainActivity.java seperti dibawah ini :
package ryeyen08.blogspot.com.gridviewcustom;
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.pakethome, R.drawable.paketgedung, R.drawable.paketdekorasi, R.drawable.paketdokumentasi, R.drawable.paketgaun,R.drawable.paketmakeup, R.drawable.paketmakanancake,R.drawable.pakettunangan};
String[] namanya = {"Paket di Rumah", "Paket di Gedung" , "Paket Dekorasi" ,"Paket Dokumentasi", "Paket Gaun", "Paket Makeup","Paket Makanan dan Cake", "Pake Tunangan"};
@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 zoomActivity = new Intent(getApplicationContext(), ZoomActivity.class);
zoomActivity.putExtra("gambar", gambar[position]);
zoomActivity.putExtra("namanya", namanya[position]);
startActivity(zoomActivity);
}
});
}
}
Pada file MainActivity.java ini alaurnya pertama dengan membuat integer untuk ke semua icon-icon dengan memanggil sumber resource, lalu membuat String sebagai nama-nama dari icon-icon tersebut, selanjutnya menghubungkan keseluruhan dengan adaptor. Dan untuk metode pada setiap item yang di pilih atau diklik akan dihantarkan ke activity ZoomActivity menggunakan intent.
7). Selanjutnya membuat activity baru dengan nama: ZoomActivity.java , ikuti langkah berikut ini :
Script isi dengan code berikut:
package ryeyen08.blogspot.com.gridviewcustom;
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 gambarZoom = findViewById(R.id.gambarZoom);
TextView namaZoom = findViewById(R.id.namaZoom);
Intent i = getIntent();
gambarZoom.setImageResource(i.getIntExtra("gambar", 0 ));
namaZoom.setText(i.getStringExtra("namanya"));
}
}
8). Kemudian buatlah layout baru dengan nama: activity_zoom.xml ,ikuti langkah seperti dibawah :
Setelah itu isi scriptnya seperti dibawah ini :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".ZoomActivity">
<ImageView
android:id="@+id/gambarZoom"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:layout_marginBottom="10dp"
tools:ignore="ContentDescription"/>
<TextView
android:id="@+id/namaZoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/gambarZoom"
android:layout_centerHorizontal="true"
android:fontFamily="monospace"
android:text="Nama"
android:textStyle="bold"
android:textSize="30sp"/>
</RelativeLayout>
9). Tambahkan activity zoom nya pada file AndroidManifets.xml seperti dibawah ini :
10). Dan terakhir jalankan dengan klik Run App di emultor, maka akan tampil seperti ini :
 |
| Hasil App Menggunakan GridViewCustom |
2. Menggunakan ConstraintLayout
ConstraintLayout merupakan layout terbaru dari Android berbasis relative layout, namun mempunyai tingkat kemudahan yang lebih baik dalam penggunaannya. Karena, ConstraintLayout dapat digunakan dengan baik pada design mode di Android Studio. Setiap itemnya memiliki 4 arah constraint yaitu top, left, right, dan bottom, dan ke empat arah ini memiliki sebuah connection resource yang dapat ditarik ke parent atau object lain. Sebenarnya ConstraintLayout ini mirip dengan RelativeLayout, karena letak view bergantung pada view lain dalam satu layout ataupun dengan parent layoutnya.
ConstraintLayout merupakan salah satu komponen ViewGroup yang dapat kita gunakan untuk menyusun tampilan aplikasi yang kompleks tanpa adanya nested layout. ConstrainLayout lebih fleksibel dan mudah digunakan dengan dukungan Layout editor pada Android Studio, kita gunakan drag and drop di Layout Editor yang berada pada tab Design atau dengan menambahkannya secara menual melalui tab Text.
Nah untuk ConstrainLayout kita akan menggunakan constraint sebagai dasar dalam menentukan posisi agar sebuah view dapat terhubung dengan view lainnya sesuai harapan kita.
Konversi berkas layout
Ini yang menarik!! ketika kita mempunyai layout yang sudah dibuat sebelumnya, kita bisa mengubahnya menjadi ConstraintLayout tanpa harus mengubah dan menyesuaikan kondigurasi setiap View yang sudah ada. Gimana caranya? coba langkah-langkah berikut :
a) Masuk pada bagian Design dari Layout Editor di Android Studio
b) Pada panel Component Tree klik kanan - Convert LinearLayout to ConstraintLayout seperti pada gambar dibawah :
Perlu diketahui fungsi konversi diatas digunakan untuk mengkonversikan layout yang tidak terlalu komplek, jika layoutnya yang kompleks sebaiknya diubah secara manual untuk menghindari kesalahan konversi.
Menambah dan Menghapus Constraint
Setiap view di dalam ConstraintLayout wajib memiliki constraint untuk terhubung dengan parent atau view lainnya. Berikut cara menambahkan Constraint:
a) Drag view yang ingin ditambahkan dari panel Pallete ke dalam editor.
b) View yang ditambahkan akan memiliki anchor point pada setiap sisi yang akan kita gunakan untuk membuat constraint baru .
c) klik anchor point yang berada pada view, lalu arahkan ke parent atau view lainnya seperti dibawah ini
d) Secara default akan terdapat margin yang memisahkan antara view dan parent atau view lain yang terkait dengan view tersebut. defaultnya margin memiliki nilai 8dp.
Berikut cara menghapus Constraint :
a) klik View , kemudian klik anchor point dari view tersebut dan pencet delete, akan jadi seperti ini.
b) Jika ingin mengapus sekaligus semua Constraint dari sebuah view, klik kanan pilih Clear Constraints of Selection.
Mengatur Constraint Bias
Kita menambahkan dua Constraint untuk vertikal constraint dengan ukuran view yang dimiliki nilai tetap atau berdasarkan content yang berada di dalamnnya. Posisi awal view akan berada di tengah yang secara default memiliki bias 50%.
 |
| View Bias |
Kita bisa mengatur nilai bias untuk mengubah posisi view dengan menggunakan bias slinder seperti dibawah ini :
 |
| Bias Slinder |
Seperti penjelasan diatas ConstrainLayout akan sangat membantu kita dalam membangun tampilan aplikasi yang cukup komplek dengan Layout editor. Yuk mari kita buat sebuah aplikasi menggunakan ConstraintLayout, langka-langkah nya sebagai berikut:
1) Pertama buka IDE Android Studio, lalu buat project baru dengan nama file: ConstraintLayout atau bisa disesuaikan dengan keiginan.
2) Ini adalah Design dan Blueprint yang akan kita buat untuk sebuah form login di app Android.
4) Setelah itu buka dan ubah script pada file: activity_main.xml seperti 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"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginEnd="100dp"
android:layout_marginRight="100dp"
android:gravity="center_horizontal"
android:text="LOGIN ACOUNT"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.063" />
<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.724"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.718" />
<ImageView
android:id="@+id/imageView"
android:layout_width="218dp"
android:layout_height="209dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.218"
app:srcCompat="@drawable/wedding"
tools:ignore="VectorDrawableCompat" />
<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.272"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.718" />
<EditText
android:id="@+id/editText"
android:layout_width="234dp"
android:layout_height="45dp"
android:ems="10"
android:gravity="center_horizontal"
android:hint="Username"
android:inputType="textEmailAddress"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/editText2"
android:layout_width="235dp"
android:layout_height="50dp"
android:ems="10"
android:gravity="center_horizontal"
android:hint="Password"
android:inputType="textPassword"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/editText"
app:layout_constraintVertical_bias="0.047" />
</androidx.constraintlayout.widget.ConstraintLayout>
5) Pilih Run App untuk menjalankan diemulator, maka akan tampil aplikasi seperti gambar dibawah.
 |
| Hasil App Menggunakan ConstraintLayout |
Sekian turorial dan penjelasan yang disampaikan tentang Layouting ,bagaimana sahabat apakah ada kendala? jika ada kendala bisa langsung komentar kita diskusi belajar bersama. Semoga bermanfaat dan bisa menambah ilmu bagi yang membacanya... aminnn.. Silahkan bisa baca pengenalan Layouting Part 1 dan Part 2 nya kunjungi blog NR Informatika.
Terimakasih
0 comments:
Posting Komentar