FanLayoutManager
Using Fan Layout Manager you can implement the horizontal list, the items of which move like fan blades
Top Related Projects
Epoxy is an Android library for building complex screens in a RecyclerView
Flexbox for Android
A SnapHelper that snaps a RecyclerView to an edge.
Project vlayout is a powerfull LayoutManager extension for RecyclerView, it provides a group of layouts for RecyclerView. Make it able to handle a complicate situation when grid, list and other layouts in the same recyclerview.
An Android Animation library which easily add itemanimator to RecyclerView items.
Flexible multiple types for Android RecyclerView.
Quick Overview
FanLayoutManager is a custom RecyclerView LayoutManager for Android that creates a fan-like layout for items. It provides a unique and visually appealing way to display content in a circular arrangement, with items fanning out from a central point.
Pros
- Offers a distinctive and eye-catching layout for RecyclerView items
- Customizable with various animation and appearance options
- Smooth scrolling and item selection functionality
- Compatible with standard RecyclerView adapters
Cons
- May not be suitable for displaying large amounts of data efficiently
- Limited to circular layouts, which might not fit all use cases
- Potential performance impact on devices with lower processing power
- Learning curve for developers unfamiliar with custom LayoutManagers
Code Examples
- Creating a FanLayoutManager:
val fanLayoutManager = FanLayoutManager(context, OrientationHelper.VERTICAL)
recyclerView.layoutManager = fanLayoutManager
- Customizing the layout:
fanLayoutManager.apply {
setAngleItemBounce(5f)
setViewHeightDp(160)
setViewWidthDp(120)
setRadius(300)
}
- Adding a selection listener:
fanLayoutManager.setSelectedItemListener(object : FanLayoutManager.SelectedItemListener {
override fun onItemSelected(position: Int) {
// Handle item selection
}
})
Getting Started
To use FanLayoutManager in your Android project:
- Add the dependency to your app's
build.gradle
:
dependencies {
implementation 'com.cleveroad:fan-layout-manager:1.0.5'
}
- In your layout XML, add a RecyclerView:
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
- In your Activity or Fragment, set up the RecyclerView with FanLayoutManager:
val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
val fanLayoutManager = FanLayoutManager(this, OrientationHelper.VERTICAL)
recyclerView.layoutManager = fanLayoutManager
recyclerView.adapter = YourCustomAdapter()
Now your RecyclerView will display items in a fan-like layout. Customize the FanLayoutManager properties as needed for your specific use case.
Competitor Comparisons
Epoxy is an Android library for building complex screens in a RecyclerView
Pros of Epoxy
- More comprehensive solution for building complex RecyclerView layouts
- Supports data binding and view binding out of the box
- Offers automatic diffing and efficient updates for better performance
Cons of Epoxy
- Steeper learning curve due to its more complex architecture
- Requires more setup and boilerplate code for simple use cases
- May be overkill for projects with simpler RecyclerView needs
Code Comparison
FanLayoutManager:
val fanLayoutManager = FanLayoutManager(context)
recyclerView.layoutManager = fanLayoutManager
Epoxy:
class MyEpoxyController : EpoxyController() {
override fun buildModels() {
// Build your models here
}
}
val controller = MyEpoxyController()
recyclerView.setController(controller)
Key Differences
- FanLayoutManager focuses solely on providing a unique layout manager for RecyclerView
- Epoxy is a full-featured library for building complex RecyclerView layouts with various optimizations
- FanLayoutManager is easier to implement for its specific use case, while Epoxy requires more setup but offers greater flexibility
- Epoxy provides built-in support for data binding and view binding, which FanLayoutManager does not offer
- FanLayoutManager is more suitable for projects requiring a specific fan-like layout, while Epoxy is better for complex, data-driven list UIs
Flexbox for Android
Pros of flexbox-layout
- More versatile layout options, supporting various flex properties
- Better integration with Android's existing layout system
- Actively maintained by Google, ensuring compatibility and updates
Cons of flexbox-layout
- Steeper learning curve for developers unfamiliar with flexbox concepts
- May have performance overhead for complex layouts with many items
Code Comparison
FanLayoutManager:
val fanLayoutManager = FanLayoutManager(context, OrientationHelper.VERTICAL)
recyclerView.layoutManager = fanLayoutManager
flexbox-layout:
val flexboxLayoutManager = FlexboxLayoutManager(context)
flexboxLayoutManager.flexDirection = FlexDirection.ROW
flexboxLayoutManager.justifyContent = JustifyContent.FLEX_START
recyclerView.layoutManager = flexboxLayoutManager
Summary
FanLayoutManager provides a unique fan-like layout for RecyclerViews, offering a visually appealing and interactive design. It's ideal for specific use cases where a fan or card-stack effect is desired.
flexbox-layout, on the other hand, offers a more general-purpose layout solution based on CSS Flexbox principles. It provides greater flexibility in arranging items and is better suited for a wide range of layout requirements.
The choice between the two depends on the specific needs of your project. FanLayoutManager is best for specialized, visually striking layouts, while flexbox-layout is more suitable for versatile, responsive designs across various screen sizes and orientations.
A SnapHelper that snaps a RecyclerView to an edge.
Pros of GravitySnapHelper
- Simpler implementation for common snapping behaviors
- More flexible, works with various LayoutManagers
- Lighter weight, focused solely on snapping functionality
Cons of GravitySnapHelper
- Limited to basic snapping, lacks advanced visual effects
- Doesn't provide a custom LayoutManager for unique layouts
- May require additional code for complex animations
Code Comparison
GravitySnapHelper:
GravitySnapHelper snapHelper = new GravitySnapHelper(Gravity.START);
snapHelper.attachToRecyclerView(recyclerView);
FanLayoutManager:
FanLayoutManager fanLayoutManager = new FanLayoutManager(context);
recyclerView.setLayoutManager(fanLayoutManager);
Summary
GravitySnapHelper is a lightweight solution for adding snapping behavior to RecyclerViews, working with various LayoutManagers. It's simpler to implement but lacks advanced visual effects. FanLayoutManager, on the other hand, provides a unique fan-like layout with built-in animations, but is less flexible and more complex to set up. Choose GravitySnapHelper for basic snapping needs across different layouts, and FanLayoutManager for a specific, visually striking fan effect.
Project vlayout is a powerfull LayoutManager extension for RecyclerView, it provides a group of layouts for RecyclerView. Make it able to handle a complicate situation when grid, list and other layouts in the same recyclerview.
Pros of vlayout
- More versatile, supporting multiple layout types beyond just fan layouts
- Designed for high performance with large, complex layouts
- Actively maintained by Alibaba, with regular updates and improvements
Cons of vlayout
- Steeper learning curve due to its complexity and extensive features
- Requires more setup and configuration compared to FanLayoutManager
- May be overkill for simple layout needs
Code Comparison
FanLayoutManager:
val fanLayoutManager = FanLayoutManager(context)
recyclerView.layoutManager = fanLayoutManager
vlayout:
val virtualLayoutManager = VirtualLayoutManager(context)
recyclerView.layoutManager = virtualLayoutManager
val viewPool = RecyclerView.RecycledViewPool()
recyclerView.setRecycledViewPool(viewPool)
val delegateAdapter = DelegateAdapter(virtualLayoutManager)
recyclerView.adapter = delegateAdapter
Summary
FanLayoutManager is a simpler, more focused solution for creating fan-like layouts in Android RecyclerViews. It's easier to implement but limited in scope. vlayout, on the other hand, offers a comprehensive layout solution with multiple layout types and high performance, but comes with increased complexity. Choose FanLayoutManager for quick, specific fan layouts, and vlayout for more complex, diverse layout needs in large-scale applications.
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
- Supports custom animations for adding, removing, and moving items
- Easy to implement with minimal code changes
Cons of recyclerview-animators
- Limited to animating individual items, not the entire layout
- May require additional customization for complex animation sequences
- Performance impact with large datasets or frequent updates
Code Comparison
FanLayoutManager:
val fanLayoutManager = FanLayoutManager(context)
recyclerView.layoutManager = fanLayoutManager
recyclerview-animators:
val animator = SlideInLeftAnimator()
recyclerView.itemAnimator = animator
Key Differences
FanLayoutManager focuses on creating a unique layout for RecyclerView items, arranging them in a fan-like pattern. It's ideal for showcasing a small number of items in a visually appealing way.
recyclerview-animators, on the other hand, provides a wide range of animations for individual RecyclerView items during add, remove, and move operations. It's more versatile for general-purpose RecyclerView animations but doesn't alter the overall layout.
Choose FanLayoutManager for a specific, eye-catching layout design, or recyclerview-animators for enhancing the visual feedback of item changes in a standard RecyclerView layout.
Flexible multiple types for Android RecyclerView.
Pros of MultiType
- More flexible and versatile for handling multiple view types in RecyclerView
- Simpler API and easier to implement for complex list structures
- Better support for data binding and view holder pattern
Cons of MultiType
- Lacks specialized layout features like fan-style arrangement
- May require more manual setup for custom layouts
- Not optimized for specific visual effects like FanLayoutManager
Code Comparison
MultiType:
class TextItemViewBinder : ItemViewBinder<String, TextItemViewBinder.Holder>() {
override fun onCreateViewHolder(inflater: LayoutInflater, parent: ViewGroup): Holder {
return Holder(inflater.inflate(R.layout.item_text, parent, false))
}
override fun onBindViewHolder(holder: Holder, item: String) {
holder.text.text = item
}
class Holder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val text: TextView = itemView.findViewById(R.id.text)
}
}
FanLayoutManager:
val fanLayoutManager = FanLayoutManager(context)
recyclerView.layoutManager = fanLayoutManager
fanLayoutManager.setAngleItemBounce(10f)
fanLayoutManager.setRadius(600)
fanLayoutManager.setViewHeightDp(160)
The code snippets demonstrate the different focus of each library. MultiType emphasizes flexible item binding, while FanLayoutManager provides specific layout customization for a fan-like arrangement.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Welcome to Fan Layout Manager for Android by Cleveroad
Fan Layout Manager is a new library created at Cleveroad. Our ideas donât come from nowhere, everything we invent results from the difficulties we overcome. This exactly what happened â we were fighting uniformity! Since traditional view of the simple horizontal list isnât impressive anymore, we decided to suggest our vision adding some colours and a completely new motion path.
#####Check out the animation Fan Layout Manager for Android on YouTube in HD quality.
Cleveroad gladly shares its creation with everyone who wants to add some visual spice to their Android apps. Take Fan Layout Manager and create!
Using Fan Layout Manager you can implement the horizontal list, the items of which move like fan blades (in a circular way of a radius to your choice). To give a slightly chaotical effect to the motion, itâs possible to set an angle for the list items. So, every implementation of the library can be unique.
Installation
by Gradle:
compile 'com.cleveroad:fan-layout-manager:1.0.5'
Setup and usage
Use default FanLayoutManager in code:
fanLayoutManager = new FanLayoutManager(getContext());
recyclerView.setLayoutManager(fanLayoutManager);
You can select/deselect item using:
fanLayoutManager.switchItem(recyclerView, itemPosition); // select/deselect
fanLayoutManager.deselectItem(); // just deselect
Get selected item position:
fanLayoutManager.getSelectedItemPosition(); // return selected item position
fanLayoutManager.isItemSelected(); // true if item was selected
To customize FanLayoutManager we provide settings:
FanLayoutManagerSettings fanLayoutManagerSettings = FanLayoutManagerSettings
.newBuilder(getContext())
.withFanRadius(true)
.withAngleItemBounce(5)
.withViewWidthDp(120)
.withViewHeightDp(160)
.build();
fanLayoutManager = new FanLayoutManager(getContext(), fanLayoutManagerSettings);
recyclerView.setLayoutManager(fanLayoutManager);
.withFanRadius(boolean isFanRadiusEnable)
- you can enable displaying items in fan style.
.withAngleItemBounce(float angleItemBounce)
- added rendom bounce angle to items from [0.. angleItemBounce).
.withViewWidthDp(float viewWidthDp)
- custom item width. default 120dp.
.withViewHeightDp(float viewHeightDp)
- custom item height. default 160dp.
You can remove bounce angle effect for selected item:
public void straightenSelectedItem(Animator.AnimatorListener listener);
and you can restore bounce angle effect for selected item:
public void restoreBaseRotationSelectedItem(Animator.AnimatorListener listener)
You can collapse views using:
public void collapseViews();
Changelog
See changelog history.
Support
If you have any questions regarding the use of this tutorial, please contact us for support
at info@cleveroad.com (email subject: «FanLayoutManager for Android. Support request.»)
or
Use our contacts:
Cleveroad.com
Facebook account
Twitter account
Google+ account
License
The MIT License (MIT)
Copyright (c) 2015-2016 Cleveroad
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Top Related Projects
Epoxy is an Android library for building complex screens in a RecyclerView
Flexbox for Android
A SnapHelper that snaps a RecyclerView to an edge.
Project vlayout is a powerfull LayoutManager extension for RecyclerView, it provides a group of layouts for RecyclerView. Make it able to handle a complicate situation when grid, list and other layouts in the same recyclerview.
An Android Animation library which easily add itemanimator to RecyclerView items.
Flexible multiple types for Android RecyclerView.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot