How to implement Accordion In Android Or you can say changing VIsibility of the Layout

This is a simple tutorial in which you can find the use of setvisibility property of the layout. In this example i m showing you how to implement a accordion in android.

In this example you will notice that we you are clicking the heading of a subject the layout hidden in the XML will get appear this is done by setting the visibility of the layout GONE and VISIBLE. So lets Begin


XML FIle:-

In this XML you will notice that for the heading we have taken a TextView and for the description the TextView taken in inside the LinearLayout. And each of the layout is assigned a id. so we will initialize the layout in our source code and change the visibility according to our requirement.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical"
     >

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFFFF"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/layouttext1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="IT DevelopersDelhi"
                android:textColor="#000000"
                android:textSize="20sp" />

            <LinearLayout
                android:id="@+id/layout1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     android:textColor="#000000"
                    android:text="IT Developers Delhi is new and fast growing organization.We are commented towards our work and customer’s.Our main goal is to complete the project on time and on reasonable cost. Give it us a try and Leave your all worries on us .We are capable of doing all kind of technical work in the field of SEO, Web Designing and Android Apps Development. We use static and dynamic both kind of approaches in website development." />
            </LinearLayout>

            <TextView
                android:id="@+id/layouttext2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="20dp"
                 android:textColor="#000000"
                android:text="SEO"
               
                android:textSize="20sp" />

            <LinearLayout
                android:id="@+id/layout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     android:textColor="#000000"
                    android:text="Want to move your website on the front page on Goggle for that We have the best SEO team which can help you to achieve your desire. We give guaranteed improvement in your website ranking. So that you can reach to new customers" />

            </LinearLayout>

            <TextView
                android:id="@+id/layouttext3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Android"
                android:textSize="20sp"
                 android:textColor="#000000"
                android:paddingTop="20dp"
                />

            <LinearLayout
                android:id="@+id/layout3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     android:textColor="#000000"
                    android:text="Make presence on Google Play Store. Android apps is a new way to reach and promote your services to the world and we have a lot of experience in doing that.  We Develop and also publish the Android application on customer requirement.  " />

            </LinearLayout>

            <TextView
                android:id="@+id/layouttext4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Web Designing and Development"
                android:textSize="20sp"
                 android:textColor="#000000"
                android:paddingTop="20dp"
                />

            <LinearLayout
                android:id="@+id/layout4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     android:textColor="#000000"
                    android:text="We have designed high quality websites for small medium and global businesses. As we are know that every business in the world needs a website, We offer web services at a very reasonable price." />

            </LinearLayout>

            <TextView
                android:id="@+id/layouttext5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Achievements"
                android:textSize="20sp"
                 android:textColor="#000000"
                android:paddingTop="20dp"
                  />

            <LinearLayout
                android:id="@+id/layout5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     android:textColor="#000000"
                    android:text="We have done many projects in SEO Android and in Web Development. We have enabled all the links so that you can examine our work." />

            </LinearLayout>

            <TextView
                android:id="@+id/layouttext6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 android:textColor="#000000"
                android:text="History"
                 
                 android:paddingTop="20dp"
                 android:textSize="20sp"  />

            <LinearLayout
                android:id="@+id/layout6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView10"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     android:textColor="#000000"
                    android:text="IT Developers was started by couple of ambitious persons. They were very passionate about there work which keeps on increasing day by day and now IT developers Delhi is one of the leading company in IT field" />

            </LinearLayout>

            <TextView
                android:id="@+id/layouttext7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                  android:textSize="20sp"
                   android:textColor="#000000"
                android:paddingTop="20dp"
                 
                android:text="Email" />

            <LinearLayout
                android:id="@+id/layout7"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/test"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     android:textColor="#000000"
                    android:text="itdevelopersdelhi@gmail.com" />

            </LinearLayout>

            <TextView
                android:id="@+id/layouttext8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                  android:textSize="20sp"
                android:paddingTop="20dp"
                 android:textColor="#000000"                 
                android:text="Telephone" />

            <LinearLayout
                android:id="@+id/layout8"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     android:textColor="#000000"
                    android:text="M: +91 8802489781" />

            </LinearLayout>

       

        </LinearLayout>
    </ScrollView>

</LinearLayout>


Soucre code:-

First Step:- Initialize the layout and textview and set the visibility of the layout GONE

t1=(TextView)findViewById(R.id.layouttext1);
        t2=(TextView)findViewById(R.id.layouttext2);
        t3=(TextView)findViewById(R.id.layouttext3);
        t4=(TextView)findViewById(R.id.layouttext4);
        t5=(TextView)findViewById(R.id.layouttext5);
        t6=(TextView)findViewById(R.id.layouttext6);
        t7=(TextView)findViewById(R.id.layouttext7);
        t8=(TextView)findViewById(R.id.layouttext8);
      
      
      
        l1=(LinearLayout)findViewById(R.id.layout1);
        l2=(LinearLayout)findViewById(R.id.layout2);
        l3=(LinearLayout)findViewById(R.id.layout3);
        l4=(LinearLayout)findViewById(R.id.layout4);
        l5=(LinearLayout)findViewById(R.id.layout5);
        l6=(LinearLayout)findViewById(R.id.layout6);
        l7=(LinearLayout)findViewById(R.id.layout7);
        l8=(LinearLayout)findViewById(R.id.layout8);
      
      
      
        l1.setVisibility(View.GONE);
        l2.setVisibility(View.GONE);
        l3.setVisibility(View.GONE);
        l4.setVisibility(View.GONE);
        l5.setVisibility(View.GONE);
        l6.setVisibility(View.GONE);
        l7.setVisibility(View.GONE);
        l8.setVisibility(View.GONE);
          

Second Step:- set the onclick listener on each of the textview which contain heading
                     like this. and implement a small logic like i have done to make it a accordion.


        t1.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                if(z[0]==1){
                    l1.setVisibility(View.GONE);
                    z[0]=0;
                }
                else {
                    l1.setVisibility(View.VISIBLE);
                    l2.setVisibility(View.GONE);
                    l3.setVisibility(View.GONE);
                    l4.setVisibility(View.GONE);
                    l5.setVisibility(View.GONE);
                    l6.setVisibility(View.GONE);
                    l7.setVisibility(View.GONE);
                    l8.setVisibility(View.GONE);
                  
                  
                    z[0]=1;
                }
              
            }
        });

Snapshots:-

 Click Here To Download The Project:-