Android Custom Expandable ListView Tutorial

Android Custom Expandable ListView Tutorial

In this tutorial, we are going to learn how to create a custom expandable ListView component in android. If you have not seen or know what Expandable ListView means I will suggest you visit this topic.

The link above is the link to my initial tutorial on Expandable ListView. It is a default Expandable ListView and looks nothing like the default.

There are cases when we will like to customize our expandable ListView to adopt it to our app design. Then it implies that we will change the look and fill of the default control.

I have created a custom expandable ListView as part of update to my Complete Mathematics Android App that I will release soon.

We will learn two different ways / designs we will create. Although it is left for you to choose which one works well for your design.

In order to understand what we are out to achieve, we are going to have a look at the screen shot of the application we will create below.

Android Custom Expandable ListView Tutorial

classicone

Before we start, it is important for you to understand the tools and environment I used in this application development tutorial. Feel free to use any tools you are familiar with.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 22

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidExpandableListView

Package: com.inducesmile.androidexpandablelistview

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

If you are using Android Studio as your choice IDE, the new project will create a default

MainActivity.java file and its corresponding layout file. Open the two files because we are going to

make use of them.

Please refer to the code in this tutorial because that is what we are going to modify in this tutorial. Download the project source and import it to your project. Once you are done then you are ready to start with the tutorial.

If you encounter or face any problem, you can use the comment box below to let me know.

We are going to modify the main layout out for the Expandable ListView. Copy and paste the following code in your main_activity.xml file.

<RelativeLayout 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"
    tools:context="elearning.chidi.com.elearning.FormulaFragment">

    <ExpandableListView
        android:id="@+id/expandableListView"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:divider="@color/divider"
        android:textColor="@color/primary_text"
        android:scrollbars="none"
        android:groupIndicator="@drawable/group_indicator"
        android:dividerHeight="0.5dp"
        android:layout_marginTop="4dp" />

</RelativeLayout>

From the code, we have add the android:groupIndictor property. We assigned this property with a drawable called group_indicator.

This is a selectable indication which will contain two images – the down arrow which implies that the ListView is expanded and the right facing arrow that implies that the expandable list group is closed.

Create a drawable layout file in the drawable folder of your android project. Copy and paste the following code in the file as shown below.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/down" android:state_expanded="true" ></item>
    <item android:drawable="@drawable/right">  </item>
</selector>

By the time you have finish with the following editing, your internet will appear like the image shown above.

Second, we can hide the group indicator arrow in the left side of the parent group and then display the in center right position. This can be achieved by simple modifying our child item layout.

This brings us to the end of this tutorial, If you find anything confusing kindly comment me with your questions.

Now, when you run your application you will see the interface that looks similar to the sample that was shown earlier on.

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published.

If you like this tutorial, please kindly download my new android app in Google play store by clicking the image below.

OTHER INTERESTING POSTS:

One Response

Add a Comment