Convert Figma logo to code with AI

traex logoExpandableLayout

Implementation of ExpandableListview with custom header and custom content.

1,636
361
1,636
64

Top Related Projects

Android - Expansion panels contain creation flows and allow lightweight editing of an element.

:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion

😍 A beautiful, fluid, and extensible dialogs API for Kotlin & Android.

Quick Overview

ExpandableLayout is an Android library that provides a custom view for creating expandable and collapsible layouts. It allows developers to easily implement accordion-like functionality in their Android applications, with smooth animations and customizable options.

Pros

  • Easy to implement and integrate into existing Android projects
  • Smooth animations for expanding and collapsing content
  • Customizable appearance and behavior
  • Lightweight and efficient

Cons

  • Limited documentation and examples
  • Not actively maintained (last update was in 2015)
  • May require additional work to adapt to modern Android development practices
  • Lacks advanced features like nested expandable layouts

Code Examples

  1. Basic implementation of ExpandableLayout:
<com.andexert.expandablelayout.library.ExpandableLayout
    android:id="@+id/expandable_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    expandable:el_headerLayout="@layout/view_header"
    expandable:el_contentLayout="@layout/view_content"
    expandable:el_duration="500" />
  1. Programmatically expanding and collapsing the layout:
ExpandableLayout expandableLayout = findViewById(R.id.expandable_layout);
expandableLayout.expand();
// or
expandableLayout.collapse();
  1. Setting a listener for expand/collapse events:
expandableLayout.setListener(new ExpandableLayoutListenerAdapter() {
    @Override
    public void onExpandComplete() {
        // Do something when expansion is complete
    }

    @Override
    public void onCollapseComplete() {
        // Do something when collapse is complete
    }
});

Getting Started

  1. Add the JitPack repository to your project's build.gradle file:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.traex:ExpandableLayout:1.3'
}
  1. Use the ExpandableLayout in your XML layout:
<com.andexert.expandablelayout.library.ExpandableLayout
    android:id="@+id/expandable_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    expandable:el_headerLayout="@layout/view_header"
    expandable:el_contentLayout="@layout/view_content" />
  1. Customize and control the ExpandableLayout in your Java code as needed.

Competitor Comparisons

Android - Expansion panels contain creation flows and allow lightweight editing of an element.

Pros of ExpansionPanel

  • More modern and actively maintained (last update in 2023 vs 2016 for ExpandableLayout)
  • Offers a wider range of customization options and styles
  • Includes built-in animations and transitions for smoother user experience

Cons of ExpansionPanel

  • Slightly more complex implementation due to additional features
  • May require more setup time for basic use cases
  • Larger library size, which could impact app performance

Code Comparison

ExpandableLayout:

ExpandableLayout expandableLayout = (ExpandableLayout) findViewById(R.id.expandable_layout);
expandableLayout.setExpandedHeight(200);
expandableLayout.setDuration(300);
expandableLayout.toggle();

ExpansionPanel:

ExpansionLayout expansionLayout = findViewById(R.id.expansionLayout);
expansionLayout.addListener(new ExpansionLayout.Listener() {
    @Override
    public void onExpansionChanged(ExpansionLayout expansionLayout, boolean expanded) {
        // Handle expansion state change
    }
});
expansionLayout.toggle(true);

Both libraries provide expandable layout functionality for Android applications. ExpandableLayout offers a simpler, more straightforward approach, while ExpansionPanel provides more advanced features and customization options. The choice between the two depends on the specific requirements of your project and the level of complexity you're willing to work with.

:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion

Pros of folding-cell-android

  • More visually appealing with a folding animation effect
  • Supports custom content for both folded and unfolded states
  • Actively maintained with recent updates

Cons of folding-cell-android

  • More complex implementation compared to ExpandableLayout
  • Limited to a specific folding cell design, less flexible for other expand/collapse scenarios

Code Comparison

ExpandableLayout:

ExpandableLayout expandableLayout = findViewById(R.id.expandable_layout);
expandableLayout.setExpandable(true);
expandableLayout.toggle();

folding-cell-android:

FoldingCell foldingCell = findViewById(R.id.folding_cell);
foldingCell.initialize(30, 1000, Color.DKGRAY, 2);
foldingCell.toggle(false);

Key Differences

  • ExpandableLayout focuses on simple expand/collapse functionality, while folding-cell-android provides a more elaborate folding animation.
  • ExpandableLayout is more lightweight and easier to implement for basic expand/collapse needs.
  • folding-cell-android offers a unique visual effect but may be overkill for simpler use cases.

Use Cases

ExpandableLayout is better suited for:

  • Simple expand/collapse functionality
  • Lightweight implementations
  • Flexible layouts

folding-cell-android is ideal for:

  • Eye-catching UI elements
  • Detailed content reveal animations
  • Apps prioritizing visual appeal

Both libraries serve their purposes well, with ExpandableLayout offering simplicity and folding-cell-android providing a more visually striking experience.

😍 A beautiful, fluid, and extensible dialogs API for Kotlin & Android.

Pros of material-dialogs

  • More comprehensive and feature-rich library for creating dialogs
  • Actively maintained with frequent updates and bug fixes
  • Extensive documentation and examples available

Cons of material-dialogs

  • Larger library size, potentially increasing app size
  • Steeper learning curve due to more complex API

Code Comparison

ExpandableLayout:

ExpandableLayout expandableLayout = (ExpandableLayout) findViewById(R.id.expandable_layout);
expandableLayout.setExpandListener(new ExpandableLayout.ExpandListener() {
    @Override
    public void onExpandComplete() {
        // Handle expand complete
    }
});

material-dialogs:

MaterialDialog(this).show {
    title(R.string.dialog_title)
    message(R.string.dialog_message)
    positiveButton(R.string.agree)
    negativeButton(R.string.disagree)
}

Summary

ExpandableLayout is a simpler library focused on creating expandable layouts, while material-dialogs is a more comprehensive solution for creating various types of dialogs in Android applications. ExpandableLayout may be easier to implement for specific expandable layout needs, but material-dialogs offers more flexibility and features for dialog creation. The choice between the two depends on the specific requirements of your project and the level of customization needed for dialogs or expandable layouts.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ExpandableLayout

ExpandableLayout

ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a maximum of customization. You can find a sample that how to use an ExpandableLayout to your layout.

ExpandableLayout GIF

Integration

The lib is available on Maven Central, you can find it with Gradle, please


dependencies {
    compile 'com.github.traex.expandablelayout:library:1.2.2'
}

Usage

ExpandableLayout

Declare an ExpandableLayout inside your XML layout file. You also need to other layouts for header and content:


  <com.andexert.expandablelayout.library.ExpandableLayout
         android:id="@+id/expandableLayout"
         xmlns:expandable="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         expandable:headerLayout="@layout/view_header"
         expandable:contentLayout="@layout/view_content"/>
         

ExpandableLayoutItem && ExpandableLayoutItem

You can use ExapandableLayout in an ExpandableLayoutListView with ExpandableLayoutItem as row :

ExpandableLayoutItem


  <com.andexert.expandablelayout.library.ExpandableLayoutItem
         android:id="@+id/expandableLayout"
         xmlns:expandable="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         expandable:headerLayout="@layout/view_header"
         expandable:contentLayout="@layout/view_content"/>
         

ExpandableLayoutListView


  <com.andexert.expandablelayout.library.ExpandableLayoutListView
         android:id="@+id/expandableLayout"
         xmlns:expandable="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent"/>
         

If you want to manage the OnScroll, you have to use OnExpandableLayoutScrollListener and don't forget to call super in each method.

You can call dynamically open, close and isOpened from an ExpandableLayout object.

Customization

You can change duration of the animation:

  • app:duration [integer def:200] --> Duration of the animation

Troubleshooting

If you want to use the ExpandableLayoutListView with EditText, you have to set android:windowSoftInputMode="adjustPan" to prevent the ListView to redraw itself and close the ExpandableLayoutItem.

Acknowledgements

Thanks to Google for its ExpandableListview :)

MIT License

    The MIT License (MIT)
    
    Copyright (c) 2014 Robin Chutaux
    
    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:
    
    The above copyright notice and this permission notice shall be included in
    all copies or substantial portions of the Software.
    
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.