Animated Folding Cell in Android Studio (JAVA)

Animated Folding Cell in Android Studio | Java

In this tutorial, we’re going to see how to create an animated folding cell. Animated Folding Cell is an Expanding content cell with animation inspired by folding paper card material design.

Requirements

  • Android 4.0 IceCreamSandwich (API level 14) or greater

Installation

In build.gradle app file add the dependency of the folding cell

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

Usage

  • Add com.ramotion.foldingcell.FoldingCell to your layout​
<com.ramotion.foldingcell.FoldingCell
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:folding-cell="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.ramotion.foldingcell.FoldingCell>
  • 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 the exact height in dp, you can set the height for child elements in your own layout inside the content view or a title view. Also, you need to hide your content view layout using android:visibility=”gone”.​
<?xml version="1.0" encoding="utf-8"?>
<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>
  • 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"
  • 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_folding_cell);

// 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);
}
});
}

Output:

You can follow me on YouTube:

Golap Barman

Also, visit my website for more content like this

www.gbandroidblogs.com

Follow me on Instagram

Android App Developer

Follow me on Facebook

GBAndroidBlogs

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store