Skip to content

Latest commit

 

History

History
358 lines (318 loc) · 8.93 KB

README.md

File metadata and controls

358 lines (318 loc) · 8.93 KB
Raw

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.

Jit Pack API

SPEEDOMETER

normal glow

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

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.