Expand and Collapase in Android

Question

I want to create a Layout that have the feature of expand and collapse .Expand should be like that at a time only one row can be expanded ,if user clicks on other first should be closed by itself.In each row i have to show different layout design .

Please help me in this ,i have searched but i am not getting i how could i create this functionality .Please take this as a reference how it will be like .Please suggest me the best approach to get this

Answer 1

You can use a lib Accordion-View screenshot is :

Answer 2

I have implemented some code as the answer suggested by @Super User. So from that i think you will sure get your solution.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:accordion="http://schemas.android.com/apk/res-auto/com.sentaca.android.accordion"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/main_header"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:background="#ff0000"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Offline Booking Request"
        android:textColor="#fff"
        android:textStyle="bold" />
</LinearLayout>

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >

    <com.sentaca.android.accordion.widget.AccordionView
        android:id="@+id/accordion_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        accordion:header_layout_fold_button_id="@id/foldButton"
        accordion:header_layout_id="@layout/accordion_header"
        accordion:header_layout_label_id="@id/foldText"
        accordion:section_bottom="@layout/accordion_footer"
        accordion:section_container="@layout/accordion_section"
        accordion:section_container_parent="@id/section_content"
        accordion:section_headers="@array/accordion_sections"
        accordion:section_visibility="@array/accordion_visibility"
        android:background="#fff5f5f5"
        android:orientation="vertical" >

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Please specify offline car details if you need any cars of travels"
                android:textSize="14sp" />

            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="45dp"
                android:text="Plase click the checkbox to send the details"
                android:textColor="#ff0000" />

            <include layout="@layout/radio" >
            </include>
        </LinearLayout>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Item 2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Item 3" />
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Item 4" />

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

            <RatingBar
                android:id="@+id/ratingBar1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <EditText
                android:id="@+id/editText1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <SeekBar
                android:id="@+id/seekBar1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Item 4" />
    </com.sentaca.android.accordion.widget.AccordionView>
</ScrollView>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Review" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Confirm" />
</LinearLayout>

</LinearLayout>

Now just remember one thing whenever you want to add layout items then add item in Linear Layout and make different layout for different sections and after that include that layout in your Linear layout. I have tried for one section named radio.xml file which is included in Linear Layout above.

radio.xml

<?xml version="1.0" encoding="utf-8"?>

<RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/radio0"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:checked="true"
        android:text="Domestic"
        android:textColor="#ff0000" />

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:text="InterNational"
        android:textColor="#ff0000" />
</RadioGroup>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Pick Up Location"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:ems="10" >

            <requestFocus />
        </EditText>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="DropLocation"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:ems="10" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:text="Car Type"
            android:textColor="#000" />

        <Spinner
            android:id="@+id/spinner1"
            android:layout_width="0dp"
            android:layout_height="35dp"
            android:layout_gravity="center"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:text="Remarks"
            android:textColor="#000" />

        <EditText
            android:id="@+id/editText3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:inputType="textMultiLine" />
    </LinearLayout>
</LinearLayout>

</LinearLayout>