├── .gitignore ├── .idea ├── .gitignore ├── compiler.xml ├── deploymentTargetDropDown.xml ├── gradle.xml ├── inspectionProfiles │ └── Project_Default.xml ├── kotlinc.xml ├── migrations.xml ├── misc.xml └── vcs.xml ├── FancyProgressBar ├── .gitignore ├── build.gradle.kts ├── consumer-rules.pro ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── muhammadsayed │ │ └── fancyprogressbar │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ └── java │ │ └── com │ │ └── muhammadsayed │ │ └── fancyprogressbar │ │ └── FancyProgressBar.kt │ └── test │ └── java │ └── com │ └── muhammadsayed │ └── fancyprogressbar │ └── ExampleUnitTest.kt ├── README.md ├── app ├── .gitignore ├── build.gradle.kts ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── muhammadsayed │ │ └── fancyprogressbar │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── muhammadsayed │ │ │ └── fancyprogressbar │ │ │ ├── MainActivity.kt │ │ │ └── ui │ │ │ └── theme │ │ │ ├── Color.kt │ │ │ ├── Theme.kt │ │ │ └── Type.kt │ └── res │ │ ├── drawable │ │ ├── ic_launcher_background.xml │ │ └── ic_launcher_foreground.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── themes.xml │ │ └── xml │ │ ├── backup_rules.xml │ │ └── data_extraction_rules.xml │ └── test │ └── java │ └── com │ └── muhammadsayed │ └── fancyprogressbar │ └── ExampleUnitTest.kt ├── build.gradle.kts ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── jitpack.yml └── settings.gradle.kts /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | local.properties 16 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/deploymentTargetDropDown.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19 | 20 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 41 | -------------------------------------------------------------------------------- /.idea/kotlinc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/migrations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /FancyProgressBar/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /FancyProgressBar/build.gradle.kts: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("com.android.library") 3 | id("org.jetbrains.kotlin.android") 4 | id("maven-publish") 5 | } 6 | 7 | android { 8 | namespace = "com.muhammadsayed.fancyprogressbar" 9 | compileSdk = 34 10 | 11 | defaultConfig { 12 | minSdk = 21 13 | 14 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" 15 | consumerProguardFiles("consumer-rules.pro") 16 | } 17 | 18 | buildTypes { 19 | release { 20 | isMinifyEnabled = false 21 | proguardFiles( 22 | getDefaultProguardFile("proguard-android-optimize.txt"), 23 | "proguard-rules.pro" 24 | ) 25 | } 26 | } 27 | buildFeatures { 28 | compose = true 29 | } 30 | composeOptions { 31 | kotlinCompilerExtensionVersion = "1.5.1" 32 | } 33 | compileOptions { 34 | sourceCompatibility = JavaVersion.VERSION_1_8 35 | targetCompatibility = JavaVersion.VERSION_1_8 36 | } 37 | kotlinOptions { 38 | jvmTarget = "1.8" 39 | } 40 | 41 | } 42 | publishing { 43 | publications { 44 | register("release") { 45 | afterEvaluate { 46 | from(components["release"]) 47 | } 48 | } 49 | } 50 | } 51 | dependencies { 52 | 53 | implementation("androidx.core:core-ktx:1.12.0") 54 | implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0") 55 | implementation("androidx.activity:activity-compose:1.8.2") 56 | implementation(platform("androidx.compose:compose-bom:2024.02.02")) 57 | implementation("androidx.compose.ui:ui") 58 | implementation("androidx.compose.ui:ui-graphics") 59 | implementation("androidx.compose.ui:ui-tooling-preview") 60 | implementation("androidx.compose.material3:material3") 61 | testImplementation("junit:junit:4.13.2") 62 | androidTestImplementation("androidx.test.ext:junit:1.1.5") 63 | androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1") 64 | androidTestImplementation(platform("androidx.compose:compose-bom:2024.02.02")) 65 | androidTestImplementation("androidx.compose.ui:ui-test-junit4") 66 | debugImplementation("androidx.compose.ui:ui-tooling") 67 | debugImplementation("androidx.compose.ui:ui-test-manifest") 68 | implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1") 69 | } -------------------------------------------------------------------------------- /FancyProgressBar/consumer-rules.pro: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/FancyProgressBar/consumer-rules.pro -------------------------------------------------------------------------------- /FancyProgressBar/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /FancyProgressBar/src/androidTest/java/com/muhammadsayed/fancyprogressbar/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.muhammadsayed.fancyprogressbar 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.muhammadsayed.fancyprogressbar.test", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /FancyProgressBar/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /FancyProgressBar/src/main/java/com/muhammadsayed/fancyprogressbar/FancyProgressBar.kt: -------------------------------------------------------------------------------- 1 | package com.muhammadsayed.fancyprogressbar 2 | 3 | import androidx.compose.animation.core.animateDpAsState 4 | import androidx.compose.foundation.background 5 | import androidx.compose.foundation.gestures.detectDragGestures 6 | import androidx.compose.foundation.layout.Box 7 | import androidx.compose.foundation.layout.fillMaxSize 8 | import androidx.compose.foundation.layout.offset 9 | import androidx.compose.foundation.layout.width 10 | import androidx.compose.foundation.shape.RoundedCornerShape 11 | import androidx.compose.material3.Text 12 | import androidx.compose.runtime.Composable 13 | import androidx.compose.runtime.LaunchedEffect 14 | import androidx.compose.runtime.derivedStateOf 15 | import androidx.compose.runtime.getValue 16 | import androidx.compose.runtime.mutableFloatStateOf 17 | import androidx.compose.runtime.mutableStateOf 18 | import androidx.compose.runtime.remember 19 | import androidx.compose.runtime.setValue 20 | import androidx.compose.ui.Modifier 21 | import androidx.compose.ui.draw.clip 22 | import androidx.compose.ui.graphics.Color 23 | import androidx.compose.ui.input.pointer.pointerInput 24 | import androidx.compose.ui.layout.layoutId 25 | import androidx.compose.ui.layout.onSizeChanged 26 | import androidx.compose.ui.text.TextStyle 27 | import androidx.compose.ui.unit.Dp 28 | import androidx.compose.ui.unit.IntOffset 29 | import androidx.compose.ui.unit.dp 30 | import androidx.constraintlayout.compose.ConstraintLayout 31 | import androidx.constraintlayout.compose.ConstraintSet 32 | import androidx.constraintlayout.compose.Dimension 33 | import kotlin.math.roundToInt 34 | 35 | @Composable 36 | fun FancyProgressBar( 37 | modifier: Modifier, 38 | progress: Float = 0f.coerceIn(0f, 1f), 39 | leftColor: Color = Color(0xFF212022), 40 | rightColor: Color = Color(0xFF4F42EF), 41 | indicatorColor: Color = Color.White, 42 | textStyle: TextStyle = TextStyle(color = Color.White), 43 | cornerRaduis: Dp = 10.dp, 44 | onDragEnd: (Float) -> Unit, 45 | onDrag: (Float) -> Unit, 46 | ) { 47 | 48 | var offsetX by remember { mutableFloatStateOf(0f) } 49 | var progressBarWidthInDp by remember { mutableStateOf(Dp(0f)) } 50 | 51 | val guidelinePercentage by remember { 52 | derivedStateOf { 53 | Dp(offsetX) / progressBarWidthInDp 54 | } 55 | } 56 | 57 | LaunchedEffect(progress) { 58 | offsetX = progress.coerceIn(0f, 1f).times(progressBarWidthInDp.value) 59 | } 60 | val isAnimatePercentageUp by remember { 61 | derivedStateOf { 62 | guidelinePercentage < 0.2f || guidelinePercentage > 0.8f 63 | } 64 | } 65 | 66 | val animation = animateDpAsState( 67 | targetValue = if (isAnimatePercentageUp) -Dp(35f) else Dp(0f), 68 | label = "Text Animation" 69 | ) 70 | Box( 71 | modifier = modifier 72 | .clip( 73 | RoundedCornerShape(10.dp) 74 | ) 75 | .onSizeChanged { 76 | progressBarWidthInDp = it.width.dp 77 | } 78 | ) { 79 | 80 | val constraints = ConstraintSet { 81 | //References of widgets in the layout 82 | val leftBox = createRefFor("leftBox") 83 | val rightBox = createRefFor("rightBox") 84 | val indicator = createRefFor("indicator") 85 | 86 | val leftPercentage = createRefFor("leftPercentage") 87 | val rightPercentage = createRefFor("rightPercentage") 88 | 89 | val guideLine = createGuidelineFromStart(guidelinePercentage) 90 | 91 | //set constraints to the widgets 92 | constrain(leftBox) 93 | { 94 | top.linkTo(parent.top) 95 | bottom.linkTo(parent.bottom) 96 | start.linkTo(parent.start) 97 | end.linkTo(guideLine, margin = 5.dp) 98 | width = Dimension.fillToConstraints 99 | height = Dimension.preferredValue(40.dp) 100 | } 101 | 102 | 103 | constrain(leftPercentage) 104 | { 105 | top.linkTo(leftBox.top) 106 | bottom.linkTo(leftBox.bottom) 107 | start.linkTo(leftBox.start, margin = 5.dp) 108 | } 109 | 110 | constrain(rightPercentage) 111 | { 112 | top.linkTo(leftBox.top) 113 | bottom.linkTo(leftBox.bottom) 114 | end.linkTo(rightBox.end, margin = 5.dp) 115 | } 116 | 117 | constrain(rightBox) 118 | { 119 | top.linkTo(parent.top) 120 | bottom.linkTo(parent.bottom) 121 | end.linkTo(parent.end) 122 | start.linkTo(guideLine, margin = 10.dp) 123 | width = Dimension.fillToConstraints 124 | height = Dimension.preferredValue(40.dp) 125 | } 126 | 127 | constrain(indicator) 128 | { 129 | top.linkTo(parent.top) 130 | bottom.linkTo(parent.bottom) 131 | height = Dimension.preferredValue(40.dp) 132 | } 133 | 134 | } 135 | ConstraintLayout( 136 | constraints, 137 | modifier = Modifier.fillMaxSize() 138 | ) { 139 | 140 | //Left progress 141 | Box( 142 | modifier = Modifier 143 | .layoutId("leftBox") 144 | .background( 145 | shape = RoundedCornerShape(cornerRaduis), 146 | color = leftColor 147 | ) 148 | ) 149 | 150 | //Right progress 151 | Box( 152 | modifier = Modifier 153 | .layoutId("rightBox") 154 | .background( 155 | shape = RoundedCornerShape(cornerRaduis), 156 | color = rightColor 157 | ) 158 | ) 159 | 160 | Box(modifier = Modifier 161 | .layoutId("indicator") 162 | .offset { IntOffset(offsetX.roundToInt(), 0) } 163 | .width(5.dp) 164 | .background(shape = RoundedCornerShape(5.dp), color = indicatorColor) 165 | .pointerInput(Unit) { 166 | detectDragGestures(onDragEnd = { onDragEnd(guidelinePercentage) }) { change, dragAmount -> 167 | change.consume() 168 | offsetX = (offsetX + dragAmount.x) 169 | .coerceIn(0f, progressBarWidthInDp.value) 170 | onDrag(guidelinePercentage) 171 | } 172 | 173 | } 174 | ) 175 | 176 | Text( 177 | text = "${String.format("%.0f", guidelinePercentage * 100)}%", 178 | modifier = Modifier 179 | .layoutId("leftPercentage") 180 | .offset(y = animation.value), 181 | style = textStyle 182 | ) 183 | 184 | Text( 185 | text = "${String.format("%.0f", (1 - guidelinePercentage) * 100)}%", 186 | modifier = Modifier 187 | .layoutId("rightPercentage") 188 | .offset(y = animation.value), 189 | style = textStyle 190 | ) 191 | 192 | } 193 | } 194 | 195 | 196 | } -------------------------------------------------------------------------------- /FancyProgressBar/src/test/java/com/muhammadsayed/fancyprogressbar/ExampleUnitTest.kt: -------------------------------------------------------------------------------- 1 | package com.muhammadsayed.fancyprogressbar 2 | 3 | import org.junit.Test 4 | 5 | import org.junit.Assert.* 6 | 7 | /** 8 | * Example local unit test, which will execute on the development machine (host). 9 | * 10 | * See [testing documentation](http://d.android.com/tools/testing). 11 | */ 12 | class ExampleUnitTest { 13 | @Test 14 | fun addition_isCorrect() { 15 | assertEquals(4, 2 + 2) 16 | } 17 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ![FancyProgressBar](https://github.com/abualgait/FancyProgressBar/assets/38107393/bdf39f16-96eb-4d7c-9335-04f830dcf29f) 3 | 4 | ![WhatsAppVideo2024-02-25at5 25 13AM-ezgif com-video-to-gif-converter](https://github.com/abualgait/FancyProgressBar/assets/38107393/26d0b476-c3af-402e-b269-88c5b596eef0) 5 | 6 | # FancyProgressBar 💫 7 | FancyProgressBar is a custom progress bar component developed using Jetpack Compose. It offers a visually appealing way to display progress with various customization options. 8 | 9 | [![](https://jitpack.io/v/abualgait/FancyProgressBar.svg)](https://jitpack.io/#abualgait/FancyProgressBar) 10 | ## Showcase 🎨 11 | 12 | **Compose ConstraintLayout** 🖼️ 13 | FancyProgressBar leverages ConstraintLayout in Jetpack Compose to manage the layout of its components. This ensures flexibility and responsiveness in adapting to different screen sizes and orientations. 14 | 15 | **Animation in Compose** 🚀 16 | The progress animation in FancyProgressBar is implemented using Jetpack Compose's animation APIs. This provides smooth and fluid transitions, enhancing the user experience while the progress updates. 17 | 18 | **PointerInput** 👆 19 | FancyProgressBar supports PointerInput, allowing users to interact with the progress bar directly. This enables intuitive control, such as dragging the progress indicator to a specific point. 20 | 21 | 22 | ## Installing: 23 | Add it in your root build.gradle at the end of repositories: 24 | 25 | ``` 26 | dependencyResolutionManagement { 27 | repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) 28 | repositories { 29 | mavenCentral() 30 | maven { url = uri("https://jitpack.io") } 31 | } 32 | } 33 | ``` 34 | Add the dependency 35 | 36 | ``` 37 | dependencies { 38 | implementation ("com.github.abualgait:FancyProgressBar:x.y.z") 39 | } 40 | ``` 41 | ## Inspiration: 42 | - X: https://twitter.com/dennyshess/status/1761232107802669164 43 | 44 | ## Connect with Me 🌐 45 | 46 | Let's connect! Feel free to reach out on LinkedIn. 47 | 48 | LinkedIn: https://www.linkedin.com/in/abualgait/ 49 | 50 | Happy coding! 🚀✨ 51 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /app/build.gradle.kts: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("com.android.application") 3 | id("org.jetbrains.kotlin.android") 4 | } 5 | 6 | android { 7 | namespace = "com.muhammadsayed.fancyprogressbar" 8 | compileSdk = 34 9 | 10 | defaultConfig { 11 | applicationId = "com.muhammadsayed.fancyprogressbar" 12 | minSdk = 24 13 | targetSdk = 34 14 | versionCode = 1 15 | versionName = "1.1.0" 16 | 17 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" 18 | vectorDrawables { 19 | useSupportLibrary = true 20 | } 21 | } 22 | 23 | buildTypes { 24 | release { 25 | isMinifyEnabled = false 26 | proguardFiles( 27 | getDefaultProguardFile("proguard-android-optimize.txt"), 28 | "proguard-rules.pro" 29 | ) 30 | } 31 | } 32 | compileOptions { 33 | sourceCompatibility = JavaVersion.VERSION_1_8 34 | targetCompatibility = JavaVersion.VERSION_1_8 35 | } 36 | kotlinOptions { 37 | jvmTarget = "1.8" 38 | } 39 | buildFeatures { 40 | compose = true 41 | } 42 | composeOptions { 43 | kotlinCompilerExtensionVersion = "1.5.1" 44 | } 45 | packaging { 46 | resources { 47 | excludes += "/META-INF/{AL2.0,LGPL2.1}" 48 | } 49 | } 50 | } 51 | 52 | dependencies { 53 | implementation(project(":FancyProgressBar")) 54 | implementation("androidx.core:core-ktx:1.12.0") 55 | implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0") 56 | implementation("androidx.activity:activity-compose:1.8.2") 57 | implementation(platform("androidx.compose:compose-bom:2023.08.00")) 58 | implementation("androidx.compose.ui:ui") 59 | implementation("androidx.compose.ui:ui-graphics") 60 | implementation("androidx.compose.ui:ui-tooling-preview") 61 | implementation("androidx.compose.material3:material3") 62 | testImplementation("junit:junit:4.13.2") 63 | androidTestImplementation("androidx.test.ext:junit:1.1.5") 64 | androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1") 65 | androidTestImplementation(platform("androidx.compose:compose-bom:2023.08.00")) 66 | androidTestImplementation("androidx.compose.ui:ui-test-junit4") 67 | debugImplementation("androidx.compose.ui:ui-tooling") 68 | debugImplementation("androidx.compose.ui:ui-test-manifest") 69 | implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1") 70 | 71 | 72 | } -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/androidTest/java/com/muhammadsayed/fancyprogressbar/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.muhammadsayed.fancyprogressbar 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.muhammadsayed.fancyprogressbar", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 15 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /app/src/main/java/com/muhammadsayed/fancyprogressbar/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.muhammadsayed.fancyprogressbar 2 | 3 | import android.os.Bundle 4 | import android.util.Log 5 | import androidx.activity.ComponentActivity 6 | import androidx.activity.compose.setContent 7 | import androidx.compose.foundation.background 8 | import androidx.compose.foundation.layout.Box 9 | import androidx.compose.foundation.layout.fillMaxSize 10 | import androidx.compose.foundation.layout.height 11 | import androidx.compose.foundation.layout.width 12 | import androidx.compose.runtime.Composable 13 | import androidx.compose.ui.Alignment 14 | import androidx.compose.ui.Modifier 15 | import androidx.compose.ui.graphics.Color 16 | import androidx.compose.ui.tooling.preview.Preview 17 | import androidx.compose.ui.unit.dp 18 | import com.muhammadsayed.fancyprogressbar.ui.theme.FancyProgressBarTheme 19 | 20 | class MainActivity : ComponentActivity() { 21 | override fun onCreate(savedInstanceState: Bundle?) { 22 | super.onCreate(savedInstanceState) 23 | setContent { 24 | FancyProgressBarTheme { 25 | Box( 26 | modifier = Modifier 27 | .fillMaxSize() 28 | .background(Color(0xFF121113)), 29 | contentAlignment = Alignment.Center 30 | ) { 31 | FancyProgressBar( 32 | Modifier 33 | .height(90.dp) 34 | .width(250.dp), 35 | onDragEnd = { finalProgress -> 36 | Log.e( 37 | "finalProgress: ", 38 | "${String.format("%.0f", (1 - finalProgress) * 100)}%" 39 | ) 40 | 41 | 42 | }, onDrag = { progress -> 43 | Log.d("progress: ", "${String.format("%.0f", (1 - progress) * 100)}%") 44 | }) 45 | } 46 | } 47 | } 48 | } 49 | } 50 | 51 | 52 | @Preview 53 | @Composable 54 | fun FancyProgressPreview() { 55 | FancyProgressBar( 56 | progress = 0.50f, 57 | modifier = Modifier 58 | .height(90.dp) 59 | .width(250.dp), 60 | onDragEnd = { finalProgress -> 61 | print("${String.format("%.0f", (1 - finalProgress) * 100)}%") 62 | }, onDrag = { progress -> 63 | print("${String.format("%.0f", (1 - progress) * 100)}%") 64 | }) 65 | 66 | } -------------------------------------------------------------------------------- /app/src/main/java/com/muhammadsayed/fancyprogressbar/ui/theme/Color.kt: -------------------------------------------------------------------------------- 1 | package com.muhammadsayed.fancyprogressbar.ui.theme 2 | 3 | import androidx.compose.ui.graphics.Color 4 | 5 | val Purple80 = Color(0xFFD0BCFF) 6 | val PurpleGrey80 = Color(0xFFCCC2DC) 7 | val Pink80 = Color(0xFFEFB8C8) 8 | 9 | val Purple40 = Color(0xFF6650a4) 10 | val PurpleGrey40 = Color(0xFF625b71) 11 | val Pink40 = Color(0xFF7D5260) -------------------------------------------------------------------------------- /app/src/main/java/com/muhammadsayed/fancyprogressbar/ui/theme/Theme.kt: -------------------------------------------------------------------------------- 1 | package com.muhammadsayed.fancyprogressbar.ui.theme 2 | 3 | import android.app.Activity 4 | import android.os.Build 5 | import androidx.compose.foundation.isSystemInDarkTheme 6 | import androidx.compose.material3.MaterialTheme 7 | import androidx.compose.material3.darkColorScheme 8 | import androidx.compose.material3.dynamicDarkColorScheme 9 | import androidx.compose.material3.dynamicLightColorScheme 10 | import androidx.compose.material3.lightColorScheme 11 | import androidx.compose.runtime.Composable 12 | import androidx.compose.runtime.SideEffect 13 | import androidx.compose.ui.graphics.toArgb 14 | import androidx.compose.ui.platform.LocalContext 15 | import androidx.compose.ui.platform.LocalView 16 | import androidx.core.view.WindowCompat 17 | 18 | private val DarkColorScheme = darkColorScheme( 19 | primary = Purple80, 20 | secondary = PurpleGrey80, 21 | tertiary = Pink80 22 | ) 23 | 24 | private val LightColorScheme = lightColorScheme( 25 | primary = Purple40, 26 | secondary = PurpleGrey40, 27 | tertiary = Pink40 28 | 29 | /* Other default colors to override 30 | background = Color(0xFFFFFBFE), 31 | surface = Color(0xFFFFFBFE), 32 | onPrimary = Color.White, 33 | onSecondary = Color.White, 34 | onTertiary = Color.White, 35 | onBackground = Color(0xFF1C1B1F), 36 | onSurface = Color(0xFF1C1B1F), 37 | */ 38 | ) 39 | 40 | @Composable 41 | fun FancyProgressBarTheme( 42 | darkTheme: Boolean = isSystemInDarkTheme(), 43 | // Dynamic color is available on Android 12+ 44 | dynamicColor: Boolean = true, 45 | content: @Composable () -> Unit 46 | ) { 47 | val colorScheme = when { 48 | dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { 49 | val context = LocalContext.current 50 | if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) 51 | } 52 | 53 | darkTheme -> DarkColorScheme 54 | else -> LightColorScheme 55 | } 56 | val view = LocalView.current 57 | if (!view.isInEditMode) { 58 | SideEffect { 59 | val window = (view.context as Activity).window 60 | window.statusBarColor = colorScheme.primary.toArgb() 61 | WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme 62 | } 63 | } 64 | 65 | MaterialTheme( 66 | colorScheme = colorScheme, 67 | typography = Typography, 68 | content = content 69 | ) 70 | } -------------------------------------------------------------------------------- /app/src/main/java/com/muhammadsayed/fancyprogressbar/ui/theme/Type.kt: -------------------------------------------------------------------------------- 1 | package com.muhammadsayed.fancyprogressbar.ui.theme 2 | 3 | import androidx.compose.material3.Typography 4 | import androidx.compose.ui.text.TextStyle 5 | import androidx.compose.ui.text.font.FontFamily 6 | import androidx.compose.ui.text.font.FontWeight 7 | import androidx.compose.ui.unit.sp 8 | 9 | // Set of Material typography styles to start with 10 | val Typography = Typography( 11 | bodyLarge = TextStyle( 12 | fontFamily = FontFamily.Default, 13 | fontWeight = FontWeight.Normal, 14 | fontSize = 16.sp, 15 | lineHeight = 24.sp, 16 | letterSpacing = 0.5.sp 17 | ) 18 | /* Other default text styles to override 19 | titleLarge = TextStyle( 20 | fontFamily = FontFamily.Default, 21 | fontWeight = FontWeight.Normal, 22 | fontSize = 22.sp, 23 | lineHeight = 28.sp, 24 | letterSpacing = 0.sp 25 | ), 26 | labelSmall = TextStyle( 27 | fontFamily = FontFamily.Default, 28 | fontWeight = FontWeight.Medium, 29 | fontSize = 11.sp, 30 | lineHeight = 16.sp, 31 | letterSpacing = 0.5.sp 32 | ) 33 | */ 34 | ) -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abualgait/FancyProgressBar/618f6154c4500d4b2b506030ffacec80351db5ee/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFBB86FC 4 | #FF6200EE 5 | #FF3700B3 6 | #FF03DAC5 7 | #FF018786 8 | #FF000000 9 | #FFFFFFFF 10 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | FancyProgressBar 3 | -------------------------------------------------------------------------------- /app/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |