Thursday, 25 January 2018

Expandable Layout in Android


Expandable list view is used to group list data by categories. It has the capability of expanding and collapsing the groups when user touches header. Android ExpandableListView is a view that shows items in a vertically scrolling two-level list. It differs from a ListView by allowing two levels which are groups that can be easily expanded and collapsed by touching to view and their respective children items.

First Add Dependency: -

compile 'net.cachapa.expandablelayout:expandablelayout:2.3'

JavaFile MainActivity.java

package safal.bhatia.expandablelistview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import net.cachapa.expandablelayout.ExpandableLayout;
public class MainActivity extends AppCompatActivity {
    ExpandableLayout expandableLayout1;
    TextView text1,text2,text3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        text1 = (TextView)findViewById(R.id.text1);
        text1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Hello Friends", Toast.LENGTH_SHORT).show();
            }
        });
    }
    public void expandableButton1(View view) {
        expandableLayout1 = (ExpandableLayout) findViewById(R.id.expandableLayout1);
        expandableLayout1.toggle(); // toggle expand and collapse
   
}
}

XML File activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_expand_able"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/al"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:drawablePadding="16dp"
            android:onClick="expandableButton1"
            android:padding="10dp"
            android:text="Album"
            android:textSize="16dp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:background="#635f5f"></View>

        <net.cachapa.expandablelayout.ExpandableLayout
            android:id="@+id/expandableLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/expandableButton1"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            app:el_duration="200"
            app:el_expanded="true"
            app:el_translate_children="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/text1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/expandableLayout1"
                    android:layout_marginLeft="20dp"
                    android:paddingBottom="8dp"
                    android:paddingTop="8dp"
                    android:text="Join Existing"
                    android:textColor="#10f4d9" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginLeft="20dp"
                    android:background="#635f5f"></View>

                <TextView
                    android:id="@+id/text2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/aa"
                    android:layout_marginLeft="20dp"
                    android:paddingBottom="8dp"
                    android:paddingTop="8dp"
                    android:text="Build/Create New Album"
                    android:textColor="#10f4d9" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginLeft="20dp"
                    android:background="#635f5f"></View>

                <TextView
                    android:id="@+id/text3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:paddingBottom="8dp"
                    android:paddingTop="8dp"
                    android:text="MyExisting"
                    android:textColor="#10f4d9" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginLeft="20dp"
                    android:background="#635f5f"></View>
            </LinearLayout>
        </net.cachapa.expandablelayout.ExpandableLayout>
    </LinearLayout>
</RelativeLayout>

 

No comments:

Post a Comment