Convert Figma logo to code with AI

Ramotion logofolding-cell-android

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

4,898
840
4,898
8

Top Related Projects

:octocat: ExpandingCollection is a material design card peek/pop controller. Android UI Library made by @Ramotion

Neat library, that provides a simple way to implement guillotine-styled animation

Render After Effects animations natively on Android and iOS, Web, and React Native

A Material Design ViewPager easy to use library

An Android Animation library which easily add itemanimator to RecyclerView items.

Using Fan Layout Manager you can implement the horizontal list, the items of which move like fan blades

Quick Overview

Folding Cell for Android is an expanding content cell library created by Ramotion. It provides a unique and visually appealing way to display additional information by unfolding a cell, similar to opening a paper card. This library is designed to enhance the user interface of Android applications with smooth animations and customizable layouts.

Pros

  • Visually appealing and unique UI component
  • Smooth and customizable animations
  • Easy integration into existing Android projects
  • Supports both Java and Kotlin

Cons

  • May not fit all design aesthetics or app styles
  • Limited to specific use cases where expandable content is needed
  • Potential performance impact on devices with lower specifications
  • Learning curve for customizing complex layouts

Code Examples

  1. Basic implementation of a FoldingCell:
val foldingCell = findViewById<FoldingCell>(R.id.folding_cell)
foldingCell.setOnClickListener {
    foldingCell.toggle(false)
}
  1. Customizing folding animation duration:
foldingCell.initialize(1000, Color.DKGRAY, 2)
  1. Using FoldingCell with RecyclerView:
class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val foldingCell: FoldingCell = itemView.findViewById(R.id.folding_cell)
    
    fun bind(item: MyItem) {
        foldingCell.setOnClickListener {
            foldingCell.toggle(false)
        }
        // Bind other data to views
    }
}

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.Ramotion:folding-cell-android:1.2.3'
}
  1. Add FoldingCell to your layout XML:
<com.ramotion.foldingcell.FoldingCell
    android:id="@+id/folding_cell"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <!-- Add your content and title layouts here -->
    
</com.ramotion.foldingcell.FoldingCell>
  1. Initialize and use the FoldingCell in your Activity or Fragment:
val foldingCell = findViewById<FoldingCell>(R.id.folding_cell)
foldingCell.setOnClickListener {
    foldingCell.toggle(false)
}

Competitor Comparisons

:octocat: ExpandingCollection is a material design card peek/pop controller. Android UI Library made by @Ramotion

Pros of expanding-collection-android

  • More visually appealing and interactive UI with card expansion animation
  • Supports multiple cards in a collection view
  • Easier to implement for list-based content

Cons of expanding-collection-android

  • Limited to specific card-based layouts
  • May require more complex data management for multiple cards
  • Potentially higher performance overhead due to animations

Code Comparison

expanding-collection-android:

val expandingCollection = findViewById<ExpandingCollection>(R.id.expanding_collection_main)
expandingCollection.setAdapter(ECPagerViewAdapter(this, cards))
expandingCollection.setOnCardSelectedListener { /* Handle card selection */ }

folding-cell-android:

val foldingCell = findViewById<FoldingCell>(R.id.folding_cell)
foldingCell.setOnClickListener {
    foldingCell.toggle(false)
}

The expanding-collection-android library offers a more complex setup with adapter and listener implementations, while folding-cell-android provides a simpler toggle mechanism for individual cells. expanding-collection-android is better suited for showcasing multiple items in a scrollable list, whereas folding-cell-android is ideal for single-item expandable views with detailed content.

Neat library, that provides a simple way to implement guillotine-styled animation

Pros of GuillotineMenu-Android

  • Offers a unique and visually appealing animation for menu transitions
  • Provides a more immersive and interactive user experience
  • Easier to implement for full-screen menu overlays

Cons of GuillotineMenu-Android

  • Less versatile compared to FoldingCell-Android, as it's specifically designed for menu animations
  • May not be suitable for displaying detailed content within cells

Code Comparison

GuillotineMenu-Android:

val guillotineMenu = GuillotineAnimation.GuillotineBuilder(
    guillotineMenu,
    guillotineMenu.findViewById(R.id.guillotine_hamburger),
    contentView
).build()

FoldingCell-Android:

val foldingCell = findViewById<FoldingCell>(R.id.folding_cell)
foldingCell.setOnClickListener {
    foldingCell.toggle(false)
}

GuillotineMenu-Android focuses on creating a specific menu animation, while FoldingCell-Android provides a more general-purpose folding cell animation that can be used for various UI elements. GuillotineMenu-Android is easier to implement for full-screen menu overlays, but FoldingCell-Android offers more flexibility for displaying content within expandable cells.

Both libraries provide smooth animations and enhance the user interface, but they serve different purposes. GuillotineMenu-Android is ideal for creating visually striking menu transitions, while FoldingCell-Android is better suited for displaying expandable content in a compact format.

Render After Effects animations natively on Android and iOS, Web, and React Native

Pros of lottie-android

  • Supports complex animations with vector graphics
  • Extensive documentation and community support
  • Seamless integration with Adobe After Effects

Cons of lottie-android

  • Larger file size due to animation complexity
  • Steeper learning curve for designers and developers
  • May impact performance on older devices

Code Comparison

folding-cell-android:

val foldingCell = findViewById<FoldingCell>(R.id.folding_cell)
foldingCell.setOnClickListener {
    foldingCell.toggle(false)
}

lottie-android:

val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
animationView.setAnimation(R.raw.animation)
animationView.playAnimation()

Summary

folding-cell-android is a lightweight library focused on creating folding cell animations for list items. It's simple to implement but limited in animation complexity. lottie-android, on the other hand, offers a wide range of animation possibilities, integrating seamlessly with design tools. However, it comes with a steeper learning curve and potentially larger file sizes. The choice between the two depends on the specific animation requirements and project constraints.

A Material Design ViewPager easy to use library

Pros of MaterialViewPager

  • Implements Material Design ViewPager with header
  • Supports multiple view types (RecyclerView, ScrollView, WebView)
  • Easy integration with existing Android projects

Cons of MaterialViewPager

  • Less customizable UI compared to FoldingCell
  • May not be suitable for non-Material Design apps
  • Limited to ViewPager functionality

Code Comparison

MaterialViewPager:

<com.github.florent37.materialviewpager.MaterialViewPager
    android:id="@+id/materialViewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:viewpager_logo="@layout/header_logo"
    app:viewpager_logoMarginTop="100dp"
    app:viewpager_color="@color/colorPrimary"
    app:viewpager_headerHeight="200dp"
    app:viewpager_headerAlpha="1.0"
    app:viewpager_hideLogoWithFade="false"
    app:viewpager_hideToolbarAndTitle="true"
    app:viewpager_enableToolbarElevation="true"
    app:viewpager_parallaxHeaderFactor="1.5"
    app:viewpager_headerAdditionalHeight="20dp"
    app:viewpager_displayToolbarWhenSwipe="true"
    app:viewpager_transparentToolbar="true"
    app:viewpager_animatedHeaderImage="true"
    app:viewpager_disableToolbar="false"/>

FoldingCell:

val cell = findViewById<FoldingCell>(R.id.folding_cell)
cell.setOnClickListener {
    cell.toggle(false)
}

MaterialViewPager focuses on creating a Material Design-compliant ViewPager with a header, while FoldingCell provides a unique folding animation for expandable content. MaterialViewPager is more suitable for apps following Material Design guidelines, whereas FoldingCell offers a distinctive UI element for various app styles.

An Android Animation library which easily add itemanimator to RecyclerView items.

Pros of recyclerview-animators

  • Offers a wide variety of pre-built animations for RecyclerView items
  • Easy to implement and customize animations with minimal code
  • Supports both item animations and add/remove animations

Cons of recyclerview-animators

  • Limited to RecyclerView animations, while folding-cell-android provides a specific UI component
  • May require additional customization for complex UI designs
  • Doesn't offer the unique folding cell effect provided by folding-cell-android

Code Comparison

recyclerview-animators:

val animator = SlideInLeftAnimator()
recyclerView.itemAnimator = animator

folding-cell-android:

val foldingCell = findViewById<FoldingCell>(R.id.folding_cell)
foldingCell.setOnClickListener {
    foldingCell.toggle(false)
}

recyclerview-animators focuses on animating RecyclerView items, while folding-cell-android provides a specific UI component with a folding animation. The code examples show the simplicity of implementing animations with recyclerview-animators compared to the more specialized folding cell implementation.

Using Fan Layout Manager you can implement the horizontal list, the items of which move like fan blades

Pros of FanLayoutManager

  • Offers a unique fan-like layout for RecyclerView, providing an eye-catching visual effect
  • Supports both vertical and horizontal orientations
  • Includes built-in animations for smooth transitions between states

