Android Category Screen using ExpandableRelativeLayout

person folder_openAndroid, Material Designaccess_time February 4, 2016

In this tutorial we are going to show how to create a category screen using ExpandableRelativeLayout. This expandable layout can be used inside ListView as list row item. Let us assume that our application includes a screen which has category selection. Every category will have some items. In this example we have added checkboxes for multiple item selection.

We have tried using ToggleExpandLayout. This library uses FrameLayout and the animation looks very impressive. If we want to use multiple categories, we can wrap all our ToggleExpandLayout inside DropDownLayout. But the problem is that if our layout has more number of widgets or views we will surely need to enable scroll, this library doesn’t work with ScrollView. You can try this library if you don’t want scroll in that screen.
See following steps :

  1. Add ExpandableRelativeLayout library as compiler dependency in your app/build.gradle
  2. Using SwitchCompat for backward compatability

1. Manifest file

2. app/build.gradle

This example uses the ExpandableRelativeLayout library.
Add compile 'com.github.aakira:expandable-layout:1.4.1@aar' as dependency in application’s build.gradle file.

You can see the complete build.gradle file below

3. Activity layout file

 

4. Main Activity code

To expand the layout you can use  expandableLayout.expand();

To collapse, use  expandableLayout.collapse();

To toggle between expand and collapse,  expandableLayout.toggle();

We have given the complete implementation below. You can add this in to your ListView as list row item layout.

 

5. Demonstration

Categories Screen using ExpandableRelativeLayout
Categories Screen using ExpandableRelativeLayout

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">