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