SpeedometerComposeView

This widget is drawn using Compose API only, which makes it work on all platforms that support Compose UI. Speedometer widget for Compose is an amazing, powerful, and multi shape ⚡ , you can change (colors, bar width, shape, text, font ...everything !!), see project on GitHub.

SPEEDOMETER

Current speedometers available:

Normal	GLOW	NEON	GRADIENT

Downloads

1. Download the APK file from here DOWNLOAD

Video Preview

Full Mode-> https://www.youtube.com/shorts/ZCHQigQF8ac

Glow Mode-> https://www.youtube.com/shorts/3mPNlcWVTmw

Requirements to use:

• Minimum API version 21

Add Jit Pack to your dependency management.

	dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

Then, add the speedometer dependencies according to your project:

Compose To Your Project

Go to build.gradle.kts

dependencies {
    implementation("com.github.rameshvoltella:SpeedometerComposeView:3.0.0")
}

USAGE

This just a sample you can use however you want based on the Parameters sheet below

SpeedometerComposeView(
    speedMeterMaxRange = 220,
    currentSpeedValue = 80,
    needleColor = Color.Red,
    speedTextColor = colorResource(
        id = R.color.white,
    ),
    movingSpeedTextColor = Color.White,
    arcWidth = 50f,
    speedometerMode = Mode.NORMAL,
    glowMulticolor = false,
    glowSingleColor = Color.Red,
    speedFont = ResourcesCompat.getFont(context, R.font.font_speed),
    speedometerNumberFont = ResourcesCompat.getFont(context, R.font.font_speed_digits),
    glowRadius = 28f,
    glowSpeedPoints = true,
    baseArcColorConstant = Color(0x33FF0000)
)

Parameters

Parameter	Description	Data Type
currentSpeedValue	The current speed value	Int
speedMeterMaxRange	The maximum range of the speed meter	Int
startColorRange	The start color for the speed range	Color
startColorRangeSecondary	The secondary start color for the speed range	Color
mediumColorRange	The medium color for the speed range	Color
mediumColorRangeSecondary	The secondary medium color for the speed range	Color
endColorRange	The end color for the speed range	Color
endColorRangeSecondary	The secondary end color for the speed range	Color
needleColor	The color of the needle	Color
speedTextColor	The color of the speed text	Color
movingSpeedTextColor	The color of the moving speed text	Color
speedFont	The font for the speed text	Typeface?
speedometerNumberFont	The font for the speedometer number	Typeface?
arcWidth	The width of the arc	Float
speedometerMode	The mode of the speedometer	Mode
gradientColorList	The list of colors for the gradient	List<Color>
gradientType	The type of gradient	GradientType
neonColor	The color for neon effect	Color
neonCenterColor	The center color for neon effect	Color
glowMulticolor	Whether to use multicolor glow effect	Boolean
glowSingleColor	The single color for glow effect	Color
glowRadius	The radius of the glow effect	Float
glowSpeedPoints	Whether to use speed points in the glow effect	Boolean
baseArcColorConstant	The base color for the arc	Color?
needleCircleColor	The color for the needle circle	Color?
needleIndicatorColor	The color for the needle indicator	Color?
needleSemiIndicatorColor	The color for the semi needle indicator	Color
movingSpeedTextExtraPadding	Extra padding for the moving speed text	Float

ARC MODES

Mode	Description
NORMAL	Draws a solid arc with a single color.
GLOW	Draws an arc with a glowing effect.
GRADIENT	Draws an arc with a gradient effect.
NEON	Draws an arc with a neon-like effect.

GRADIENT ARC MODE - TYPES

GradientType	Description
LINEAR	Draws a linear gradient.
HORIZONTAL	Draws a horizontal gradient.
VERTICAL	Draws a vertical gradient.
RADIAL	Draws a radial gradient.
SWEEP	Draws a sweep gradient.

Speedometer using specific size

Sometimes there may size issue in that case you can use a box to specific size

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    // Spacer for top margin
    Spacer(modifier = Modifier.height(16.dp))

    // Title
    Text(
        text = "Speedometer using specific size",
        style = TextStyle(
            fontWeight = FontWeight.Bold,
            fontSize = 24.sp
        )
    )

    // Spacer for vertical space between title and SpeedometerComposeView
    Spacer(modifier = Modifier.height(16.dp))

    // SpeedometerComposeView
    Box(
        modifier = Modifier
            .width(450.dp)
            .height(450.dp)
            .fillMaxSize() // Center the Box within the Column
    ) {
        SpeedometerComposeView(
            speedMeterMaxRange = 80,
            currentSpeedValue = speedOver.value.toInt(),
            needleColor = Color.Red,
            speedTextColor = colorResource(id = R.color.white),
            movingSpeedTextColor = Color.White,
            arcWidth = 50f,
            speedometerMode = speedoMeterMode,
            glowMulticolor = false,
            glowSingleColor = Color.Red,
            speedFont = currentSpeedTypeFace,
            speedometerNumberFont = currentSpeedometerNumberTypeFace,
            glowRadius = 28f,
            glowSpeedPoints = glowPoints,
            baseArcColorConstant = basicArcColor
        )
    }
}

MY GITHUB TROPHY

Contributing

I am welcome contributions from the community to improve the SpeedometerComposeView

1. Fork the repository.
2. Create a new branch (git checkout -b feature/improvement).
3. Make your changes and commit them (git commit -am 'Add feature/improvement').
4. Push to the branch (git push origin feature/improvement).
5. Create a new Pull Request.