Tutorial Dasar Cara Membuat ExpandableListView Menggunakan ArrayList di Android Studio

Tutorial Cara Membuat ExpandableListView di Android Studio

Halo semuanya, bagaimana kabar kalian semua hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan artikel tentang Tutorial Dasar Cara Membuat ExpandableListView Menggunakan ArrayList di Android Studio. Sebelum kita menyelam lebih dalam, disini saya akan menjelaskan singkat tentang widget yang satu ini.

ExpandableListView adalah jenis tampilan daftar dropdown di aplikasi Android. Tampilan daftar ini memberikan lebih banyak fleksibilitas kepada pengguna aplikasi. Pada expandablelistview ada dua jenis elemen yang digunakan, pertama adalah parent list item dan yang kedua adalah child list item. Parent item dibuat menggunakan ArrayList<String> dan child item dibuat menggunakan String[].

Jadi, disini kita akan belajar tutorial langkah-langkah untuk mengimplementasikan ExpandableListView di aplikasi Android.

Tutorial Cara Membuat ExpandableListView Menggunakan ArrayList di Android Studio

Buatlah projek Android Studio baru dengan informasi seperti pada tabel dibawah ini:

Application Name:Expandable App
Package Name:com.androidrion.expandableapp
Language:Java
Minimum SDK:API 16: Android 4.1 (Jelly Bean)

Daftar file xml layout yang digunakan dalam projek ini:

  1. activity_main.xml
  2. parent_item.xml
  3. child_item.xml

Daftar file java activity yang digunakan dalam projek ini:

  1. MainActivity.java
  2. ListAdapter.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Expandable App.

Langkah 1: Menghilangkan Toolbar

Ketika expandablelistview diterapkan pada layout, toolbar yang ada pada aplikasi tidak akan muncul. Jadi, yang harus kita lakukan adalah membuat tema default menjadi NoActionBar dengan cara klik file themes.xml dalam folder res>values>themes. Pada bagian line code 3, Ubah yang awalnya DarkActionBar menjadi NoActionBar. Dibawah ini adalah kode lengkap untuk file themes.xml

app/res/values/themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ExpandableApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Langkah 2: Membuat file layout parent_item.xml

Buatlah file xml layout dengan nama parent_item dalam folder layout dengan cara klik kanan pada folder layout, lalu pilih New>Layout Resource File. Dibawah ini adalah kode lengkap untuk file parent_item.xml

app/res/layout/parent_item.xml

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Parent"
        android:textAppearance="@style/TextAppearance.AppCompat.Title" />
</LinearLayout>

Langkah 3: Membuat file layout child_item.xml

Lakukan hal yang sama dengan membuat file xml layout parent_item untuk membuat file child_item. Dibawah ini adalah kode lengkap untuk file child_item.xml

app/res/layout/child_item.xml

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead" />
</LinearLayout>

Langkah 4: Membuat layout pada activity_main.xml

Buka file activity_main.xml dalam folder layout. Ubah layout default menjadi RelativeLayout lalu tambahkan widget Toolbar karena pada file themes kita telah mengubahnya menjadi NoActionBar. Itu berarti aplikasi tidak ada toolbar jika dijalankan. Dan tambahkan juga widget ExpandableListView di dalam RelativeLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

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

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/purple_500"
        app:title="@string/app_name"
        app:titleTextColor="@color/white" />

    <ExpandableListView
        android:id="@+id/expandableListView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar" />
</RelativeLayout>

Langkah 5: Membuat file java ListAdapater

Buatlah file java class dengan cara klik kanan pada folder java lalu pilih New>Java Class. Beri nama file baru tersebut dengan nama ListAdapter. Dibawah ini adalah kode lengkap untuk file ListAdapter.java

app/java/com.androidrion.expandablelistview/ListAdapter.java

package com.androidrion.expandableapp;

import java.util.List;
import java.util.Map;
import java.util.Objects;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.TextView;

public class ListAdapter extends BaseExpandableListAdapter {
    private final Activity context;
    private final Map<String, List<String>> ParentListItems;
    private final List<String> Items;

    public ListAdapter(Activity context, List<String> Items, Map<String, List<String>> ParentListItems) {
        this.context = context;
        this.ParentListItems = ParentListItems;
        this.Items = Items;
    }

    public Object getGroup(int groupPosition) {
        return Items.get(groupPosition);
    }

    @SuppressLint("InflateParams")
    public View getGroupView(int groupPosition, boolean isExpanded, View ListView, ViewGroup parent) {
        String CoursesFull = (String) getGroup(groupPosition);
        if (ListView == null) {
            LayoutInflater infalInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            ListView = infalInflater.inflate(R.layout.parent_item, null);
        }
        TextView item = ListView.findViewById(R.id.textView1);
        item.setText(CoursesFull);
        return ListView;
    }

    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    public int getGroupCount() {
        return Items.size();
    }


    public Object getChild(int groupPosition, int childPosition) {
        return Objects.requireNonNull(ParentListItems.get(Items.get(groupPosition))).get(childPosition);
    }

