{"id":13609462,"url":"https://github.com/emirhanemmez/MultiStepsProgressBar","last_synced_at":"2025-04-12T20:32:00.818Z","repository":{"id":208517382,"uuid":"721829389","full_name":"emirhanemmez/MultiStepsProgressBar","owner":"emirhanemmez","description":"A customizable onboarding progressbar component","archived":false,"fork":false,"pushed_at":"2023-11-29T08:47:23.000Z","size":761,"stargazers_count":20,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-07T15:45:14.135Z","etag":null,"topics":["android","android-library","compose","compose-library","jetpack-compose","kotlin","onboarding","onboarding-screen","progressbar"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emirhanemmez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-11-21T21:22:58.000Z","updated_at":"2024-09-28T14:47:53.000Z","dependencies_parsed_at":"2024-01-16T23:31:07.363Z","dependency_job_id":"c7d5b09e-ea19-4d3a-ada8-f311d3833315","html_url":"https://github.com/emirhanemmez/MultiStepsProgressBar","commit_stats":null,"previous_names":["emirhanemmez/multiplestepsprogressbar","emirhanemmez/multistepsprogressbar"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emirhanemmez%2FMultiStepsProgressBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emirhanemmez%2FMultiStepsProgressBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emirhanemmez%2FMultiStepsProgressBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emirhanemmez%2FMultiStepsProgressBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emirhanemmez","download_url":"https://codeload.github.com/emirhanemmez/MultiStepsProgressBar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248629755,"owners_count":21136305,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-library","compose","compose-library","jetpack-compose","kotlin","onboarding","onboarding-screen","progressbar"],"created_at":"2024-08-01T19:01:35.140Z","updated_at":"2025-04-12T20:31:59.683Z","avatar_url":"https://github.com/emirhanemmez.png","language":"Kotlin","readme":"# MultiStepsProgressBar\n\nA customizable progressbar component can be used in onboarding screens for Jetpack Compose.\n\n![MultiStepsProgressBar](https://github.com/emirhanemmez/MultiStepsProgressBar/blob/main/screenshot/animation.gif)\n\n## Implementation\n\nAdd jitpack.io maven to **settings.gradle.kts**\n\n```gradle\npluginManagement {\n    repositories {\n        google {\n            content {\n                includeGroupByRegex(\"com\\\\.android.*\")\n                includeGroupByRegex(\"com\\\\.google.*\")\n                includeGroupByRegex(\"androidx.*\")\n            }\n        }\n        mavenCentral()\n        mavenLocal()\n        maven(url = \"https://jitpack.io\")\n        gradlePluginPortal()\n    }\n}\ndependencyResolutionManagement {\n    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)\n    repositories {\n        google()\n        mavenLocal()\n        maven(url = \"https://jitpack.io\")\n        mavenCentral()\n    }\n}\n```\n\nAdd library dependency to your **build.gradle.kts**\n\n```gradle\nimplementation(\"com.github.emirhanemmez:MultiStepsProgressBar:version\")\n```\n\n## Usage\n\nDefine your **stepList** as **SnapShotStateList**  in your ViewModel. For example:\n\n```kt\nclass MainViewModel : ViewModel() {\n\n    private val _stepList = mutableStateListOf\u003cStepData\u003e().apply {\n        addAll(\n            listOf(\n                StepData(\n                    stepId = Id.FirstStep,\n                    stepName = \"Step1\",\n                    progress = ProgressProperties.PROGRESS_FULL\n                ),\n                StepData(\n                    stepId = Id.SecondStep,\n                    stepName = \"Step2\",\n                    progress = ProgressProperties.PROGRESS_NONE,\n                ),\n                StepData(\n                    stepId = Id.ThirdStep,\n                    stepName = \"Step3\",\n                    progress = ProgressProperties.PROGRESS_HALF\n                )\n            )\n        )\n    }\n    val stepList: List\u003cStepData\u003e = _stepList\n\n    fun updateProgressesWithRandomValues() {\n        _stepList.updateStepProgress(Id.FirstStep, Random.nextFloat())\n        _stepList.updateStepProgress(Id.SecondStep, Random.nextFloat())\n        _stepList.updateStepProgress(Id.ThirdStep, Random.nextFloat())\n    }\n\n    sealed class Id(id: Int) : StepId(id) {\n        data object FirstStep : Id(0)\n        data object SecondStep : Id(1)\n        data object ThirdStep : Id(2)\n    }\n}\n```\n\nObserve **stepList** in your composable function:\n\n```kt\nclass MainActivity : ComponentActivity() {\n\n    private lateinit var mainViewModel: MainViewModel\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n\n        mainViewModel = ViewModelProvider(this)[MainViewModel::class.java]\n\n        super.onCreate(savedInstanceState)\n        setContent {\n            MyTheme {\n                // A surface container using the 'background' color from the theme\n                Surface(\n                    modifier = Modifier.fillMaxSize(),\n                    color = MaterialTheme.colorScheme.background\n                ) {\n                    Column(\n                        horizontalAlignment = Alignment.CenterHorizontally\n                    ) {\n                        Spacer(modifier = Modifier.height(56.dp))\n\n                        MultipleStepsProgressBar(\n                            stepDataList = mainViewModel.stepList\n                        )\n\n                        Spacer(modifier = Modifier.height(56.dp))\n\n                        Button(onClick = {\n                            mainViewModel.updateProgressesWithRandomValues()\n                        }) {\n                            Text(text = \"Click for random progresses\")\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n```\n\nAnd update progress with this extension function:\n\n```kt\nfun SnapshotStateList\u003cStepData\u003e.updateStepProgress(stepId: StepId, progress: Float) {\n    val index = stepId.index\n    val step = this[index]\n    this[index] = step.copy(progress = progress)\n}\n```\n\nFor UI customization please check [StepProperties.kt](https://github.com/emirhanemmez/MultiStepsProgressBar/blob/main/multistepsprogressbar/src/main/java/com/emirhanemmez/multistepsprogressbar/model/StepProperties.kt)\n\n","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femirhanemmez%2FMultiStepsProgressBar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femirhanemmez%2FMultiStepsProgressBar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femirhanemmez%2FMultiStepsProgressBar/lists"}