Accordion-like widget for Android

I had some Android project this last week and I came to a problem.  I wanted to make an accordion-like view for a part of the application that I am making and since I have a short deadline the first thing that came to my mind was to search what others have done. I only managed to find a simple idea given on the Android developer’s mailing list but I couldn’t find any code available.

So I decided to publish my code in order to help others that would like to implement accordion-like view for Android quick and simple or simply to learn more. I must say that for any other problem it would need a lot customization and this code that I’ll publish here is more like an implementation of a design pattern for making accordion widget.

Here is a video of how it looks like in the Emulator.

So first it is important to talk about the layout design. It was done following the suggestion given here.  I won’t explain much I think that it is very clear how it is done ;).

So I’ll simply paste part of my main.xml code here:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/root_layout" android:layout_width="fill_parent"
	android:layout_height="fill_parent" android:background="#FFFFFFFF"
	android:layout_weight="1" android:orientation="vertical">
	<Button android:id="@+id/btnProfile" android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:text="Profile"
		android:textColor="#FFFFFFFF" />
	<LinearLayout android:id="@+id/panelProfile"
		android:orientation="vertical" android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:layout_weight="1"
		android:background="#FFFFFFFF">
		<LinearLayout android:id="@+id/panelProfile1"
			android:orientation="horizontal" android:layout_width="fill_parent"
			android:layout_height="wrap_content" android:layout_weight="1"
			android:background="#FFFFFFFF">
			<TextView android:id="@+id/strName" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:text="Name" />
			<EditText android:id="@+id/txtName" android:layout_width="fill_parent"
				android:layout_height="wrap_content" />
		</LinearLayout>
		<LinearLayout android:id="@+id/panelProfile2"
			android:orientation="horizontal" android:layout_width="fill_parent"
			android:layout_height="wrap_content" android:layout_weight="1"
			android:background="#FFFFFFFF">
			<TextView android:id="@+id/strSurname" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:text="Surname" />
			<EditText android:id="@+id/txtSurname" android:layout_width="fill_parent"
				android:layout_height="wrap_content" />
		</LinearLayout>
	</LinearLayout>
	<Button android:id="@+id/btnSettings" android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:text="Settings"
		android:textColor="#FFFFFFFF" />
	<LinearLayout android:id="@+id/panelSettings"
		android:orientation="vertical" android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:layout_weight="1"
		android:background="#FFFFFFFF">
		<LinearLayout android:id="@+id/panelSettings1"
			android:orientation="horizontal" android:layout_width="fill_parent"
			android:layout_height="wrap_content" android:layout_weight="1"
			android:background="#FFFFFFFF">
			<TextView android:id="@+id/strMail" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:text="e-mail" />
			<EditText android:id="@+id/txtMail" android:layout_width="fill_parent"
				android:layout_height="wrap_content" />
		</LinearLayout>
		<LinearLayout android:id="@+id/panelSettings2"
			android:orientation="horizontal" android:layout_width="fill_parent"
			android:layout_height="wrap_content" android:layout_weight="1"
			android:background="#FFFFFFFF">
			<TextView android:id="@+id/strPhone" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:text="Phone" />
			<EditText android:id="@+id/txtPhone" android:layout_width="fill_parent"
				android:layout_height="wrap_content" />
		</LinearLayout>
	</LinearLayout>
	<Button android:id="@+id/btnPrivacy" android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:text="Privacy"
		android:textColor="#FFFFFFFF" />
	<LinearLayout android:id="@+id/panelPrivacy"
		android:orientation="vertical" android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:layout_weight="1"
		android:background="#FFFFFFFF">
		<CheckBox android:id="@+id/checkFacebook"
			android:layout_width="fill_parent" android:layout_height="wrap_content"
			android:layout_weight="1" android:text="Facebook" android:textColor="#ff355689">
		</CheckBox>
		<CheckBox android:id="@+id/checkLinkedIn"
			android:layout_width="fill_parent" android:layout_height="wrap_content"
			android:layout_weight="1" android:text="LinkedIn" android:textColor="#ff355689">
		</CheckBox>
		<CheckBox android:id="@+id/checkTwitter"
			android:layout_width="fill_parent" android:layout_height="wrap_content"
			android:layout_weight="1" android:text="Twitter" android:textColor="#ff355689">
		</CheckBox>
	</LinearLayout>
</LinearLayout>

Then it is very important to use the parameter

android:visibility="gone"

