How to Make an Animated Circular Progress Bar in Jetpack Compose

How to Make an Animated Circular Progress Bar in Jetpack Compose - Android Studio Tutorial

Рет қаралды 38,589

3 жыл бұрын

In this video you'll learn how you can create a custom circular progress bar in Android studio using Jetpack compose.
⭐ Get certificates for your future job
⭐ Save countless hours of time
⭐ 100% money back guarantee for 30 days
⭐ Become a professional Android developer now:
pl-coding.com/premium-courses...
Regular Android tutorials on my Instagram: / _philipplackner_
Checkout my GitHub: github.com/philipplackner

Пікірлер: 50

@luis11830 Жыл бұрын

You save my day, thank you so much

@manshalkhatri9289 8 ай бұрын

Just made my day

@rasoolmohamed4788 Жыл бұрын

Thank you dear...

@BlackTearsYT 2 жыл бұрын

I've tried implementing a rounded corner arc like this with my own custom circular bar but I think doing StrokeCap actually adds pixels to the start and end of the arc to round it rather than just rounding off the corners. This makes the bar itself slightly inaccurate and you'd have to calculate to StrokeCap size and do a bit of math for the start and sweep angles.

@SpaceTimeBeing_ 3 жыл бұрын

Can you do videos on shapes in Jetpack compose? Complex shapes beyond their basic examples, like how to make a curve and stuff

@hellosagar 3 жыл бұрын

@mojtabamohammadian1364 2 жыл бұрын

Hi, I tried this code, but it doesn't start animating on launch and I have two touch the screen twice to begin progress.

@jayeshkumar3480 2 жыл бұрын

i wanted to animate a circle by filling it from bottom to top anu idea how to do it

@vathsan3906 3 жыл бұрын

So compose.runtime.* isn't needed.. getvalue and setvalue itself along with remember will solve the problem...

@virajbenade5572 3 ай бұрын

can we set the progress of the mediaplayer to it

@anuragkanwar1844 3 жыл бұрын

i saw that on INSTA 🤗🤗

@codinginflow 3 жыл бұрын

Sir how to make this progress bar in Java + XML

@mehulbisht9708 3 жыл бұрын

The pain would be real. 👀

@hdkloh6857 3 жыл бұрын

Use CircularProgressIndicator of MDC...🤣

@madguy1967 3 жыл бұрын

Please 🥺🙏🙏🙏

@ChrisAthanas 3 жыл бұрын

Ah trolling

@thetester8371 3 жыл бұрын

Wait you use Java? : ) 🤣

@hre.i 3 жыл бұрын

Please can you make weather app with api Json

@bokhirchonkhakimov4969 3 жыл бұрын

please continue the Spotify clone video course with search

@RajuKumar-lz3tf 3 жыл бұрын

How to make that Color gradient.?

@ruslanp.262 2 жыл бұрын

Just found solution: in "drawArc" replace "color" with "brush". You can put some colors to create gradient in brush. Example: brush = Brush.horizontalGradient( colors = listOf( Color.Red, Color.Blue ) )

@alij3fer 3 жыл бұрын

thanks bro, please make video how can support different screens with compose jetpack 😥

@maskedredstonerproz 3 жыл бұрын

simply by making sizes dependant on screen size, rather than having fixed sizes, basically the same concept as in web development

@tiagosutter8821 3 жыл бұрын

@@maskedredstonerproz i think he is talking about having alternative layouts, not in the sense of having a layout flexible/responsive enough to support many smartphones, but having an alternate layout specific for tablets for example, maybe even with different position of elements, like a button that takes the whole width off the screen in a smartphone would look ugly if it takes all the width in a tablet device.

@maskedredstonerproz 3 жыл бұрын

@@tiagosutter8821 well, just I guess detect somehow what kind of device the app is running on, and just, call the necessary composable function(s) based on which one it is

@DivyangM 2 жыл бұрын

Exactly at 12:39 How to do that auto implementation of function?

@rj02piyush 6 ай бұрын

Just press enter when you see suggestions

@kamaal4928 Жыл бұрын

How to make it anti-clock wise?

@ArielFischbein Жыл бұрын

negative sweepAngle

@ChrisAthanas 3 жыл бұрын

Is the text automatically centered in the canvas?

@PhilippLackner 3 жыл бұрын

It's centered because of the content alignment of the box

@ChrisAthanas 3 жыл бұрын

@@PhilippLackner so it inherits the alignment

@PhilippLackner 3 жыл бұрын

@@ChrisAthanas Why inherit? It's a direct child of the box

@ChrisAthanas 3 жыл бұрын

@@PhilippLackner so everything within the Box will be centered as well? Like if we added a small circle to the Box, it would appear in the center of the numbers?

@thebigboi5357 3 жыл бұрын

@@ChrisAthanas Yep. The box was initialized as: Box( contentAlignment = Alignment.Center, modifier = Modifier.size(radius * 2f) ){ } "contentAlignment = Alignment.Center" means that everything within the box will be aligned to center.

@onlinechatter8578 3 жыл бұрын

Can u make a video with Firebase+ Jetpack compose + room database+recycleview

@PhilippLackner 3 жыл бұрын

I won't use Firebase again

@onlinechatter8578 3 жыл бұрын

@@PhilippLackner any reason to avoid like is it because of the firebase (how about alternative opened source) or something else..??? thanks for replying..

@Rassy_ 10 ай бұрын

@@onlinechatter8578 Pricing & limitations in regards to the SDK such as reads,writes, queries etc