Android Expandable Layout Tutorial with Example

Expandable layout is useful to show details content when user clicks on the button or view or layout or any areas on the application. In this tutorial, you will learn to implement expandable and collapsible layout or view or widget with material design color and animation effect in your android app/game. You can customize and give your own style according to your needs.

Making expandable and collapsible layout or view or widget is fun in android because you can implement ExpandableLayout in your app or game with little bit XML code and add onClick in the java file. Expand and Collapse are also used in android listview layout.

Related:
Android ListView with Image and Text
Linking a TextView to Another TextView Inside ScrollView in Android
Animated Android Toolbar (Expanding and Collapsing)

Android Example: How to Implement ExpandableLayout in Android

Let’s start by adding compile 'com.github.aakira:expandable-layout:1.4.2@aar' dependency in our application build.gradle file after which the Build.gradle file will look like below.

build.gradle


XML Layout File

In XML layout file, we are going to add different layouts, textviews, buttons etc. First of all, make your root layout as RelativeLayout and add some buttons in side RelativeLayout and add TextView or any views you want to show and hide when button is clicked inside com.github.aakira.expandablelayout.ExpandableRelativeLayout. Following is the complete content of XML layout file.

res/layout/android_expandable_layout_listview_example.xml

Java Activity File

In java activity file, we will make expandable and collapsible text or views or widgets or layout that is inside com.github.aakira.expandablelayout.ExpandableRelativeLayout. Following is the complete code of java activity file.

src/ExpandableLayoutMaterialDesign.java

You can use expandableLayout1.expand(); to extend only and expandableLayout1.collapse(); to collapse only.

That’s all. Now run your Android Expandable Layout Tutorial with Example application and click on any list, you will see some more text below that list and other list goes to below expandable layout. Output of this application will look like above screenshot.