DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Android Tips: Expandable/Collapsible Views

Android Tips: Expandable/Collapsible Views

Tony Siciliani user avatar by
Tony Siciliani
·
Sep. 06, 13 · Mobile Zone · Interview
Like (5)
Save
Tweet
96.53K Views

Join the DZone community and get the full member experience.

Join For Free

expandable/collapsible views (text, images, etc.) in android are useful when we want to display all the available options on one screen, without the user having to scroll all the way to find the one he/she is interested in. what we are doing is trying to maximize the use of the available space on the screen by giving an overall view of its content.

help-content1 help-content2

this example uses a textview, but any view can be expanded/collapsed the same way.

<!-- activity_info layout file -->
<!-- clickable title -->
<textview  android:id="@+id/help_title_gest"
style="@style/title_help"
android:text="@string/title"
android:clickable="true"
android:onclick="toggle_contents"/>
<!--content to hide/show -->
<textview  android:id="@+id/txt_help_gest"
style="@style/txt_help"
android:text="@string/txt_content"/>

notice that we have included the onclick handler in the xml, and that we are using styles . a quick reminder: if you are doing serious android development, and are using neither styles, includes nor fragments to maximize re-usability, you are creating your own hell.

that said, writing the corresponding code is pretty straightforward:

// inside activity
textview txt_help_gest;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_info);
txt_help_gest = (textview) findviewbyid(r.id.txt_help_gest);
// hide until its title is clicked
txt_help_gest.setvisibility(view.gone);
}
/**
* onclick handler
*/
public void toggle_contents(view v){
txt_help_gest.setvisibility( txt_help_gest.isshown()
? view.gone
: view.visible );
}

note that we used view.gone and not view.invisible . we would usually want to use the former for two main reasons.  firstly, because  we wouldn’t want our expandable view to take up space while invisible. secondly, using view.gone provides at least to some extent an expanding/collapsing effect, since the space occupied expands & retracts along with its contents.

now, if we wanted to go even further with visual effects, we would use android animations, in this case an up & down sliding effect. we already wrote about animations in an earlier article , so we’ll skip the details here. the reader can also consult this article by ravi tamada for an excellent rundown of different visual effects.

for the slide-down effect, we can create res/anim/slide_down.xml this way:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillafter="true">
<scale
android:duration="200"
android:fromxscale="1.0"
android:fromyscale="0.0"
android:interpolator="@android:anim/linear_interpolator"
android:toxscale="1.0"
android:toyscale="1.0" />
</set>

the down movement is illustrated by android:fromyscale going from zero to one in about 200 milliseconds on a linear change rate. now we’ll write the corresponding method in an utility class fx:

import android.view.animation.animation;
import android.view.animation.animationutils;
//...
/**
*
* @param ctx
* @param v
*/
public static void slide_down(context ctx, view v){
animation a = animationutils.loadanimation(ctx, r.anim.slide_down);
if(a != null){
a.reset();
if(v != null){
v.clearanimation();
v.startanimation(a);
}
}
}

we’ll do the same for sliding up (left to the reader as an exercise), and our toggle method above will become:

/**
* onclick handler
*/
public void toggle_contents(view v){
if(txt_help_gest.isshown()){
fx.slide_up(this, txt_help_gest);
txt_help_gest.setvisibility(view.gone);
}
else{
txt_help_gest.setvisibility(view.visible);
fx.slide_down(this, txt_help_gest);
}
}

that’s it. we now have a nice expandable/collapsible text section triggered by clicking on its title.

Android (robot)

Published at DZone with permission of Tony Siciliani, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Edge Computing: Implementation, Advantages, and Disadvantages
  • The Best Team Ever
  • JVM C1, C2 Compiler Thread: High CPU Consumption?
  • Testing Your Infrastructure as Code Using Terratest

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo