Android - Accordion Widget

Android - accordion widget

I have pushed android accordion view project at github. We use it for our customers, tested on 2.2, 2.3.x, 3.2 and 4.0.3. Works pretty good for us.

Going to add animation on fold/unfold in next step.

Here is small screenshot:

How to display data in android page using Accordion?

It is possible. There are a lot of ways to do it. For example visit Android - accordion widget or http://android-puremvc-ormlite.blogspot.com/2011/07/android-simple-accordion-panel.html

I need a reference for custom accordion view in android

Please try this link this may help
https://github.com/hamsterready/android-accordion-view

In android how to get transition on click like dropdown

This looks like what is known as an accordion.

See here for answers and links to github projects that would help you.

Android - accordion widget

Expand and Collapase in Android

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>

---

Related Topics