Not happy with the Android ExpandableListView android offers? Want something like the Spotify app. This library allows you to have custom listview in wich each list item has an area that will slide-out once the users clicks on a certain button.
- Provides a better ExpandableListView usable for normal ListView's
- Animates by default
- Easy to use
Repository at https://github.com/tjerkw/Android-SlideExpandableListView/.
Use a normal list view in your layout. You may also use a ListActivity or ListFragment
<ListView
android:id="@+id/list"
android:layout_height="fill_parent"
android:layout_width="fill_parent" />The list item view should have a toggle button (Button view), and a target view that will be expanded. By default the expandable view will be hidden. An when a user clicks the toggle button the expandalbe view will slide out and be visible.
For example here below we have R.id.expandable_toggle_button Button view. And a R.id.expandable LinearLayout which will be expanded. Note that the expandable view does not have to be a LinearLayout, it can be any subclass of View.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/text"
android:text="Hello World"/>
<!-- this is the button that will trigger sliding of the expandable view -->
<Button
android:id="@+id/expandable_toggle_button"
android:text="More"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/text"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/text"/>
</RelativeLayout>
<!-- this is the expandable view that is initially hidden and will slide out when the more button is pressed -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:id="@+id/expandable"
android:background="#000000">
<!-- put whatever you want in the expandable view -->
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:text="Action A" />
<Button
android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:text="Action B"/>
</LinearLayout>
</LinearLayout>In order to provide the functionality you simply wrap your list adapter in a SlideExpandableListAdapter. The adapter gets the ids to the more button, and the expandable view as parameters. This allows the adapter to find those views.
ListView list = ... your list view
ListAdapter adapter = ... your list adapter
// now simply wrap the adapter
// and indicate the ids of your toggle button
// and expandable view
list.setAdapter(
new SlideExpandableListAdapter(
adapter,
R.id.expandable_toggle_button,
R.id.expandable
)
);In order to simplify the usage of this library, you can also use the mentioned ListViews directly in your layout xml file. The view itself will make sure the ListAdapter is wrapped in a SlideExpandableListAdapter.
See the sample app for usage information.
Add the library as a gradle dependency to your project.
If you have any contributions I am gladly to review them and use them if they make sense.
- Added ActionSlideExpandableListView for easier event listening, see the sample app
- Updated the sample app to also contain event handling logic (Solved issue #3)
- Solved the issue with random views being expanded, due to recycling of views was not properly handled
- Solved more issues #1 #2
- First release!
- [TjerkWolterink] (http://about.me/tjerkw), about me (https://github.com/tjerkw), my linked in (http://www.linkedin.com/in/tjerkwolterink)
- [Udinic] (https://github.com/Udinic/SmallExamples/tree/master/ExpandAnimationExample), his blog (http://udinic.wordpress.com/2011/09/03/expanding-listview-items/) contains the initial idea
Licensed under the Apache License, Version 2.0
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent