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

Overview

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.

Comments
  • Problem with toggle in RecyclerView.ViewHolder

    Problem with toggle in RecyclerView.ViewHolder

    I use FoldingCell with RecyclerView. When i onClick, fc is toggled. But every 9th element at the list toogled too. How fix this?

     View_Holder(View itemView) {
    
                super(itemView);
    
                final FoldingCell fc = (FoldingCell)itemView.findViewById(R.id.folding_celll);
                fc.initialize(1000, Color.DKGRAY, 2);
                fc.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        fc.toggle(false);
                    }
                });
    ........
    
    opened by willu2 11
  • java.lang.IllegalStateException: Content View height is too small

    java.lang.IllegalStateException: Content View height is too small

    at com.ramotion.foldingcell.FoldingCell.calculateHeightsForAnimationParts(FoldingCell.java:257) 04-22 13:21:00.109 6283-6283/com.broadamptechnologies.bricks W/System.err: at com.ramotion.foldingcell.FoldingCell.unfold(FoldingCell.java:118) 04-22 13:21:00.109 6283-6283/com.broadamptechnologies.bricks W/System.err: at com.ramotion.foldingcell.FoldingCell.toggle(FoldingCell.java:206) 04-22 13:21:00.109 6283-6283/com.broadamptechnologies.bricks W/System.err: at com.broadamptechnologies.bricks.NewsFragment$2.onClick(NewsFragment.java:97) 04-22 13:21:00.109 6283-6283/com.broadamptechnologies.bricks W/System.err: at android.view.View.performClick(View.java:5198) 04-22 13:21:00.109 6283-6283/com.broadamptechnologies.bricks W/System.err: at android.view.View$PerformClick.run(View.java:21147) 04-22 13:21:00.109 6283-6283/com.broadamptechnologies.bricks W/System.err: at android.os.Handler.handleCallback(Handler.java:739) 04-22 13:21:00.109 6283-6283/com.broadamptechnologies.bricks W/System.err: at android.os.Handler.dispatchMessage(Handler.java:95) 04-22 13:21:00.109 6283-6283/com.broadamptechnologies.bricks W/System.err: at android.os.Looper.loop(Looper.java:148) 04-22 13:21:00.109 6283-6283/com.broadamptechnologies.bricks W/System.err: at android.app.ActivityThread.main(ActivityThread.java:5417) 04-22 13:21:00.110 6283-6283/com.broadamptechnologies.bricks W/System.err: at java.lang.reflect.Method.invoke(Native Method) 04-22 13:21:00.110 6283-6283/com.broadamptechnologies.bricks W/System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) 04-22 13:21:00.110 6283-6283/com.broadamptechnologies.bricks W/System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

    opened by HarshSanghvi 9
  • java.lang.IllegalArgumentException: width and height must be > 0 in RecyclerView

    java.lang.IllegalArgumentException: width and height must be > 0 in RecyclerView

    I am using folding cell in RecyclerView.

    My FoldingCell click view setup in RecyclerAdapter like below:

    mViewHolder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { ((FoldingCell) v).toggle(false); // register in adapter that state for selected cell is toggled contentAdapter.registerToggle(mViewHolder.getAdapterPosition()); }

    I get following error whenever scroll up or scroll down & that Item is not visible in RecyclerView.

    Java.lang.IllegalArgumentException: width and height must be > 0 at android.graphics.Bitmap.createBitmap(Bitmap.java:1001) at android.graphics.Bitmap.createBitmap(Bitmap.java:968) at android.graphics.Bitmap.createBitmap(Bitmap.java:918) at android.graphics.Bitmap.createBitmap(Bitmap.java:879) at com.ramotion.foldingcell.FoldingCell.measureViewAndGetBitmap(FoldingCell.java:346) at com.ramotion.foldingcell.FoldingCell.unfold(FoldingCell.java:121) at com.ramotion.foldingcell.FoldingCell.toggle(FoldingCell.java:224) at com.test.$ContentAdapter.onBindViewHolder(AFragment.java:409) at com.test..AFragment$ContentAdapter.onBindViewHolder(AFragment.java:252) at android.support.v7.widget.RecyclerView$Adapter.onBindViewHolder(RecyclerView.java:6354) at android.support.v7.widget.RecyclerView$Adapter.bindViewHolder(RecyclerView.java:6387) at android.support.v7.widget.RecyclerView$Recycler.tryBindViewHolderByDeadline(RecyclerView.java:5343) at android.support.v7.widget.RecyclerView$Recycler.tryGetViewHolderForPositionByDeadline(RecyclerView.java:5606) at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5448) at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5444) at android.support.v7.widget.LinearLayoutManager$LayoutState.next(LinearLayoutManager.java:2224) at android.support.v7.widget.LinearLayoutManager.layoutChunk(LinearLayoutManager.java:1551) at android.support.v7.widget.LinearLayoutManager.fill(LinearLayoutManager.java:1511) at android.support.v7.widget.LinearLayoutManager.scrollBy(LinearLayoutManager.java:1325) at android.support.v7.widget.LinearLayoutManager.scrollVerticallyBy(LinearLayoutManager.java:1061) at android.support.v7.widget.RecyclerView$ViewFlinger.run(RecyclerView.java:4734) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:966) at android.view.Choreographer.doCallbacks(Choreographer.java:778) at android.view.Choreographer.doFrame(Choreographer.java:710) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:952) at android.os.Handler.handleCallback(Handler.java:789) at android.os.Handler.dispatchMessage(Handler.java:98) at android.os.Looper.loop(Looper.java:164) at android.app.ActivityThread.main(ActivityThread.java:6809) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

    My requirement is, want to show previous folding cell state (either folded / unfolded) when ever data set is changed or scroll up or scroll down.

    I am using Android Studio 3.0 & Folding Cell 1.2.1

    Thanks in advance.

    bug help wanted 
    opened by Vijaykumarj 8
  • Unfold the last two lines, the last line is not complete and cannot be folded

    Unfold the last two lines, the last line is not complete and cannot be folded

    In rapid succession unfold the last two lines, in the last line is not fully expanded when the penultimate line, the last line is not complete and cannot be folded ezgif com-video-to-gif 1

    bug 
    opened by chenfei0928 7
  • folding cell in CardView with elevation and radius corner

    folding cell in CardView with elevation and radius corner

    Hi, I have a RecyclerView in my activity. I used folding-cell library to expand each CardView. but because my CardView has elevation and cardCornerRadius it gets ugly. because when it wants to unfold list_item_feed_expand first it doesn't have radius corner and shadow and when animation get completed it gets shadow and corner. it is the same for folding. it first removes radius corner and shadow and then it fold it can you tell me how to correct this? is there anyway to solve it?

    question 
    opened by faezsghfi 7
  • Unable to fold if there are buttons in expand cell

    Unable to fold if there are buttons in expand cell

    in the expand cell ,i want to add some buttons and set listener for them ,but the expand cell can`t fold,can you give me some suggestions to solve it,thand you!

    opened by imtianx 7
  • Glitched animation when unfolded for first time

    Glitched animation when unfolded for first time

    Hi, I'm trying to solve an issue with Folding Cell element. When I unfold it for the first time, next items jump to their final position for a fraction of second and only then is their position animated according to the folding anim. It seems as if the whole layout does not have infomation about the final size of unfolded item so it needs one unfolding to compute it first. If I collapse the same item and then unfold it second time, it all works perfectly. Any idea what can I do about it ?

    opened by daniel-micic 6
  • i get this error :   java.lang.IllegalStateException: Additional flips count is too small

    i get this error : java.lang.IllegalStateException: Additional flips count is too small

    Process: sinadalvand.a30nama.co.a30nama, PID: 4943 java.lang.IllegalStateException: Additional flips count is too small at com.ramotion.foldingcell.FoldingCell.calculateHeightsForAnimationParts(FoldingCell.java:292) at com.ramotion.foldingcell.FoldingCell.unfold(FoldingCell.java:134) at com.ramotion.foldingcell.FoldingCell.toggle(FoldingCell.java:224) at sinadalvand.a30nama.co.a30nama.Recycle.PostPageRecycleAdapter$DownloadHolder$3.onItemClick(PostPageRecycleAdapter.java:134)

    i use this list view in Recycle view when i touch card i receive this error .

    what is this meaning?

    opened by sinadalvand 6
  • Bad folding animation

    Bad folding animation

    I imported and run your example of folding-cell-listview-example. Unfortunately it seems that there is a strange folding animation. When the animation of unfolding starts there is always a bug with the first fold (or the last if folding). It looks like the animation starts from the top of the screen and not from the point it's in. Any way of fixing it?

    Here is a sample ( second list option was clicked btw ): untitled

    opened by G-Maan 6
  • can't upload application to Google Play store

    can't upload application to Google Play store

    I have tried to publish my application to Google Play store but when i include the 'com.ramotion.foldingcell:folding-cell:1.0.0' I get the following error when trying to upload apk file. the dependency causes the next Issue: Multiple APK: Version 1 is not served to any device configuration.

    opened by MaxToyberman 6
  • The first flip is very big.

    The first flip is very big.

    Thanks for great work I run the demo on my galaxy s6 edge with Android 6 the first flip is very big. it takes the whole screen. it is not like the gif displayed in repository where flip size should match displayed layout size. the only parameter to configure is "cell:additionalFlipsCount" which control additional flips. my issue with first flip size

    opened by hishambakr 6
  • Bug after folding a cell, the layout goes out of bounds

    Bug after folding a cell, the layout goes out of bounds

    https://user-images.githubusercontent.com/63713183/113403647-47e5dc00-93a7-11eb-96cc-e71dc1e45125.mp4

    Hi, i have a problem with this library and if someone help me out I really appreciate. Initially the cell was ok, after i tap on cell and fold it i have a bug. The layout goes out of bounds, and if i unfold the cell the bug remains. I've attached a video to show you the problem.

    opened by GIovaB6 0
  • problem in toggle

    problem in toggle

    i have a problem with folding cell if i used list view in content layout i cant toggle the item this code stopping work ((FoldingCell) view).toggle(false); adapter.registerToggle(pos);

    opened by AhmedSalehUa 1
  • Content view doesn't get updated in unfolded state.

    Content view doesn't get updated in unfolded state.

    When the content view is unfolded and if it's height gets changed due to some action then the change in the height is not visible. However when the content view is folded the height changes. Temporarily I have had this working by folding and unfolding the folding cell without animation.

        foldingCell.fold(true);
        foldingCell.unfold(true); 
    
    opened by OmSingh5092 0
  • Animation flickers on Android 10

    Animation flickers on Android 10

    Hi,

    I have downloaded the the remotion app from play store and I run it on several devices with Android 10 and I get the flicker like in the following video. https://files.fm/u/dse7fwse

    Also with my own implementation of this library the flicker reproduces on Android 10 devices. Please keep in mind that is not a device issue because I tried the app on several devices with Android 10 and it always reproduced.

    Any idea on how to fix this? Thanks

    opened by NewAndOldAdrian 19
Owner
Ramotion
UI Engineering, UI/UX Design and Front-End Development Agency
Ramotion
Implementation of ExpandableListview with custom header and custom content.

ExpandableLayout ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow

Robin Chutaux 1.6k Dec 12, 2022
Linear layout, that wrap its content to the next line if there is no space in the current line.

Android flow layout Introduction Extended linear layout that wrap its content when there is no place in the current line. [] (https://travis-ci.org/Ap

Artem.Votincev 2k Jan 5, 2023
NodeFlow is a library that makes visualizing hierarchical content easier.

NodeFlow NodeFlow is an Android library that provides a simple way to visualize hierarchical content. Perfect for displaying items that are organized

Telenav Inc 546 Dec 7, 2021
A layout that creates a loading-like progress around it's child ( circle ) on touch, inspired from Destiny's ( PS4 ) accept mechanism

HoldToLoadLayout HoldToLoadLayout is a view group that can contain a single child. It draws your child to middle of layout, and performs loading wheel

Melih Aksoy 79 Feb 8, 2022
A pull-down-to-refresh layout inspired by Lollipop overscrolled effects

JellyRefreshLayout A pull-down-to-refresh layout inspired by Lollipop overscrolled effects Preview Download Gradle: repositories { maven {

Y.Chen 628 Oct 26, 2022
A layout to transition between two views using a Floating Action Button as shown in many Material Design concepts

⚠ This library is no longer maintained ⚠️ FABRevealLayout A layout to transition between two views using a Floating Action Button as shown in many Mat

Tomás Ruiz-López 901 Dec 9, 2022
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022
Navigation Drawer Activity with material design style and simplified methods

MaterialNavigationDrawer Navigation Drawer Activity with material design style and simplified methods       It requires 10+ API and android support v7

Fabio Biola 1.6k Dec 30, 2022
Android Sample Project with Material Design and Toolbar.

AndroidMaterialDesignToolbar -- PROJECT IS NOT SUPPORTED Android Sample Project with Material Design and Toolbar. Project use Appcompat library for ma

kemal selim tekinarslan 713 Nov 11, 2022
An implementation of tap targets from the Material Design guidelines for feature discovery.

TapTargetView An implementation of tap targets from Google's Material Design guidelines on feature discovery. Min SDK: 14 JavaDoc Installation TapTar

Keepsafe 5.2k Jan 9, 2023
Material Design tap target for Android. https://sjwall.github.io/MaterialTapTargetPrompt/

Material Tap Target Prompt A Tap Target implementation in Android based on Material Design Onboarding guidelines. For more information on tap targets

Sam Wall 1.5k Dec 29, 2022
Material Design Search View Layout, now implemented in Google Maps, Dialer, etc

THIS PROJECT IS DEPRECATED Component is not maintained anymore. Implementation of Lollipop+ Dialer and Google Maps. DEMO Add in View Add to your layou

Sahil Dave 1.1k Dec 22, 2022
Stale Android Toasts made tasty.

FrenchToast Stale Android Toasts made tasty. Android Toasts are amazing, but they have a few major drawbacks: You cannot control when they show up as

py - Pierre Yves Ricau 367 Nov 15, 2022
Maetrial Design Delete Concept Implement

MaterialDeleteLayout 说明 早上逛github的时候,发现ParticleLayout这个开源项目,觉得这个创意还可以... 从说明中又点进去看IOS的效果,也从那里看到了原设计图... 原设计图是这样子的: IOS的效果是这样的: 那一刻感觉android的效果lower了好多

CJJ 355 Nov 19, 2022
Smooth version of Google Support Design AppBarLayout

smooth-app-bar-layout [Deprecated] ================ [DEPRECATED] The issue that is addressed in this library is fixed from support design 26.0.0 or ab

Henry Tao 1.8k Dec 13, 2022
A simple customised version of the TextInputLayout from the Android Design Support Library ⌨️

Buffer Text Input Layout (Coming to maven central soon!) This is a simple customisation of the TextInputLayout found in the Design Support Library. Wh

Buffer 988 Nov 24, 2022
Pixel perfect for design layout android

Pixelperfect Pixel perfect helps you design layouts according to the resolution of your users' device Follow the steps below to implement : dependen

null 10 Oct 23, 2022
:octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion

NAVIGATION TOOLBAR Navigation toolbar is a Kotlin slide-modeled UI navigation controller. We specialize in the designing and coding of custom UI for M

Ramotion 804 Dec 9, 2022
FoldingNavigationDrawer-Android This is a sample project present how to use Folding-Android to add Folding Efect to Navigation Drawer.

FoldingNavigationDrawer-Android Sample (Play Store Demo) This is a sample project present how to use Folding-Android to add Folding Efect to Navigatio

null 242 Nov 25, 2022
:octocat: A demo project based on MVVM architecture and material design & animations.

GithubFollows A simple demo project based on MVVM clean architecture and material design & animations. Architecture Specs & Open-source libraries Mini

Jaewoong Eum 288 Dec 25, 2022