Belajar Menggunakan Layout Inflater di Android Studio


Assalamualaikum Warahmatullahi Wabarakatuh.

Di kesempatan kali ini, saya akan mengajarkan pada kalian Cara Menggunakan Layout Inflater di Android Studio, Layout inflanter adalah sebuah class yang bisa kita gunakan untuk membuat java object view dari layout yang kita buat di xml. Layout Inflater digunakan jika kita ingin membuat sebuah sub activity, jika kita gambarkan, fungsinya hampir sama seperti fragment, yaitu bagian kecil dari Activity.

Belajar Menggunakan Layout Inflater di Android Studio

Pada tutorial ini kita akan belajar untuk memahami penggunaan dari layout inflater dan juga contoh penerapannya pada Aplikasi Android.

Materi lainnya yang direkomendasikan:

Sudah saya jelaskan tadi, Layout Inflater digunakan untuk menghubungkan MainActivity (Activity Utama) dengan Sub Actuvuty, yaitu bagian kecil dari Activity. Jika kita gambarkan, kalian bisa melihatnya seperti berikut ini.
Gambaran Dari Konsep Layout Inflater

Layout Inflater digunakan jika kita ingin menambahkan layout tambahan pada ActivityMain kita, pada gambar diatas, kita menambahkan 2 buah layout tambahan pada MainActivity. Untuk penjelasan lebih lanjutnya, mari kita simak tutorial berikut ini.

Belajar Menggunakan Layout Inflater di Android Studio

1) Buka aplikasi Android Studio kalian, Buat Project Baru. Disini kita akan membuat 3 buah layout activity, yaitu 1 buah MainActivity (Activity Utama) dan 2 buah SubActivity (Activity Tambahan).

2) Kita akan membuat SubActivitynya terlebih dahulu, pada SubActivity yang pertama ini, kita akan menambahkan ImageView didalamnya, kalian dapat menyiapkan Gambarnya sendiri.

Buat Activity baru, klik kalan pada direktori layout > New Layout resource file, berinama "sub1_activity", masukan kode xmlnya seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:gravity="center"
        android:text="Ini Sub Activiy 1"
        android:textColor="#FF001BAF"
        android:textSize="16sp"
        android:textStyle="bold" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="215dp"
        app:srcCompat="@drawable/gambar_saya" />
</LinearLayout>

View:

Screenshot_sub1Activity layout

3) Selanjutnya buat SubAcivity yang ke dua, berinama "sub2_activity", didialamnya akan kita tambahkan Beberapa TextView, sebagai komponen pendukung.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:gravity="center"
        android:text="Ini Sub Activiy 2"
        android:textColor="#FFD30000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Nama : WIldan Muhammad A" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Jurusan : Teknik Informatika" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Job : Android Developer" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Universitas : UNPI Cianjur" />

</LinearLayout>

View:

Screenshot_sub2Activity layout

4) Selanjutnya, buka activity_main.xml kalian, disini kita akan menambahkan 1 buah Container, yaitu LinearLayout. LinerLayout tersebut digunakan sebagai wadah untuk menampilkan activity tambahan yang sudah kita buat tadi.

<?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:layout_margin="8dp"
    android:orientation="vertical"
    android:background="#FFF5F5F5"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:gravity="center"
        android:text="Activity Utama"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <LinearLayout
        android:id="@+id/konten_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="vertical">
        
    </LinearLayout>

</LinearLayout>

5) Berikutnya buka MainActivity, pada source code berikut ini, kita akan menggunakan class Layout Inflater, untuk membuat objek view dari layou yang sudah kita buat, lalu menampilkannya pada LinearLayout.

package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity{

    //Mendefinisikan Variable LinearLayout, Digunakan sebagai Container/Penampung
    private LinearLayout KontenView;

    //Mendefinisikan View, digunakan untuk SubActivity
    private View Sub1Activity,Sub2Activity;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        KontenView = findViewById(R.id.konten_view);

        //Menentukan Layout Resource dan ViewGroup yang akan kita gunakan
        Sub1Activity = getLayoutInflater().inflate(R.layout.sub1_activity, KontenView, false);
        Sub2Activity = getLayoutInflater().inflate(R.layout.sub2_activity, KontenView, false);
        
        //Menampilkan View pada LinearLayout
        KontenView.addView(Sub1Activity);
        KontenView.addView(Sub2Activity);
    }
}

Demo:

Screenshot_Layout Inflater Example

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Buka Komentar Tutup Komentar

Disqus Comments