Convert Figma logo to code with AI

Ramotion logogarland-view-android

:octocat: ≡ GarlandView seamlessly transitions between multiple lists of content. Made by @Ramotion

1,837
255
1,837
0

Top Related Projects

8,500

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

7,679

A declarative framework for building efficient UIs on Android.

Render After Effects animations natively on Android and iOS, Web, and React Native

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

A Material Design ViewPager easy to use library

Cute view animation collection.

Quick Overview

Garland View Android is an open-source UI library developed by Ramotion for creating a garland-like scrolling animation effect in Android applications. It provides a unique and visually appealing way to display a list of items, where the selected item is prominently displayed in the center while other items are partially visible on the sides.

Pros

  • Offers a distinctive and engaging user interface element
  • Smooth and fluid animations for an enhanced user experience
  • Customizable appearance and behavior to fit various app designs
  • Well-documented and easy to integrate into existing Android projects

Cons

  • May not be suitable for all types of content or app designs
  • Requires careful consideration of performance impact on older devices
  • Limited to horizontal scrolling, which may not fit all use cases
  • Learning curve for developers unfamiliar with custom view implementations

Code Examples

  1. Adding GarlandView to your layout:
<com.ramotion.garlandview.GarlandView
    android:id="@+id/garlandView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:itemMargin="10dp"
    app:otherItemAlpha="0.3"
    app:otherItemScale="0.8" />
  1. Implementing a custom adapter:
class MyAdapter(context: Context) : GarlandAdapter<MyViewHolder>(context) {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
        return MyViewHolder(view)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        // Bind your data to the view holder
    }
}
  1. Setting up the GarlandView in your activity:
val garlandView = findViewById<GarlandView>(R.id.garlandView)
val adapter = MyAdapter(this)
garlandView.adapter = adapter

Getting Started

To use Garland View Android in your project, follow these steps:

  1. Add the JitPack repository to your project's build.gradle file:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.Ramotion:garland-view-android:0.1.0'
}
  1. Sync your project with Gradle files.

  2. Add the GarlandView to your layout XML and implement a custom adapter as shown in the code examples above.

  3. Initialize the GarlandView in your activity or fragment and set the adapter.

Competitor Comparisons

8,500

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

Pros of Epoxy

  • More versatile and flexible 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 API
  • Requires more setup and boilerplate code for simple use cases
  • May be overkill for projects with simpler UI requirements

Code Comparison

Garland-view-android:

val garlandView = findViewById<GarlandView>(R.id.garland_view)
garlandView.setAdapter(GarlandAdapter(itemsList))

Epoxy:

class MyEpoxyController : EpoxyController() {
    override fun buildModels() {
        itemsList.forEach { item ->
            itemModel {
                id(item.id)
                title(item.title)
            }
        }
    }
}

Epoxy offers a more programmatic approach to building RecyclerView layouts, allowing for greater flexibility and customization. Garland-view-android, on the other hand, provides a simpler API for creating a specific type of scrolling layout. While Epoxy is more powerful and versatile, Garland-view-android may be easier to implement for its specific use case.

7,679

A declarative framework for building efficient UIs on Android.

Pros of Litho

  • More comprehensive UI framework for building efficient UIs at scale
  • Declarative API for easier component composition and state management
  • Better performance optimization through background layout calculations

Cons of Litho

  • Steeper learning curve due to its unique programming model
  • Requires more setup and integration compared to simpler UI libraries
  • Less suitable for small projects or quick prototypes

Code Comparison

Garland-view-android (XML layout):

<com.ramotion.garlandview.TailRecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:itemLayout="@layout/item_layout" />

Litho (Java):

@LayoutSpec
class MyComponentSpec {
  @OnCreateLayout
  static Component onCreateLayout(ComponentContext c) {
    return Text.create(c)
        .text("Hello World")
        .textSizeDip(50)
        .build();
  }
}

Garland-view-android focuses on providing a specific UI component for creating a garland-style view, while Litho offers a more comprehensive framework for building complex UIs. Garland-view-android is easier to integrate for its specific use case, but Litho provides more flexibility and performance optimizations for large-scale applications.

Render After Effects animations natively on Android and iOS, Web, and React Native

Pros of lottie-android

  • Supports complex animations created in Adobe After Effects
  • Extensive documentation and community support
  • Widely adopted in the industry with frequent updates

Cons of lottie-android

  • Larger library size compared to garland-view-android
  • Steeper learning curve for designers and developers
  • May impact app performance with complex animations

Code Comparison

lottie-android:

val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
animationView.setAnimation(R.raw.animation)
animationView.playAnimation()

garland-view-android:

val garlandView = findViewById<GarlandView>(R.id.garland_view)
garlandView.setAdapter(adapter)
garlandView.setItemTransformer(transformer)

lottie-android offers a more straightforward way to implement complex animations, while garland-view-android provides a simpler approach for creating a specific UI component. The code snippets demonstrate that lottie-android focuses on playing animations, whereas garland-view-android is tailored for creating a custom view with transformations.

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

Pros of recyclerview-animators

  • More versatile, offering a wide range of animation options for RecyclerView items
  • Easier to implement and customize for different types of animations
  • Actively maintained with regular updates and improvements

Cons of recyclerview-animators

  • Focuses solely on RecyclerView animations, lacking the unique visual style of garland-view-android
  • May require more code to achieve complex, custom animations compared to garland-view-android's pre-built solution