for all the clicks performed on different buttons.

Here is the code for the activity.

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class AccordionActivity extends Activity {
	/** Called when the activity is first created. */

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		Button btnProfile = (Button) findViewById(R.id.btnProfile);
		Button btnSettings = (Button) findViewById(R.id.btnSettings);
		Button btnPrivacy = (Button) findViewById(R.id.btnPrivacy);

		View panelProfile = findViewById(R.id.panelProfile);
		panelProfile.setVisibility(View.GONE);

		View panelSettings = findViewById(R.id.panelSettings);
		panelSettings.setVisibility(View.GONE);

		View panelPrivacy = findViewById(R.id.panelPrivacy);
		panelPrivacy.setVisibility(View.GONE);

		btnProfile.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// DO STUFF
				View panelProfile = findViewById(R.id.panelProfile);
				panelProfile.setVisibility(View.VISIBLE);

				View panelSettings = findViewById(R.id.panelSettings);
				panelSettings.setVisibility(View.GONE);

				View panelPrivacy = findViewById(R.id.panelPrivacy);
				panelPrivacy.setVisibility(View.GONE);

			}
		});

		btnSettings.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// DO STUFF
				View panelProfile = findViewById(R.id.panelProfile);
				panelProfile.setVisibility(View.GONE);

				View panelSettings = findViewById(R.id.panelSettings);
				panelSettings.setVisibility(View.VISIBLE);

				View panelPrivacy = findViewById(R.id.panelPrivacy);
				panelPrivacy.setVisibility(View.GONE);

			}
		});

		btnPrivacy.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// DO STUFF
				View panelProfile = findViewById(R.id.panelProfile);
				panelProfile.setVisibility(View.GONE);

				View panelSettings = findViewById(R.id.panelSettings);
				panelSettings.setVisibility(View.GONE);

				View panelPrivacy = findViewById(R.id.panelPrivacy);
				panelPrivacy.setVisibility(View.VISIBLE);

			}
		});

	}

}

I noticed that I can not upload archives here on WordPress so I promise that I’ll soon upload the full project somewhere and add a link here. But these pieces of code that I have put here are enough for anyone who wants to have it done fast and simple.

I dare others to make a horizontal accordion. It is kinda cute and stylish 😉

Advertisements

13 Responses to Accordion-like widget for Android

  1. Nice work!

    By the way, have you seen the dynamic nested list component on http://www.iphoneaccordionmenu.com?

    The example AJAX version is impressive.

    Haven’t quite had time to play around with it.

  2. nicolas says:

    for which api level is the code????

    • karevask says:

      Hi,
      I think the first time I wrote it it was for api level 7 then I upgraded the phone and made it for 8.
      But it is also tested on level 10 and it is working as it is on the video.
      Are you having some problems with it?

      Regards

      • Nicolás says:

        I’m running some tests and it’s only working for API level 15. If I run it in a smaller level API the emulator crash. ¿Can you upload the original source code, please?

        Thanks!

  3. karevask says:

    Hi,
    I had problems uploading archives on WordPress so I sent the project on your mail and you can test it.

    Regards,

  4. Michael says:

    I know this is a somewhat older blog post but I thought I would share the fact that I have successfully created a horizontal accordion style interface using similar coding to your’s.

    I’ll post the what I used in my layout xml (this is just a sample):

    For the Java code I just changed some things to match the labels in the XML.

    Finally to get the button labels for btn_people, btn_foods and btn_places I simply added \n (newline characters) between each letter. Admittedly it was a quick fix attempt for a horizontal accordion view, but it does work.
    Note: The xml code posted here was tested on the Motorola Droid 2 running 2.3.3 and Motorola Photon running 2.3.5, so I am unsure how it will behave on older versions. (Finally, sorry about the long-winded comment)

    • Michael says:

      Apparently I cant post the code from my xml into a comment… sorry about that… I will try to get it to karevask so it can be posted here, or reply later with a link leading to it so that it can be shared.

  5. Anoop Paul says:

    Itz running fine… thnx…

  6. Pierre says:

    Is it possible for you to add animation on the line:
    panelProfile.setVisibility(View.GONE);

    so that it slides up and down (exactly the same as JQUERY accordion)?

  7. Aniket says:

    Heyy Buddy Thanxxxxxx

  8. Riska says:

    Thanks buddy, it’s running well/

  9. Hassan Ahmed says:

    FANTAAASTIC!

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: