Android Expandable News Feed Example

Tutorial using PlaceHolderView

This view is very different from the Android ExpandableListView in the sense that it’s based on PlaceHolderView which is based on RecyclerView. So, we have the power of reusing the views and managing the memory, that too is a very modular and simple interface.

Objectives Outline for this tutorial:

  1. We would be building a news feed with expandable parent view. On expansion of the one view group collapses the other views.
  2. We will be loading the images from urls and setting it in the view display. For this purpose we will be using a library Glide.
  3. The feed data list will be seeded in the application and this seed json file will be stored in the assets folder.
  4. The seed file will be parsed into Feed object using another library gson.
  5. This structure will also be compatible if we are pulling url json data from a live server.

ExpandablePlaceHolderView:

This view is build upon the PlaceHolderView with the parent child architecture. The detail about this class can be found here

The best approach to understand and appreciate its usage over traditional android ExpandableListView would be to go through the process described below.

Let’s start building:

Step 1:

Set up the project in android studio with default activity.

In app’s build.gradle add the dependencies.

Notes:

  1. Add an assets folder in the src/main directory and point to it in gradle assets.srcDirs
  2. CardView is used to display the image in the list

Add Internet permission in the app’s AndroidManifest.xml

Step 2:

Setup project color and drawables:

  1. Download the icon for the expand and collapse indicator from https://design.google.com/icons/ and place them in the drawable folder.
  2. Create two drawable xml files to mark a line between item views

a. res/values/colors.xml

b. res/drawable/bottom_border_on_dark.xml

c. res/drawable/bottom_border_on_light.xml

Step 3:

Create src/layout/activity_main.xml

Step 4:

Create src/layout/feed_heading.xml

Step 5:

Create src/layout/feed_item.xml

Step 6:

Place news.json file in the assets folder created in the above step 1.

Notes:

  1. This strategy is very useful in bundling app with seed files. Seed files contain data build in the app package and can be used to populate database or use to display default data to the user. Placing seed files in the form of json makes is extremely easy to parse into models.

Step 7:

Create Utils.java

Note:

  1. Utils contain methods required to parse seed json file and also populate the model Feed.java and Info.java

Step 8:

Create model Feed.java

Notes:

  1. @SerializedName annotation belongs to gson class and used to read json file variable and bind it to the model variable.
  2. @Expose is used to make the variable readable to the gson

Step 9:

Create model Info.java

Step 10:

We will now create the class to bind the item views and its operations.

Create HeadingView.java for the parent view

Notes:

  1. @Parent is annotation used to bind a class as the parent view.
  2. @layout is used to bind the layout with this class
  3. @SingleTop is used to keep only one parent in expanded state and others in collapsed state.
  4. @View is used to bind the views in a layout we want to refer to
  5. @Toggle is used to provide a view in the layout to be used as a toggle for expanding or collapsing a parent on view click. If not provided then the parent view is used as a toggle view by default.
  6. @ParentPosition is used bind an int variable to be updated with the relative position of a parent with respect to other parents.
  7. @Expand is used to get a method invoked when the parent view expands.
  8. @Collapse is used to get a method invoked when the parent view collapses.

For detailed explanations view PlaceHolderView at GitHub repository

Step 11:

Create InfoView.java for the child views

Notes:

  1. Most annotations used are described in step 10.
  2. @ChildPosition is used to bind an int variable to be updated with the relative position among children of a parent.

Step 12:

Create MainActivity.java

Notes:

  1. We obtain the instance of the ExpandablePlaceHolderView and add views using the feed data from the model list.
  2. Parent and child should be added in sequence and parent must be added before its child

PlaceHolderView GitHub repository is here

The source code for this example is here

Coders Rock!!