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


First add this to your Gradle dependencies In the App Level Gradle File, then Sync Project with Gradle.

dependencies { //Folding Cell 'com.ramotion.foldingcell:folding-cell:1.2.3' }
Step 1 : XML Code:

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>
Step 2 : Folding Cell View

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 of 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&lgt; <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>
Step 3 : Properties

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"
Step 4 : OnClickListener

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); } }); }
Step 5 : 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 explanation. It is the count of flips to be executed after the first(main) flip. Default value is 0(auto choose). Also there is a fourth, additional parameter – camera height, it controls the level (depth) of 3d effect. There are two ways to change cell settings: From xml layout file with res-autonamespace

xmlns:foldingcell="http://schemas.android.com/apk/res-auto": folding-cell:animationDuration="1000" folding-cell:backSideColor="@color/bgBackSideColor" folding-cell:additionalFlipsCount="2" folding-cell:cameraHeight="30"

Ready to Build Your Projects?

The best companies and startups hire our top dev teams, and so can you.
Start a Project
GSM Plus Infotech