Convert Figma logo to code with AI

markushi logoandroid-circlebutton

Circle button widget for Android

1,470
360
1,470
11

Top Related Projects

Android Circular Progress Button

Create circular ProgressBar in Android ⭕

Lollipop ViewAnimationUtils.createCircularReveal for everyone 4.0+

Material progress circle around any FloatingActionButton. 100% Guidelines.

Quick Overview

Android-CircleButton is a custom Android view that creates a circular button with a material-like ripple effect. It provides an easy way to implement circular buttons with animations in Android applications, enhancing the user interface with a modern and visually appealing design element.

Pros

  • Simple implementation of circular buttons with ripple effects
  • Customizable appearance through XML attributes
  • Smooth animations for button state changes
  • Compatible with older Android versions (API 14+)

Cons

  • Limited to circular shape only
  • May require additional customization for complex use cases
  • Not actively maintained (last update was in 2016)
  • Lacks some modern Android features and optimizations

Code Examples

  1. Basic implementation in XML layout:
<at.markushi.ui.CircleButton
    android:layout_width="64dip"
    android:layout_height="64dip"
    android:src="@drawable/ic_action_tick"
    app:cb_color="#99CC00"
    app:cb_pressedRingWidth="8dip" />
  1. Changing button color programmatically:
CircleButton button = findViewById(R.id.myCircleButton);
button.setColor(Color.RED);
  1. Setting click listener:
CircleButton button = findViewById(R.id.myCircleButton);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle button click
    }
});

Getting Started

  1. Add the dependency to your build.gradle file:
dependencies {
    implementation 'com.github.markushi:android-circlebutton:1.1'
}
  1. Add the CircleButton to your layout XML:
<at.markushi.ui.CircleButton
    android:id="@+id/myCircleButton"
    android:layout_width="64dip"
    android:layout_height="64dip"
    android:src="@drawable/my_icon"
    app:cb_color="#FF4081"
    app:cb_pressedRingWidth="8dip" />
  1. Reference the button in your Activity or Fragment:
CircleButton circleButton = findViewById(R.id.myCircleButton);
circleButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle button click
    }
});

Competitor Comparisons

Android Circular Progress Button

Pros of circular-progress-button

  • More comprehensive progress animation options, including indeterminate and error states
  • Supports morphing between button states (e.g., from normal to progress to complete)
  • Offers more customization options for button appearance and behavior

Cons of circular-progress-button

  • Slightly more complex implementation due to additional features
  • May have a steeper learning curve for basic use cases
  • Requires more configuration to achieve simple circular button functionality

Code Comparison

circular-progress-button:

<com.dd.CircularProgressButton
    android:layout_width="196dp"
    android:layout_height="64dp"
    android:textColor="@color/cpb_white"
    android:textSize="18sp"
    app:cpb_textComplete="@string/Complete"
    app:cpb_textError="@string/Error"
    app:cpb_textIdle="@string/Upload" />

android-circlebutton:

<at.markushi.ui.CircleButton
    android:layout_width="64dip"
    android:layout_height="64dip"
    android:src="@drawable/ic_action_tick"
    app:cb_color="#99CC00"
    app:cb_pressedRingWidth="8dip" />

The code comparison shows that circular-progress-button offers more built-in text state options, while android-circlebutton focuses on a simpler implementation with customizable colors and pressed state effects.

Create circular ProgressBar in Android ⭕

Pros of CircularProgressBar

  • More customization options, including gradient colors and background progress
  • Supports both determinate and indeterminate progress modes
  • Actively maintained with recent updates and bug fixes

Cons of CircularProgressBar

  • Larger library size due to additional features
  • Slightly more complex implementation for basic use cases
  • May require more configuration to achieve simple circular button functionality

Code Comparison

CircularProgressBar:

val circularProgressBar = findViewById<CircularProgressBar>(R.id.circularProgressBar)
circularProgressBar.apply {
    progress = 65f
    progressMax = 100f
    progressBarColor = Color.BLUE
    backgroundProgressBarColor = Color.GRAY
}

android-circlebutton:

CircleButton circleButton = (CircleButton) findViewById(R.id.circleButton);
circleButton.setColor(Color.BLUE);
circleButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle click event
    }
});

CircularProgressBar offers more extensive customization options and progress tracking functionality, while android-circlebutton provides a simpler implementation for basic circular button needs. The choice between the two depends on the specific requirements of your project, such as whether you need progress tracking or just a clickable circular button.

Lollipop ViewAnimationUtils.createCircularReveal for everyone 4.0+

Pros of CircularReveal

  • Offers a more versatile circular reveal animation that can be applied to any view
  • Provides backward compatibility for pre-Lollipop devices
  • Allows for customization of the reveal animation's duration and interpolator

Cons of CircularReveal

  • Requires more setup and configuration compared to the simpler CircleButton
  • May have a slightly higher performance overhead due to its more complex animations
  • Less focused on button-specific functionality

Code Comparison

CircularReveal:

ViewAnimationUtils.createCircularReveal(
    view,
    centerX,
    centerY,
    startRadius,
    endRadius
).start();

CircleButton:

CircleButton circleButton = (CircleButton) findViewById(R.id.circleButton);
circleButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle click event
    }
});

CircularReveal offers more flexibility for creating circular reveal animations on any view, while CircleButton provides a simpler implementation specifically for circular buttons. CircularReveal requires more setup but allows for greater customization of the animation, whereas CircleButton is more straightforward to use but limited to button functionality.

Material progress circle around any FloatingActionButton. 100% Guidelines.

Pros of FABProgressCircle

  • Integrates seamlessly with existing Floating Action Buttons (FABs)
  • Provides a circular progress indicator around the FAB
  • Offers customizable colors and animation durations

Cons of FABProgressCircle

  • Limited to circular progress indicators only
  • Requires more setup and configuration compared to android-circlebutton
  • May have a steeper learning curve for beginners

Code Comparison

FABProgressCircle:

<com.github.jorgecastilloprz.FABProgressCircle
    android:id="@+id/fabProgressCircle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</com.github.jorgecastilloprz.FABProgressCircle>

android-circlebutton:

<at.markushi.ui.CircleButton
    android:id="@+id/circleButton"
    android:layout_width="64dip"
    android:layout_height="64dip"
    android:src="@drawable/ic_action_tick"
    app:cb_color="#99CC00"
    app:cb_pressedRingWidth="8dip" />

FABProgressCircle offers more flexibility in terms of progress indication around existing FABs, while android-circlebutton provides a simpler, self-contained circular button implementation. The choice between the two depends on specific project requirements and design preferences.

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

DEPRECATED

This library is deprecated and no new development is taking place. Consider using a FAB(Floating action button) instead.

E.g. the Android Design Support Library offers a FAB implementation.

android-circlebutton

Circle button widget for Android

Button Example

Download an example apk

Gradle dependency build.gradle

repositories {
    mavenCentral()
    mavenLocal()
}

...

dependencies {
    compile 'com.github.markushi:circlebutton:1.1'
}

Example Usage:

<FrameLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent" >

	<at.markushi.ui.CircleButton
		android:layout_width="64dip"
		android:layout_height="64dip"
		android:src="@drawable/ic_action_tick"
		app:cb_color="#99CC00"
		app:cb_pressedRingWidth="8dip" />

</FrameLayout>