Convert Figma logo to code with AI

daimajia logoNumberProgressBar

A beautiful, slim Android ProgressBar.

6,067
1,399
6,067
29

Top Related Projects

CircleProgress, DonutProgress, ArcProgress

[Android] Round Corner Progress Bar Library for Android

Cute view animation collection.

Android loading animations

Quick Overview

NumberProgressBar is an Android library that provides a customizable progress bar with a numerical indicator. It offers a sleek and modern design, allowing developers to easily integrate a visually appealing progress bar into their Android applications.

Pros

  • Easy to implement and customize
  • Smooth animations and transitions
  • Supports both horizontal and vertical orientations
  • Highly configurable appearance (colors, text size, etc.)

Cons

  • Limited to Android platform
  • May require additional work to integrate with specific design patterns or frameworks
  • Not actively maintained (last update was several years ago)

Code Examples

  1. Basic implementation:
NumberProgressBar progressBar = findViewById(R.id.number_progress_bar);
progressBar.setProgress(50);

This code initializes the NumberProgressBar and sets its progress to 50%.

  1. Customizing appearance:
NumberProgressBar progressBar = findViewById(R.id.number_progress_bar);
progressBar.setProgressTextColor(Color.BLACK);
progressBar.setReachedBarColor(Color.BLUE);
progressBar.setUnreachedBarColor(Color.GRAY);

This example demonstrates how to customize the colors of the progress bar.

  1. Animating progress:
NumberProgressBar progressBar = findViewById(R.id.number_progress_bar);
ObjectAnimator animator = ObjectAnimator.ofInt(progressBar, "progress", 0, 100);
animator.setDuration(5000);
animator.start();

This code creates an animation that increases the progress from 0 to 100 over 5 seconds.

Getting Started

  1. Add the dependency to your build.gradle file:
dependencies {
    implementation 'com.daimajia.numberprogressbar:library:1.4@aar'
}
  1. Add the NumberProgressBar to your layout XML:
<com.daimajia.numberprogressbar.NumberProgressBar
    android:id="@+id/number_progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
  1. Initialize and use the NumberProgressBar in your Activity or Fragment:
NumberProgressBar progressBar = findViewById(R.id.number_progress_bar);
progressBar.setProgress(75);

This sets up the NumberProgressBar in your Android project and sets its progress to 75%.

Competitor Comparisons

CircleProgress, DonutProgress, ArcProgress

Pros of CircleProgress

  • Offers circular progress visualization, providing a unique and visually appealing design
  • Supports customizable colors, stroke width, and background options
  • Includes animation features for smooth progress transitions

Cons of CircleProgress

  • Limited to circular progress representation, less versatile than linear progress bars
  • May require more screen space compared to linear progress bars
  • Less suitable for precise numerical representation of progress

Code Comparison

NumberProgressBar:

<com.daimajia.numberprogressbar.NumberProgressBar
    android:id="@+id/number_progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

CircleProgress:

<com.github.uknownothingsnow.circleprogress.CircleProgress
    android:id="@+id/circle_progress"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:cp_progress="75" />

Both libraries offer simple implementation in XML layouts. NumberProgressBar provides a linear progress bar with numerical representation, while CircleProgress offers a circular progress visualization. The choice between the two depends on the specific design requirements and user interface preferences of the application.

[Android] Round Corner Progress Bar Library for Android

Pros of RoundCornerProgressBar

  • Offers more customization options, including corner radius and background color
  • Supports multiple progress bar styles (linear, circular, icon)
  • Provides animation features for smoother progress updates

Cons of RoundCornerProgressBar

  • Larger library size due to additional features
  • Slightly more complex implementation for basic use cases
  • May require more configuration to achieve desired appearance

Code Comparison

NumberProgressBar:

NumberProgressBar progressBar = findViewById(R.id.number_progress_bar);
progressBar.setProgress(50);
progressBar.setMax(100);

RoundCornerProgressBar:

RoundCornerProgressBar progressBar = findViewById(R.id.progress_bar);
progressBar.setProgress(50);
progressBar.setMax(100);
progressBar.setRadius(10);
progressBar.setProgressColor(Color.BLUE);

Both libraries provide similar basic functionality for setting progress and maximum values. However, RoundCornerProgressBar offers additional methods for customization, such as setting corner radius and progress color, which are not available in NumberProgressBar.

RoundCornerProgressBar is more suitable for projects requiring highly customizable progress bars with various styles and animations. NumberProgressBar is a simpler option for basic number-based progress indicators with a clean, minimalist design.

Cute view animation collection.

Pros of AndroidViewAnimations

  • Offers a wide variety of animations for Android views
  • Provides easy-to-use methods for applying animations
  • Supports chaining multiple animations together

Cons of AndroidViewAnimations

  • Larger library size compared to NumberProgressBar
  • May have a steeper learning curve for beginners
  • Not focused on a specific UI element like NumberProgressBar

Code Comparison

NumberProgressBar:

NumberProgressBar progressBar = findViewById(R.id.number_progress_bar);
progressBar.setProgress(50);
progressBar.setMax(100);

AndroidViewAnimations:

YoYo.with(Techniques.FadeIn)
    .duration(700)
    .repeat(5)
    .playOn(findViewById(R.id.animation_target));

