Convert Figma logo to code with AI

alibaba logovlayout

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.

10,798
1,794
10,798
194

Top Related Projects

7,700

A declarative framework for building efficient UIs on Android.

8,512

Epoxy is an Android library for building complex screens in a RecyclerView

Flexbox for Android

Flexible multiple types for Android RecyclerView.

An Android Animation library which easily add itemanimator to RecyclerView items.

A SnapHelper that snaps a RecyclerView to an edge.

Quick Overview

VLayout is a powerful Android layout manager developed by Alibaba. It allows for complex and flexible layouts by supporting nested recycling, view recycling, and asynchronous layout. VLayout is designed to handle various layout types efficiently, making it ideal for creating complex, high-performance user interfaces in Android applications.

Pros

  • Supports multiple layout types within a single RecyclerView
  • Efficient view recycling and reuse, improving performance
  • Allows for asynchronous layout calculation, reducing main thread load
  • Highly customizable and extensible

Cons

  • Steeper learning curve compared to standard Android layouts
  • Documentation is primarily in Chinese, which may be challenging for non-Chinese speakers
  • Requires more setup and configuration than traditional layouts
  • May be overkill for simple layouts or applications

Code Examples

  1. Basic VLayout setup:
RecyclerView recyclerView = findViewById(R.id.recycler_view);
VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);

RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
  1. Adding a linear layout:
LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper();
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager);
delegateAdapter.addAdapter(new LinearAdapter(this, linearLayoutHelper, 10));
recyclerView.setAdapter(delegateAdapter);
  1. Adding a grid layout:
GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(4);
gridLayoutHelper.setAutoExpand(false);
delegateAdapter.addAdapter(new GridAdapter(this, gridLayoutHelper, 20));
  1. Adding a sticky header:
StickyLayoutHelper stickyLayoutHelper = new StickyLayoutHelper();
stickyLayoutHelper.setOffset(10);
delegateAdapter.addAdapter(new StickyAdapter(this, stickyLayoutHelper, 1));

Getting Started

To use VLayout in your Android project:

  1. Add the dependency to your app's build.gradle:
dependencies {
    implementation 'com.alibaba.android:vlayout:1.3.0@aar'
}
  1. Initialize VLayout in your activity or fragment:
RecyclerView recyclerView = findViewById(R.id.recycler_view);
VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);

RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);

DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager);
recyclerView.setAdapter(delegateAdapter);

// Add your custom adapters using different LayoutHelpers
delegateAdapter.addAdapter(new YourCustomAdapter(this, new LinearLayoutHelper(), 10));
  1. Create custom adapters extending DelegateAdapter.Adapter for each layout type you want to use.

Competitor Comparisons

7,700

A declarative framework for building efficient UIs on Android.

Pros of Litho

  • Declarative UI framework with a focus on performance and efficiency
  • Asynchronous layout calculation and rendering for smoother scrolling
  • Extensive testing and production use at Facebook scale

Cons of Litho

  • Steeper learning curve due to its unique component-based architecture
  • Limited flexibility for custom layouts compared to VLayout's more traditional approach
  • Requires integration with other Facebook libraries for optimal performance

Code Comparison

VLayout example:

LayoutHelper layoutHelper = new LinearLayoutHelper();
adapter.addLayoutHelper(layoutHelper);

layoutHelper.setItemCount(4);
layoutHelper.setPadding(20, 20, 20, 20);
layoutHelper.setMargin(20, 20, 20, 20);

Litho example:

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Column.create(c)
      .paddingDip(YogaEdge.ALL, 16)
      .child(Text.create(c).text("Hello, World!"))
      .build();
}

VLayout offers a more familiar approach to Android developers, while Litho introduces a new paradigm for building UIs. VLayout provides greater flexibility for custom layouts, whereas Litho focuses on performance optimization through its component-based system.

8,512

Epoxy is an Android library for building complex screens in a RecyclerView

Pros of Epoxy

  • More comprehensive and feature-rich, offering a wider range of layout options and customization
  • Better documentation and community support, making it easier for developers to adopt and use
  • Stronger type safety and compile-time checks, reducing runtime errors

Cons of Epoxy

  • Steeper learning curve due to its more complex API and extensive features
  • Potentially higher memory usage and performance overhead for simpler layouts
  • Less focused on performance optimization for large lists compared to VLayout

Code Comparison

Epoxy:

@EpoxyModelClass
abstract class HeaderModel : EpoxyModelWithHolder<HeaderHolder>() {
    @EpoxyAttribute lateinit var title: String
    
    override fun bind(holder: HeaderHolder) {
        holder.titleView.text = title
    }
}

VLayout:

public class HeaderHelper extends DelegateAdapter.Adapter<RecyclerView.ViewHolder> {
    private String title;
    
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((TextView) holder.itemView).setText(title);
    }
}

Both libraries aim to simplify complex RecyclerView layouts, but Epoxy provides a more robust and type-safe approach at the cost of increased complexity, while VLayout focuses on performance and flexibility for large lists with a simpler API.