Cons of FanLayoutManager

  • Limited to RecyclerView implementation, while folding-cell-android can be used with various view types
  • May require more complex setup and customization compared to the simpler folding cell concept
  • Potentially higher performance overhead due to complex layout calculations

Code Comparison

FanLayoutManager:

val fanLayoutManager = FanLayoutManager(context, OrientationHelper.VERTICAL)
recyclerView.layoutManager = fanLayoutManager

folding-cell-android:

val foldingCell = findViewById<FoldingCell>(R.id.folding_cell)
foldingCell.setOnClickListener {
    foldingCell.toggle(false)
}

Both libraries offer unique UI components for Android applications. FanLayoutManager provides a specialized RecyclerView layout manager for creating fan-like arrangements, while folding-cell-android focuses on individual expandable cell views. The choice between them depends on the specific UI requirements and the desired visual effect for your application.

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

FOLDING CELL [JAVA]

Expanding content cell with animation inspired by folding paper card material design.


We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:


Circle CI Codacy Badge Twitter Analytics Donate

Requirements

​

  • Android 4.0 IceCreamSandwich (API lvl 14) or greater
  • Your favorite IDE

Installation

​ Just download the package from here and add it to your project classpath, or just use the maven repo:

Gradle:

'com.ramotion.foldingcell:folding-cell:1.2.3'

SBT:

libraryDependencies += "com.ramotion.foldingcell" % "folding-cell" % "1.2.3"

Maven:

<dependency>
	<groupId>com.ramotion.foldingcell</groupId>
	<artifactId>folding-cell</artifactId>
	<version>1.2.3</version>
</dependency>

​

Basic usage

​

  1. Add com.ramotion.foldingcell.FoldingCell to your layout ​
<com.ramotion.foldingcell.FoldingCell
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/folding_cell"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
​
</com.ramotion.foldingcell.FoldingCell>

​ 2. Add exactly two child elements to your cell. The first child (content view) always represents the unfolded state layout and the second child (title view) represents folded state layout. Of course, those layouts can contain any number of child elements and they can be any complexity, but to work correctly, there are some limitations: content view height must be at least 2x times greater than title view height, and the height of each of those layouts must be set to android:layout_height="wrap_content". If you want to set exact height in dp , you can set height for child elements in your own layout inside content view or title view. Also, you need to hide your content view layout using android:visibility="gone". ​

<com.ramotion.foldingcell.FoldingCell
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/folding_cell"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
​
        <FrameLayout
            android:id="@+id/cell_content_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:visibility="gone">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="250dp" />
        </FrameLayout>
​
        <FrameLayout
            android:id="@+id/cell_title_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="@android:color/holo_blue_dark" />
        </FrameLayout>
​
</com.ramotion.foldingcell.FoldingCell>

​ 3. Almost done! Two steps remain! For correct animation, you need to set up two properties on the root element(s) of your Folding Cell: ​

android:clipChildren="false"
android:clipToPadding="false"

​ 4. Final step! Add onClickListener to your Folding Cell in MainActivity.java to toggle animation: ​

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
​
    // get our folding cell
    final FoldingCell fc = (FoldingCell) findViewById(R.id.folding_cell);
​
    // attach click listener to folding cell
    fc.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            fc.toggle(false);
        }
    });
}

​ 5. Extra step - customizing cell settings. For now, there are three main parameters - animation time, back side color and additional flips count. If first two do not cause questions, the third requires an some explanation. It is count of flips to be executed after first(main) flip. Default value is 0(auto choose). Also there is a fourth, additional parameter - camera height, it controls level(depth) of 3d effect. There are two ways to change cell settings: From xml layout file with res-auto namespace xmlns:folding-cell="http://schemas.android.com/apk/res-auto":

folding-cell:animationDuration="1000"
folding-cell:backSideColor="@color/bgBackSideColor"
folding-cell:additionalFlipsCount="2"
folding-cell:cameraHeight="30"

Or from code:

// get our folding cell
final FoldingCell fc = (FoldingCell) findViewById(R.id.folding_cell);
// set custom parameters
fc.initialize(1000, Color.DKGRAY, 2);
// or with camera height parameter
fc.initialize(30, 1000, Color.DKGRAY, 2);

​ You can find this and other, more complex, examples in this repository ​


🗂 Check this library on other language:

📄 License

Folding Cell is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

📱 Get the Showroom App for Android to give it a try

Try this UI component and more like this in our Android app. Contact us if interested.