{"id":15034157,"url":"https://github.com/ramotion/folding-cell-android","last_synced_at":"2025-04-10T23:26:57.313Z","repository":{"id":6265378,"uuid":"55228103","full_name":"Ramotion/folding-cell-android","owner":"Ramotion","description":":octocat: 📃  FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion","archived":false,"fork":false,"pushed_at":"2022-09-21T05:01:27.000Z","size":26341,"stargazers_count":4904,"open_issues_count":8,"forks_count":841,"subscribers_count":153,"default_branch":"master","last_synced_at":"2025-04-03T14:07:12.406Z","etag":null,"topics":["android","component","java","library","material-design"],"latest_commit_sha":null,"homepage":"https://www.ramotion.com/agency/app-development/","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ramotion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-01T11:38:47.000Z","updated_at":"2025-03-29T06:22:06.000Z","dependencies_parsed_at":"2023-01-11T17:02:29.200Z","dependency_job_id":null,"html_url":"https://github.com/Ramotion/folding-cell-android","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Ffolding-cell-android","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Ffolding-cell-android/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Ffolding-cell-android/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Ffolding-cell-android/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ramotion","download_url":"https://codeload.github.com/Ramotion/folding-cell-android/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248313945,"owners_count":21082947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","component","java","library","material-design"],"created_at":"2024-09-24T20:24:06.136Z","updated_at":"2025-04-10T23:26:57.286Z","avatar_url":"https://github.com/Ramotion.png","language":"Java","readme":"\u003ca href=\"https://www.ramotion.com/agency/app-development/?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=folding-cell-android\"\u003e\u003cimg src=\"https://github.com/Ramotion/folding-cell/blob/master/header.png\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://github.com/Ramotion/folding-cell-android\"\u003e\n\u003cimg align=\"left\" src=\"https://github.com/Ramotion/folding-cell-android/blob/master/folding_cell_preview.gif\" width=\"480\" height=\"360\" /\u003e\u003c/a\u003e\n\n\u003cp\u003e\u003ch1 align=\"left\"\u003eFOLDING CELL [JAVA]\u003c/h1\u003e\u003c/p\u003e\n\n\u003ch4\u003eExpanding content cell with animation inspired by folding paper card material design.\u003c/h4\u003e\n\n\n___\n\n\n\n\u003cp\u003e\u003ch6\u003eWe specialize in the designing and coding of custom UI for Mobile Apps and Websites.\u003c/h6\u003e\n\u003ca href=\"https://www.ramotion.com/agency/app-development/?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=folding-cell-android\"\u003e\n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png\" width=\"187\" height=\"34\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\u003ch6\u003eStay tuned for the latest updates:\u003c/h6\u003e\n\u003ca href=\"https://goo.gl/rPFpid\" \u003e\n\u003cimg src=\"https://i.imgur.com/ziSqeSo.png/\" width=\"156\" height=\"28\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003c/br\u003e\n\n[![Circle CI](https://circleci.com/gh/Ramotion/folding-cell-android.svg?style=svg)](https://circleci.com/gh/Ramotion/folding-cell-android)\n[![Codacy Badge](https://api.codacy.com/project/badge/grade/339ae33122964163a55a5e8e90619cbc)](https://www.codacy.com/app/juri-v/folding-cell-android)\n[![Twitter](https://img.shields.io/badge/Twitter-@Ramotion-blue.svg?style=flat)](http://twitter.com/Ramotion)\n[![Analytics](https://ga-beacon.appspot.com/UA-84973210-1/ramotion/folding-cell-android?pixel)](https://github.com/igrigorik/ga-beacon)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/Ramotion)\n\n## Requirements\n​\n- Android 4.0 IceCreamSandwich (API lvl 14) or greater\n- Your favorite IDE\n\n## Installation\n​\nJust download the package from [here](https://repo1.maven.org/maven2/com/ramotion/foldingcell/folding-cell/1.2.3/folding-cell-1.2.3.aar) and add it to your project classpath, or just use the maven repo:\n\nGradle:\n```groovy\n'com.ramotion.foldingcell:folding-cell:1.2.3'\n```\nSBT:\n```scala\nlibraryDependencies += \"com.ramotion.foldingcell\" % \"folding-cell\" % \"1.2.3\"\n```\nMaven:\n```xml\n\u003cdependency\u003e\n\t\u003cgroupId\u003ecom.ramotion.foldingcell\u003c/groupId\u003e\n\t\u003cartifactId\u003efolding-cell\u003c/artifactId\u003e\n\t\u003cversion\u003e1.2.3\u003c/version\u003e\n\u003c/dependency\u003e\n```\n​\n## Basic usage\n​\n1. Add `com.ramotion.foldingcell.FoldingCell` to your layout\n​\n```xml\n\u003ccom.ramotion.foldingcell.FoldingCell\n    xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    android:id=\"@+id/folding_cell\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\u003e\n​\n\u003c/com.ramotion.foldingcell.FoldingCell\u003e\n```\n​\n2. 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\"`.\n​\n```xml\n\u003ccom.ramotion.foldingcell.FoldingCell\n    xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    android:id=\"@+id/folding_cell\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\u003e\n​\n        \u003cFrameLayout\n            android:id=\"@+id/cell_content_view\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\"\n            android:background=\"@android:color/holo_green_dark\"\n            android:visibility=\"gone\"\u003e\n            \u003cTextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"250dp\" /\u003e\n        \u003c/FrameLayout\u003e\n​\n        \u003cFrameLayout\n            android:id=\"@+id/cell_title_view\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\"\u003e\n            \u003cTextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"100dp\"\n                android:background=\"@android:color/holo_blue_dark\" /\u003e\n        \u003c/FrameLayout\u003e\n​\n\u003c/com.ramotion.foldingcell.FoldingCell\u003e\n```\n​\n3. Almost done! Two steps remain! For correct animation, you need to set up two properties on the root element(s) of your Folding Cell:\n​\n```xml\nandroid:clipChildren=\"false\"\nandroid:clipToPadding=\"false\"\n```\n​\n4. Final step! Add onClickListener to your Folding Cell in `MainActivity.java` to toggle animation:\n​\n```java\n@Override\nprotected void onCreate(Bundle savedInstanceState) {\n    super.onCreate(savedInstanceState);\n    setContentView(R.layout.activity_main);\n​\n    // get our folding cell\n    final FoldingCell fc = (FoldingCell) findViewById(R.id.folding_cell);\n​\n    // attach click listener to folding cell\n    fc.setOnClickListener(new View.OnClickListener() {\n        @Override\n        public void onClick(View v) {\n            fc.toggle(false);\n        }\n    });\n}\n```\n​\n5. 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:\nFrom xml layout file with `res-auto` namespace `xmlns:folding-cell=\"http://schemas.android.com/apk/res-auto\"`:\n```xml\nfolding-cell:animationDuration=\"1000\"\nfolding-cell:backSideColor=\"@color/bgBackSideColor\"\nfolding-cell:additionalFlipsCount=\"2\"\nfolding-cell:cameraHeight=\"30\"\n```\nOr from code:\n```java\n// get our folding cell\nfinal FoldingCell fc = (FoldingCell) findViewById(R.id.folding_cell);\n// set custom parameters\nfc.initialize(1000, Color.DKGRAY, 2);\n// or with camera height parameter\nfc.initialize(30, 1000, Color.DKGRAY, 2);\n```\n​\nYou can find this and other, more complex, examples in this repository\n​\n\n\u003cbr\u003e\n\n## 🗂 Check this library on other language:\n\u003ca href=\"https://github.com/Ramotion/folding-cell\"\u003e \n\u003cimg src=\"https://github.com/ramotion/navigation-stack/raw/master/Swift@2x.png\" width=\"178\" height=\"81\"\u003e\u003c/a\u003e\n\n\n## 📄 License\n\nFolding Cell is released under the MIT license.\nSee [LICENSE](./LICENSE) for details.\n\nThis library is a part of a \u003ca href=\"https://github.com/Ramotion/android-ui-animation-components-and-libraries\"\u003e\u003cb\u003eselection of our best UI open-source projects\u003c/b\u003e\u003c/a\u003e\n\nIf you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com\n\n## 📱 Get the Showroom App for Android to give it a try\nTry this UI component and more like this in our Android app. Contact us if interested.\n\n\u003ca href=\"https://play.google.com/store/apps/details?id=com.ramotion.showroom\" \u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Ramotion/react-native-circle-menu/master/google_play@2x.png\" width=\"104\" height=\"34\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://www.ramotion.com/agency/app-development/?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=folding-cell-android\"\u003e\n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png\" width=\"187\" height=\"34\"\u003e\u003c/a\u003e\n","funding_links":["https://paypal.me/Ramotion"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framotion%2Ffolding-cell-android","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Framotion%2Ffolding-cell-android","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framotion%2Ffolding-cell-android/lists"}