Creating a content toggler like Gmail in Android

If you are an Android user and you use Gmail app; then you know this: If there are more than one mail in your thread, then you can touch on the heading of any mail and make it collapse and appear.

If you want to implement a similar content toggler then you can also do so.

Disclaimer: The example that I will show here will not look anything like Gmail app. But if you understand the concept behind it you can make it look like whatever suits your needs.

Background: The visibility property of any view in android can have three different states VISIBLE, INIVISIBLE and GONE as mentioned here Android View Visibility .

VISIBLE: It displays the view and takes up any space on the screen required to display it.

INVISIBLE: It doesn’t displays the view, but it does take up the space that the layout would have taken otherwise. It’s like a blank board.

GONE: It makes the view as if it was never there. It doesn’t shows the view on the screen, but it also doesn’t takes up space like the INVISIBLE does. Making the layout effectively not present in the entire scenario altogether.

Now that the background is out of the way, we will look at the concept behind achieving what we started to do.

Concept: We will have two Views one followed by another; inside the same parent as siblings. I will call the first one heading and the second one content.

Toggler Concept
Toggler Concept

On the touch of the heading we want to make the content disappear. To do that we will use GONE and NOT INVISIBLE. Setting INVISIBLE will still take up the space; setting it to GONE will not (And this is why the background was important).

Let’s make a layout which satisfies our needs. An example can be seen here

Notice line number 30, i have set the content view to be GONE in the beginning, so it won’t appear in the beginning unless the user touches the heading. You can set it to appear or not appear; it is up to you.

Advice: In cases like Gmail. What you want to do is display the contents of the last mail appear and contents of rest of the previous mails disappear.

Now we need to set the heading to display the contents and make them disappear on subsequent touches. To do that we will make a class which implements View.OnClickListener; making a separate OnClickListener enables us to reuse the Listener instead of creating a Listener for every element that we have. Look at line number 18 and onwards. It defines a new class contentToggler which implements OnClickListener. Let’s just look into details as to how it works.

  • The onClick of our class takes a View as an argument. This is the View that has been clicked upon (In our case it will give us the heading container).
  • On Line number 21 we are accessing the parent of the view that the click has been made on (In our case it will be the container as the heading is inside the container).
  • On Line number 22 we access the content view by using a combination of getChildAt and indexOfChild. This is the view that we want to make appear and disappear on clicks.
  • On Line number 23 we call a function which does the appearance and disappearance of the View that we give it. In our case we are giving it the content view.
  • On Line number 27 we use getVisibilty to check if the view is VISIBLE, if it is then on Line number 28 we set it to GONE using setVisibility.
  • Else on Line number 30 we set the visibility to VISIBLE.

Now that we have made our contentToggler class; it’s time to put it to action. On Line number 13 we are accessing the heading view. On Line number 14 we are setting a OnClickListener on it as we would do any other view.

There is nothing more to do. Compile and run the app and see the results for yourself.

The code snippets that I have provided are not a full fledged running android App. They are only to guide you as to how to achieve the desired effect.

If you want a full fledged running sample then you can go to my Studio Hello github repo. Clone, compile, run and bring the right drawer it to see for yourself. The repo contains other things as well. To see the changes that were required to make the addition of this example content toggler click here.

Here is final result :

Please put in your words.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s