Convert Figma logo to code with AI

ongakuer logoCircleIndicator

A lightweight indicator like in nexus 5 launcher

4,266
714
4,266
30

Top Related Projects

Quick solutions for Floating Action Button,RapidFloatingActionButton(RFAB)

Android loading animations

An page indicator for Android ViewPager

Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

Quick Overview

CircleIndicator is an Android library that provides a customizable circular indicator for ViewPager and ViewPager2. It offers a simple and elegant way to display the current page position and total number of pages in a scrollable view, enhancing the user interface of Android applications.

Pros

  • Easy integration with ViewPager and ViewPager2
  • Highly customizable appearance (color, size, spacing, etc.)
  • Smooth animations for page transitions
  • Lightweight and efficient implementation

Cons

  • Limited to circular indicators only
  • Requires additional setup for RecyclerView or custom views
  • May not be suitable for complex pagination scenarios
  • Lacks advanced features like text indicators or combined styles

Code Examples

  1. Basic setup with ViewPager2:
val viewPager: ViewPager2 = findViewById(R.id.viewpager)
val indicator: CircleIndicator3 = findViewById(R.id.indicator)
viewPager.adapter = MyPagerAdapter()
indicator.setViewPager(viewPager)
  1. Customizing indicator appearance:
val indicator: CircleIndicator3 = findViewById(R.id.indicator)
indicator.setIndicatorColor(Color.RED)
indicator.setIndicatorWidth(10)
indicator.setIndicatorHeight(10)
  1. Manually updating indicator:
val indicator: CircleIndicator3 = findViewById(R.id.indicator)
indicator.createIndicators(5, 0)
indicator.animatePageSelected(2)

Getting Started

  1. Add the dependency to your build.gradle file:
dependencies {
    implementation 'me.relex:circleindicator:2.1.6'
}
  1. Add the CircleIndicator to your layout XML:
<me.relex.circleindicator.CircleIndicator3
    android:id="@+id/indicator"
    android:layout_width="match_parent"
    android:layout_height="48dp"/>
  1. In your Activity or Fragment, set up the indicator with ViewPager2:
val viewPager: ViewPager2 = findViewById(R.id.viewpager)
val indicator: CircleIndicator3 = findViewById(R.id.indicator)
viewPager.adapter = MyPagerAdapter()
indicator.setViewPager(viewPager)

Competitor Comparisons

Quick solutions for Floating Action Button,RapidFloatingActionButton(RFAB)

Pros of RapidFloatingActionButton

  • Offers a more complex and feature-rich floating action button implementation
  • Provides customizable label and icon options for the floating action button
  • Supports multiple action items in an expandable menu

Cons of RapidFloatingActionButton

  • More complex to implement and customize compared to the simpler CircleIndicator
  • May have a steeper learning curve for developers new to the library
  • Potentially higher performance overhead due to additional features

Code Comparison

CircleIndicator:

CircleIndicator indicator = findViewById(R.id.indicator);
ViewPager viewPager = findViewById(R.id.viewPager);
indicator.setViewPager(viewPager);

RapidFloatingActionButton:

RapidFloatingActionButton rfaButton = findViewById(R.id.activity_main_rfab);
RapidFloatingActionContent rfaContent = new RapidFloatingActionContent.Builder(this)
    .addItem(0, R.drawable.ic_action_a, "Action A")
    .addItem(1, R.drawable.ic_action_b, "Action B")
    .build();
RapidFloatingActionHelper rfabHelper = new RapidFloatingActionHelper(
    this, rfaLayout, rfaButton, rfaContent
).build();

The code comparison shows that RapidFloatingActionButton requires more setup and configuration compared to CircleIndicator, reflecting its more complex nature and additional features.

Android loading animations

Pros of Android-SpinKit

  • Offers a wider variety of loading animations (8 different styles)
  • Provides more customization options for each animation style
  • Includes a demo app for easy visualization of different styles

Cons of Android-SpinKit

  • Larger library size due to multiple animation styles
  • May require more setup and configuration for specific use cases
  • Less focused on a single, specific indicator type

Code Comparison

CircleIndicator:

CircleIndicator indicator = findViewById(R.id.indicator);
ViewPager viewPager = findViewById(R.id.viewPager);
indicator.setViewPager(viewPager);

Android-SpinKit:

ProgressBar progressBar = findViewById(R.id.spin_kit);
Sprite doubleBounce = new DoubleBounce();
progressBar.setIndeterminateDrawable(doubleBounce);

Summary

CircleIndicator is a lightweight, focused library for creating page indicators, particularly useful for ViewPagers. It's simple to implement and efficient for its specific purpose.

Android-SpinKit, on the other hand, offers a diverse set of loading animations, providing developers with more options for creating visually appealing loading indicators. It's more versatile but may be overkill for simple indicator needs.

Choose CircleIndicator for straightforward page indicators, and Android-SpinKit for varied, customizable loading animations across your app.

An page indicator for Android ViewPager

Pros of PageIndicatorView

  • More customization options, including various animation styles and indicator shapes
  • Supports both ViewPager and RecyclerView
  • Offers interactive selection and touch events

Cons of PageIndicatorView

  • Larger library size due to additional features
  • May have a steeper learning curve for basic implementations
  • Requires more configuration for simple use cases

Code Comparison

PageIndicatorView:

val pageIndicatorView = findViewById<PageIndicatorView>(R.id.pageIndicatorView)
pageIndicatorView.count = 5 // Set number of pages
pageIndicatorView.selection = 2 // Set current page
pageIndicatorView.setAnimationType(AnimationType.WORM)