Key Differences

  • NumberProgressBar focuses on a single UI element (progress bar), while AndroidViewAnimations provides animations for various views
  • NumberProgressBar is simpler to implement for its specific use case
  • AndroidViewAnimations offers more flexibility and customization options for animations

Use Cases

  • NumberProgressBar: Best for applications needing a customizable progress bar
  • AndroidViewAnimations: Ideal for projects requiring diverse animations across multiple UI elements

Community and Support

Both repositories are maintained by the same developer (daimajia), but AndroidViewAnimations has a larger community and more frequent updates due to its broader scope and applicability.

Android loading animations

Pros of Android-SpinKit

  • Offers a wide variety of animated loading indicators
  • Highly customizable with multiple styles and colors
  • Smooth animations with good performance

Cons of Android-SpinKit

  • Larger library size due to multiple animation options
  • May require more setup and configuration
  • Could be considered visually complex for simple use cases

Code Comparison

NumberProgressBar:

<com.daimajia.numberprogressbar.NumberProgressBar
    android:id="@+id/number_progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Android-SpinKit:

<com.github.ybq.android.spinkit.SpinKitView
    android:id="@+id/spin_kit"
    style="@style/SpinKitView.Large.Circle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:SpinKit_Color="@color/colorAccent" />

NumberProgressBar focuses on displaying progress numerically with a simple bar, while Android-SpinKit provides various animated loading indicators. NumberProgressBar is more suitable for showing precise progress, whereas Android-SpinKit is better for indeterminate loading states or when a more visually appealing loader is desired. The choice between the two depends on the specific requirements of the app and the desired user experience.

Pros of discreteSeekBar

  • Offers discrete steps for more precise value selection
  • Provides a customizable indicator bubble for current value display
  • Supports both horizontal and vertical orientations

Cons of discreteSeekBar

  • More complex implementation compared to NumberProgressBar
  • May have a steeper learning curve for developers
  • Limited to seek bar functionality, less suitable for simple progress indication

Code Comparison

NumberProgressBar:

NumberProgressBar progressBar = findViewById(R.id.number_progress_bar);
progressBar.setProgress(50);
progressBar.setMax(100);

discreteSeekBar:

DiscreteSeekBar seekBar = findViewById(R.id.discrete_seek_bar);
seekBar.setProgress(50);
seekBar.setMax(100);
seekBar.setNumericTransformer(new DiscreteSeekBar.NumericTransformer() {
    @Override
    public int transform(int value) {
        return value * 2; // Custom value transformation
    }
});

Summary

NumberProgressBar is simpler and more focused on progress indication, while discreteSeekBar offers more advanced features for user input and value selection. The choice between the two depends on the specific requirements of your project, with NumberProgressBar being better suited for straightforward progress displays and discreteSeekBar offering more flexibility for user interaction and customization.

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

Android NumberProgressBar Build Status

Insight.io

The NumberProgressBar is a bar, slim and sexy (every man wants! ).

I decided to do this because I was really tired of android original progress bar. So, I made some change, added more color style for this.

And also you can contribute more color style, or new idea to me.

BTW. My friends also made some other platform's NumberProgressBar:


Demo

NumberProgressBar

Download Demo

Usage


Gradle

dependencies {
   compile 'com.daimajia.numberprogressbar:library:1.4@aar'
}

Maven

<dependency>
    <groupId>com.daimajia.numberprogressbar</groupId>
    <artifactId>library</artifactId>
    <version>1.4</version>
    <type>apklib</type>
</dependency>

Use it in your own code:

	<com.daimajia.numberprogressbar.NumberProgressBar
		android:id="@+id/number_progress_bar"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
	/>

I made some predesign style. You can use them via style property.

Preset color

Use the preset style just like below:

	<com.daimajia.numberprogressbar.NumberProgressBar
		android:id="@+id/number_progress_bar"
		style="@style/NumberProgressBar_Default"
	/>

In the above picture, the style is :

NumberProgressBar_Default NumberProgressBar_Passing_Green NumberProgressBar_Relax_Blue NumberProgressBar_Grace_Yellow NumberProgressBar_Warning_Red NumberProgressBar_Funny_Orange NumberProgressBar_Beauty_Red NumberProgressBar_Twinkle_Night

You can get more beautiful color from kular, and you can also contribute your color style to NumberProgressBar!

Build

run ./gradlew assembleDebug (Mac/Linux)

or

run gradlew.bat assembleDebug (Windows)

Attributes

There are several attributes you can set:

The reached area and unreached area:

  • color
  • height

The text area:

  • color
  • text size
  • visibility
  • distance between reached area and unreached area

The bar:

  • max progress
  • current progress

for example, the default style:

	<com.daimajia.numberprogressbar.NumberProgressBar
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        
	        custom:progress_unreached_color="#CCCCCC"
	        custom:progress_reached_color="#3498DB"
	        
	        custom:progress_unreached_bar_height="0.75dp"
	        custom:progress_reached_bar_height="1.5dp"
	        
	        custom:progress_text_size="10sp"
	        custom:progress_text_color="#3498DB"
	        custom:progress_text_offset="1dp"
	        custom:progress_text_visibility="visible"
	        
	        custom:progress_max="100"
	        custom:progress_current="80"
	         />

About me:

A student in China mainland, I like Google, like Android, like open source, like doing something interesting. :)

If you have some new idea or internship opportunity, please email me !