    @SuppressLint("InflateParams")
    public View getChildView(final int groupPosition, final int childPosition,
                             boolean isLastChild, View ListView, ViewGroup parent) {
        final String CoursesName = (String) getChild(groupPosition, childPosition);
        LayoutInflater inflater = context.getLayoutInflater();
        if (ListView == null) {
            ListView = inflater.inflate(R.layout.child_item, null);
        }
        TextView item = ListView.findViewById(R.id.textView1);
        item.setText(CoursesName);
        return ListView;
    }

    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    public int getChildrenCount(int groupPosition) {
        return Objects.requireNonNull(ParentListItems.get(Items.get(groupPosition))).size();
    }

    public boolean hasStableIds() {
        return true;
    }

    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
}

Langkah 6: Menambahkan kode pada file MainActivity.java

Buka file MainActivity.java dalam folder java. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.expandableapp/MainActivity.java

package com.androidrion.expandableapp;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ExpandableListAdapter;
import android.widget.ExpandableListView;

public class MainActivity extends Activity {
    List<String> ChildList;
    Map<String, List<String>> ParentListItems;
    ExpandableListView expandablelistView;
    List<String> ParentList = new ArrayList<>();

    {
        ParentList.add("Social Media");
        ParentList.add("Chatting App");
        ParentList.add("Video Streaming App");
        ParentList.add("UI Design");
        ParentList.add("Operating System");
        ParentList.add("Browser App");
        ParentList.add("Payment Method");
        ParentList.add("Cryptocurrency");
    }

    String[] SocialMedia = {"Facebook", "Twitter", "Instagram", "Snapchat"};
    String[] ChattingApp = {"WhatsApp", "LINE", "KakaoTalk", "Telegram", "Messenger"};
    String[] VideoStreamerApp = {"YouTube", "TikTok", "Vine", "Vimeo"};
    String[] UIDesign = {"Figma", "Adobe XD", "Sketch", "Framer"};
    String[] OSystem = {"Android", "Windows", "iOS"};
    String[] BrowserApp = {"Opera", "Mozilla", "Chrome", "Safari", "Edge"};
    String[] PaymentMethod = {"PayPal", "Mastercard", "Visa"};
    String[] Crypto = {"Bitcoin", "Ethereum"};
    String[] ByDefalutMessage = {"Items Loading"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ParentListItems = new LinkedHashMap<>();
        for (String HoldItem : ParentList) {
            switch (HoldItem) {
                case "Social Media":
                    loadChild(SocialMedia);
                    break;
                case "Chatting App":
                    loadChild(ChattingApp);
                    break;
                case "Video Streaming App":
                    loadChild(VideoStreamerApp);
                    break;
                case "UI Design":
                    loadChild(UIDesign);
                    break;
                case "Operating System":
                    loadChild(OSystem);
                    break;
                case "Browser App":
                    loadChild(BrowserApp);
                    break;
                case "Payment Method":
                    loadChild(PaymentMethod);
                    break;
                case "Cryptocurrency":
                    loadChild(Crypto);
                    break;
                default:
                    loadChild(ByDefalutMessage);
                    break;
            }
            ParentListItems.put(HoldItem, ChildList);
        }
        expandablelistView = findViewById(R.id.expandableListView1);
        final ExpandableListAdapter expListAdapter = new ListAdapter(this, ParentList, ParentListItems);
        expandablelistView.setAdapter(expListAdapter);
    }

    private void loadChild(String[] ParentElementsName) {
        ChildList = new ArrayList<>();
        ChildList.addAll(Arrays.asList(ParentElementsName));
    }
}

Langkah 7: Jalankan projek

Jika kalian sudah membuat layout dan menambahkan kode diatas, jalankan projek Android Studio kalian. Saat aplikasi berjalan, kalian akan melihat adanya list atau daftar yang telah kalian buat. Jika salah satu dari list tersebut kalian klik, maka akan membuat list baru di dalamnya. Apabila kode diatas tidak terjadi error maka aplikasi akan terlihat seperti pada video dibawah ini.

Akhir Kata

Itulah tadi tutorial dasar Cara Membuat ExpandableListView Di Android Studio. Kita tidak perlu menambahkan widget scrollview dalam layout karena dalam widget expandablelistview sudah terdapat function yang membuat widget tersebut bisa discroll. Tutorial diatas lumayan sulit untuk dikerjakan tapi sangat berguna untuk mengasah kemampuan dalam membuat aplikasi android.

Jika kalian mengalam kendala saat melakukan tutorial diatas, silahkan berkomentar dibawah pada artikel ini. Dan jangan lupa juga untuk Subscribe Chanel YouTube Android Rion – Tutorial agar kalian bisa mendapatkan tutorial versi videonya. Semoga tutorial ini bisa membantu kalian. Terima kasih. 🙂

Download Projek

Klik tombol dibawah ini untuk mendapatkan projek pada artikel ini

Exit mobile version