CircleIndicator:

val circleIndicator = findViewById<CircleIndicator>(R.id.circleIndicator)
val viewPager = findViewById<ViewPager>(R.id.viewPager)
circleIndicator.setViewPager(viewPager)

PageIndicatorView offers more customization options out of the box, while CircleIndicator provides a simpler API for basic implementations. PageIndicatorView supports multiple view types and interactive features, making it more versatile but potentially more complex for simple use cases. CircleIndicator focuses on providing a straightforward circle indicator for ViewPager, resulting in a smaller library size and easier integration for basic scenarios.

Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.

Pros of ViewPagerIndicator

  • More customizable with various indicator styles (line, circle, title, etc.)
  • Supports a wider range of Android versions
  • Extensive documentation and examples provided

Cons of ViewPagerIndicator

  • Larger library size due to more features
  • Last updated in 2014, potentially outdated
  • More complex implementation for simple use cases

Code Comparison

ViewPagerIndicator:

CirclePageIndicator indicator = (CirclePageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(pager);
indicator.setSnap(true);

CircleIndicator:

CircleIndicator indicator = (CircleIndicator) findViewById(R.id.indicator);
indicator.setViewPager(viewpager);

Summary

ViewPagerIndicator offers more customization options and styles, making it suitable for complex projects with specific design requirements. It has extensive documentation but hasn't been updated recently.

CircleIndicator is a lightweight alternative, focusing solely on circle indicators. It's easier to implement for simple use cases and is actively maintained. However, it lacks the variety of indicator styles and customization options offered by ViewPagerIndicator.

Choose ViewPagerIndicator for more complex projects requiring diverse indicator styles, and CircleIndicator for simpler implementations focusing on circle indicators with a smaller library footprint.

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

Pros of MPAndroidChart

  • More comprehensive charting library with various chart types (line, bar, pie, etc.)
  • Highly customizable with extensive documentation and examples
  • Active development and large community support

Cons of MPAndroidChart

  • Steeper learning curve due to its complexity and extensive features
  • Larger library size, which may impact app size and performance
  • Potentially overkill for simple indicator or progress visualization needs

Code Comparison

CircleIndicator:

CircleIndicator indicator = findViewById(R.id.indicator);
ViewPager viewPager = findViewById(R.id.viewPager);
indicator.setViewPager(viewPager);

MPAndroidChart:

LineChart chart = findViewById(R.id.chart);
LineData data = new LineData(dataSets);
chart.setData(data);
chart.invalidate();

Summary

CircleIndicator is a lightweight library focused on providing simple and customizable indicators for ViewPagers. It's easy to implement and suitable for basic indicator needs.

MPAndroidChart offers a wide range of charting options and customizations, making it ideal for complex data visualization requirements. However, it may be excessive for simple indicator use cases and requires more effort to implement.

Choose CircleIndicator for straightforward ViewPager indicators, and MPAndroidChart for comprehensive charting and data visualization needs in your Android app.

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

CircleIndicator

A lightweight indicator like in nexus 5 launcher

Download

Maven Central

Gradle

AndroidX
dependencies {
    implementation 'me.relex:circleindicator:2.1.6'
}
Android Support Library
dependencies {
    implementation 'me.relex:circleindicator:1.3.2'
}

Usage

ClassWidget
me.relex.circleindicator.CircleIndicatorViewPager
me.relex.circleindicator.CircleIndicator2RecyclerView
me.relex.circleindicator.CircleIndicator3ViewPager2 (AndroidX)
ViewPager (CircleIndicator)
ViewPager viewpager = (ViewPager) view.findViewById(R.id.viewpager);
viewpager.setAdapter(adapter);

CircleIndicator indicator = (CircleIndicator) view.findViewById(R.id.indicator);
indicator.setViewPager(viewpager);

// optional
adapter.registerDataSetObserver(indicator.getDataSetObserver());
RecyclerView (CircleIndicator2)
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(adapter);

PagerSnapHelper pagerSnapHelper = new PagerSnapHelper();
pagerSnapHelper.attachToRecyclerView(recyclerView);

CircleIndicator2 indicator = view.findViewById(R.id.indicator);
indicator.attachToRecyclerView(recyclerView, pagerSnapHelper);

// optional
adapter.registerAdapterDataObserver(indicator.getAdapterDataObserver());
ViewPager2 (CircleIndicator3)
ViewPager2 viewpager = view.findViewById(R.id.viewpager);
viewpager.setAdapter(mAdapter);

CircleIndicator3 indicator = view.findViewById(R.id.indicator);
indicator.setViewPager(viewpager);

// optional
adapter.registerAdapterDataObserver(indicator.getAdapterDataObserver());
Manual control
CircleIndicator indicator = view.findViewById(R.id.indicator);
indicator.createIndicators(5,0);

indicator.animatePageSelected(2)

XML Properties

<me.relex.circleindicator.CircleIndicator
	android:id="@+id/indicator"
	android:layout_width="match_parent"
	android:layout_height="48dp"/>
PropertiesDefault Value
app:ci_width5dp
app:ci_height5dp
app:ci_margin5dp
app:ci_drawableR.drawable.white_radius
app:ci_drawable_unselectedR.drawable.white_radius
app:ci_animatorR.animator.scale_with_alpha
app:ci_animator_reverse0
app:ci_orientationhorizontal
app:ci_gravitycenter