Code Comparison

recyclerview-animators:

val animator = SlideInLeftAnimator()
recyclerView.itemAnimator = animator

garland-view-android:

val garlandView = GarlandView(this)
garlandView.setAdapter(adapter)

recyclerview-animators provides a more flexible approach to animations, allowing developers to easily apply various pre-built animations or create custom ones. It's well-suited for projects requiring diverse animation styles across different RecyclerViews.

garland-view-android, on the other hand, offers a specific, visually appealing animation style out of the box. It's ideal for projects seeking a unique, garland-like scrolling effect without the need for extensive customization.

Both libraries have their merits, and the choice between them depends on the project's specific requirements and desired visual aesthetics.

A Material Design ViewPager easy to use library

Pros of MaterialViewPager

  • More comprehensive UI components, including Material Design elements
  • Better documentation and examples for implementation
  • Higher number of stars and forks, indicating wider community adoption

Cons of MaterialViewPager

  • Less frequent updates and maintenance compared to garland-view-android
  • More complex implementation due to additional features and customization options
  • Potentially higher resource consumption due to richer UI elements

Code Comparison

MaterialViewPager:

mViewPager = (MaterialViewPager) findViewById(R.id.materialViewPager);
mViewPager.getViewPager().setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
    @Override
    public Fragment getItem(int position) {
        return RecyclerViewFragment.newInstance();
    }
    // ... other methods
});

garland-view-android:

GarlandView garlandView = findViewById(R.id.garland_view);
garlandView.setAdapter(new GarlandAdapter(items));
garlandView.setOnItemClickListener((itemView, item) -> {
    // Handle item click
});

Both libraries offer unique UI components for Android applications. MaterialViewPager provides a more feature-rich solution with Material Design elements, while garland-view-android focuses on a specific, visually appealing scrolling effect. The choice between them depends on the specific UI requirements and complexity of the project.

Cute view animation collection.

Pros of AndroidViewAnimations

  • Offers a wide variety of pre-built animations for Android views
  • Easy to implement with a simple API
  • Supports chaining multiple animations together

Cons of AndroidViewAnimations

  • Limited to basic view animations, lacking more complex UI interactions
  • May not provide as smooth transitions for intricate UI designs
  • Less suitable for creating custom, app-specific animations

Code Comparison

AndroidViewAnimations:

YoYo.with(Techniques.Tada)
    .duration(700)
    .repeat(5)
    .playOn(findViewById(R.id.example));

garland-view-android:

val garlandView = findViewById<GarlandView>(R.id.garland_view)
garlandView.setAdapter(GarlandAdapter(itemsList))

AndroidViewAnimations provides a simple way to apply pre-defined animations to views, while garland-view-android offers a more specialized solution for creating a specific UI component with built-in animations.

AndroidViewAnimations is better suited for quick, general-purpose animations across an app, whereas garland-view-android excels at creating a unique, visually appealing list view with a particular animation style.

The choice between these libraries depends on the specific needs of your project. If you require a variety of simple animations for different views, AndroidViewAnimations might be more appropriate. However, if you're looking to implement a distinctive, animated list view, garland-view-android could be the better option.

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

GARLAND VIEW [JAVA]

Garland View seamlessly transitions between multiple lists of content


We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:


Twitter Donate

Check this library on other platforms:

Requirements

  • Android 4.4 KitKat (API lvl 19) or greater
  • Your favorite IDE

Installation

Just download the package from here and add it to your project classpath, or just use the maven repo:

Gradle:

compile 'com.ramotion.garlandview:garland-view:0.3.3'

SBT:

libraryDependencies += "com.ramotion.garlandview" % "garland-view" % "0.3.3"

Maven:

<dependency>
    <groupId>com.ramotion.garlandview</groupId>
    <artifactId>garland-view</artifactId>
    <version>0.3.3</version>
</dependency>

Basic usage

GarlandView consists of classes for inner items that are scrolled vertically and outer items that are scrolled horizontally, and each of which contains one inner item.

First of all, you need to implement the classes necessary to create internal items: InnerItem and InnerAdapter.

InnerAdapter is an abstract class inherited from RecyclerView.Adapter. It works only with InnerItem - ViewHolder.

In InnerItem, you need to override the getInnerLayout method, which must return the main layout of the inner item.

Next, you need to override the classes required for external items: HeaderItem and HeaderAdapter.

HeaderAdapter is an abstract class inherited from RecyclerView.Adapter, It works only with HeaderItem - ViewHolder.

In HeaderItem, you need to redefine 4 methods: getHeader, getHeaderAlphaView, isScrolling, getViewGroup. The method getViewGroup should return InnerRecyclerView. The isScrolling method must return the InnerRecyclerView's scrolling state. The getHeaderAlpha method should return an alpha-layout, which will be used for dimming (hiding header's views). The getHeader method must return the main layout of the header, an outer item.

Finally, place TailRecyclerView in the Activity's layout. Next, create a TailLayoutManager and specify it as a LayoutManager for TailRecyclerView.

Here are the attributes of TailRecyclerView you can specify in the XML layout:

  • itemStart - Outer item left and right offset size.
  • itemGap - Distance between outer items.

🗂 Check this library on other language:

📄 License

Garland View Android is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

📱 Get the Showroom App for Android to give it a try

Try this UI component and more like this in our Android app. Contact us if interested.