Flexbox for Android

Pros of flexbox-layout

  • Based on the widely-used CSS Flexbox standard, making it more familiar to web developers
  • Offers more flexibility in layout options, including wrapping and alignment properties
  • Supported and maintained by Google, ensuring long-term stability and updates

Cons of flexbox-layout

  • May have a steeper learning curve for developers not familiar with CSS Flexbox concepts
  • Potentially less optimized for complex, nested layouts compared to vlayout's specialized approach

Code Comparison

flexbox-layout:

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:alignItems="center">
    <!-- Child views -->
</com.google.android.flexbox.FlexboxLayout>

vlayout:

<com.alibaba.android.vlayout.VirtualLayoutManager
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- Child views with different layout helpers -->
</com.alibaba.android.vlayout.VirtualLayoutManager>

Both libraries aim to provide flexible layout options for Android applications, but they approach the problem differently. flexbox-layout follows web standards, while vlayout offers a more Android-specific solution with potentially better performance for complex layouts.

Flexible multiple types for Android RecyclerView.

Pros of MultiType

  • Simpler API and easier to use for basic RecyclerView layouts
  • More flexible for handling complex data structures and multiple view types
  • Lighter weight and potentially better performance for simpler use cases

Cons of MultiType

  • Less powerful for complex layouts compared to VLayout's advanced capabilities
  • Lacks built-in support for some advanced layout features like sticky headers
  • May require more custom code for complex layouts that VLayout handles out-of-the-box

Code Comparison

MultiType:

class ImageViewBinder : ItemViewBinder<Image, ImageViewBinder.Holder>() {
    override fun onCreateViewHolder(inflater: LayoutInflater, parent: ViewGroup): Holder {
        return Holder(inflater.inflate(R.layout.item_image, parent, false))
    }
    override fun onBindViewHolder(holder: Holder, item: Image) {
        holder.imageView.setImageBitmap(item.bitmap)
    }
    class Holder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.image)
    }
}

VLayout:

LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper();
adapter.addAdapter(new SubAdapter(this, linearLayoutHelper, 10) {
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((TextView)holder.itemView.findViewById(R.id.title)).setText("linear " + position);
    }
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new RecyclerView.ViewHolder(LayoutInflater.from(self).inflate(R.layout.item, parent, false)) {};
    }
});

An Android Animation library which easily add itemanimator to RecyclerView items.

Pros of recyclerview-animators

  • Focuses specifically on animations, providing a wide range of pre-built animation effects
  • Easier to implement for simple animation needs
  • Lightweight and less complex than vlayout

Cons of recyclerview-animators

  • Limited to animations only, doesn't provide advanced layout capabilities
  • May require additional libraries or custom code for complex layouts
  • Less suitable for highly dynamic or complex UI structures

Code Comparison

recyclerview-animators:

val animator = SlideInLeftAnimator()
recyclerView.itemAnimator = animator

vlayout:

val layoutManager = VirtualLayoutManager(this)
val viewPool = RecyclerView.RecycledViewPool()
recyclerView.layoutManager = layoutManager
recyclerView.recycledViewPool = viewPool

Key Differences

  • recyclerview-animators is focused on providing easy-to-use animations for RecyclerView items
  • vlayout offers a more comprehensive layout solution, including nested layouts and complex UI structures
  • recyclerview-animators is simpler to implement for basic animation needs, while vlayout provides more flexibility for complex layouts
  • vlayout may be more suitable for large-scale applications with diverse layout requirements, while recyclerview-animators is ideal for projects needing quick and easy animations

A SnapHelper that snaps a RecyclerView to an edge.

Pros of GravitySnapHelper

  • Simpler implementation focused specifically on snapping behavior
  • Easier to integrate into existing RecyclerView layouts
  • Lightweight solution with minimal overhead

Cons of GravitySnapHelper

  • Limited layout customization compared to vLayout's extensive options
  • Lacks advanced features like sticky headers or floating items
  • Not designed for complex, multi-column layouts

Code Comparison

GravitySnapHelper:

val snapHelper = GravitySnapHelper(Gravity.START)
snapHelper.attachToRecyclerView(recyclerView)

vLayout:

VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager);
recyclerView.setAdapter(delegateAdapter);

Key Differences

  • GravitySnapHelper focuses on snapping behavior for RecyclerViews
  • vLayout offers a comprehensive layout system with multiple layout types
  • GravitySnapHelper is easier to implement for simple snapping needs
  • vLayout provides more flexibility for complex, dynamic layouts
  • GravitySnapHelper is better suited for single-column lists with snapping
  • vLayout excels in creating intricate, multi-column layouts with various components

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Attention. This project is not maintained any more !!!

vlayout

中文文档

Projects of Tangram

Android

iOS

Project vlayout is a powerful 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.

Design

By providing a custom LayoutManager to RecyclerView, VirtualLayout is able to layout child views with different style at single view elegantly. The custom LayoutManager manages a serial of layoutHelpers where each one implements the specific layout logic for a certain position range items. By the way, implementing your custom layoutHelper and provding it to the framework is also supported.

Main Feature

  • Provide default common layout implementation, decouple the View and Layout. Default layout implementations are:
    • LinearLayoutHelper: provide linear layout as LinearLayoutManager.
    • GridLayoutHelper: provide grid layout as GridLayoutManager, but with more feature.
    • FixLayoutHelper: fix the view at certain position of screen, the view does not scroll with whole page.
    • ScrollFixLayoutHelper: fix the view at certain position of screen, but the view does not show until it scrolls to it position.
    • FloatLayoutHelper: float the view on top of page, user can drag and drop it.
    • ColumnLayoutHelper: perform like GridLayoutHelper but layouts all child views in one line.
    • SingleLayoutHelper: contain only one child view.
    • OnePlusNLayoutHelper: a custom layout with one child view layouted at left and the others at right, you may not need this.
    • StickyLayoutHelper: scroll the view when its position is inside the screen, but fix the view at start or end when its position is outside the screen.
    • StaggeredGridLayoutHelper: provide waterfall like layout as StaggeredGridLayoutManager.
  • LayoutHelpers provided by default can be generally divided into two categories. One is non-fix LayoutHelper such as LinearLayoutHelper, GridLayoutHelper, etc which means the children of these LayoutHelper will be layouted in the flow of parent container and will be scrolled with the container scrolling. While the other is fix LayoutHelper which means the child of these is always fix in parent container.

Usage

Import Library

Please find the latest version in release notes. The newest version has been upload to jcenter and MavenCentral, make sure you have added at least one of these repositories. As follow:

For gradle:

compile ('com.alibaba.android:vlayout:1.2.8@aar') {
	transitive = true
}

Or in maven:
pom.xml

<dependency>
  <groupId>com.alibaba.android</groupId>
  <artifactId>vlayout</artifactId>
  <version>1.2.8</version>
  <type>aar</type>
</dependency>

Initialize LayoutManager

final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
final VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);

recyclerView.setLayoutManager(layoutManager);

Initialize recycled pool's size

Provide a reasonable recycled pool's size to your recyclerView, since the default value may not meet your situation and cause re-create views when scrolling.

RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
viewPool.setMaxRecycledViews(0, 10);

Attention: the demo code above only modify the recycle pool size of item with type = 0, it you has more than one type in your adapter, you should update recycle pool size for each type.

Set Adapters

  • You can use DelegateAdapter for as a root adapter to make combination of your own adapters. Just make it extend DelegateAdapter.Adapter and overrides onCreateLayoutHelper method.
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, hasConsistItemType);
recycler.setAdapter(delegateAdapter);

// Then you can set sub- adapters

delegateAdapter.setAdapters(adapters);

// or
CustomAdapter adapter = new CustomAdapter(data, new GridLayoutHelper());
delegateAdapter.addAdapter(adapter);

// call notify change when data changes
adapter.notifyDataSetChanged();

Attention: When hasConsistItemType = true, items with same type value in different sub-adapters share the same type, their view would be reused during scroll. When hasConsistItemType = false, items with same type value in different sub-adapters do not share the same type internally.

  • The other way to set adapter is extending VirtualLayoutAdapter and implementing it to make deep combination to your business code.
public class MyAdapter extends VirtualLayoutAdapter {
   ......
}

MyAdapter myAdapter = new MyAdapter(layoutManager);

//create layoutHelper list
List<LayoutHelper> helpers = new LinkedList<>();
GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(4);
gridLayoutHelper.setItemCount(25);
helpers.add(gridLayoutHelper);

GridLayoutHelper gridLayoutHelper2 = new GridLayoutHelper(2);
gridLayoutHelper2.setItemCount(25);
helpers.add(gridLayoutHelper2);

//set layoutHelper list to adapter
myAdapter.setLayoutHelpers(helpers);

//set adapter to recyclerView
recycler.setAdapter(myAdapter);

In this way, one thing you should note is that you should call setLayoutHelpers when the data of Adapter changes.

Config proguard

Add following configs in your proguard file if your app is released with proguard.

-keepattributes InnerClasses
-keep class com.alibaba.android.vlayout.ExposeLinearLayoutManagerEx { *; }
-keep class android.support.v7.widget.RecyclerView$LayoutParams { *; }
-keep class android.support.v7.widget.RecyclerView$ViewHolder { *; }
-keep class android.support.v7.widget.ChildHelper { *; }
-keep class android.support.v7.widget.ChildHelper$Bucket { *; }
-keep class android.support.v7.widget.RecyclerView$LayoutManager { *; }

Demo

Demo Project

FAQ

Read FAQ(In Chinese language only now) before submitting issue: FAQ。

Layout Attributes

Each layoutHelper has a few attributes to control its layout style. See this to read more.

Contributing

Before you open an issue or create a pull request, please read Contributing Guide first.

LICENSE

Vlayout is available under the MIT license.