How to Make a Draggable Music Knob in Jetpack Compose - Android Studio Tutorial
Вставка
- Опубліковано 19 вер 2024
- In this video you will learn how you can create a music knob composable that you can rotate using drag gestures.
⭐ 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/...
💻 Let me personally review your code and provide individual feedback, so it won't backfire and cost you a fortune in future:
elopage.com/s/...
Get the source code for this video here:
github.com/phi...
Regular programming advice on my Instagram page: / _philipplackner_
Checkout my GitHub: github.com/phi...
You like my free content? Here you can buy me a coffee:
www.buymeacoff...
nice knob bro
Thanks bro
Florian in da house!
your videos are gold for self learner !
When you posted that video that declared the end of the ongoing Web dev series on your channel, I really felt confused with your decision after that video, but the very next video you uploaded after that, I still remember the smile that you had when you started the series on Jetpack Compose. Compose is like irresistible for Philipp! Cheers! keep composing happily :)
The angle calculation solved my games ridiculous bug! Random dynamite got me this time, thanks.
your videos helps me a lot whenever people ask me the resources to learn Android advice them to learn from the GOAT . U explain things very nicely sir ,really admire you a lot .This video was really amazing learned a lot from your videos LOVE FROM INDIA
I had checked your code, and thank you for your kindness to add knob photo on the source code, it allows me to create it easily.
You are making the best modern Android among YT, thank you so much!
Just a suggestion,
if you could try creating the custom composable element first then show all the custom parameters that can be passed into it. By this way I think we can understand better like okay this is why we are adding this parameter. Now what happens is I wouldn't be able to relate to the parameter usage in the beginning itself.
Anyhow, great tutorials ❤️
+1
Mate, you are LEGEND!!!
Been waiting to make one of these for a long time!
That was impressive 👏👏👏
Thanks for reminding me about the dreaded Trig fxns, they are not dreaded after all when you use them practically like in this knob.
Why he had to multiply by -1 to get the correct result?
The correct explanation (might be wrong):-
In normal trigonometry, we calculate the angle from the horizontal axis, but in android, the angle is calculated from the vertical axis.
tan(@) = Base/Height
What he assumed to be base was actually height in android.
Also, in the android coordinate system, the top left corner is (0,0)
So the correct way to calculate tan will be(assuming we are starting our calculation from 1st quadrant):-
val height =touchX - centerX
val base = centerY - touchY
val radianAngle = atan2(height,base)
val degreeAngle = radianAngle * (180f / PI).toFloat()
Great example that covers a practical use of compose. However, my OCD doesn't like that when you turn the knob all the way to the bottom, there is still one bar that is green... :P
I suppose, one more problem for your OCD: similar thing happens when you turn the knob to the half. there would be 11 active bars instead of 10, etc.
The solution imho is simple though: color = if (index < numberActiveBars) barColor else Color.DarkGray. "< than" instead of in range.
Good work 👏. Can we have a tut on how to use google maps with jetpack compose?
Thank you so much for this video. Would really appreciate if you make another tutorials for the 'Side Effects & Effect Handlers'.
It would be really helpful.
ThxWorks 100% just small changes starting @9:26 you'll get some red for Int convert and some Doubles + Float Converts. other then at all good
Commenting for better reach!
The atan2 function takes Y coord first and in the code we took X coord first. I suspect that is the reason you had to negate the value. Also, I am curious why we did not add left coordinate to width/2 to compute centerX and likewise top coordinate to height / 2 to compute centerY?
In regards to the second part, I think he doesn't add the left and the top coordinate to compute the center because the touch coordinate that we get from the "modifier.pointerInteropFilter {...}" seems to be in respect to the view itself as opposed to anything else (window/parent/etc.). At least that's the impression that I got, and, if that's the case, then size/2 is all that we need for the center (no need for offseting it).
Great explanation
Glad you liked it
Thanks for your amazeing video
Great video thank you very much! The knob keeps rotating after it reaches the end and repeating the process from the beginning, is this the normal behavior or am I missing something? :D
You are awesome bro
You are too great !
very intuitive！
If you don't want to use the minus sign in front of the angle, I think this should be working too:
touchX = event.x
touchY = event.y
val angle = atan2(-(centerX - touchX), centerY - touchY) * (180f / PI).toFloat()
That's also my answer as to why we need the minus. I don't think it has to do anything with the fact that the first param in kotlin function is y instead of x... Inho it has to do more with how we calculate dy in this case for example (the param that we pass to atan2).
Here's one more calculation that seems to be working for me:
val opposite: Float = touchX - centerX
val adjacent: Float = (touchY - centerY)
val angleRadians: Float = atan2(y = opposite, x = -adjacent)
val angleDegrees: Float = (angleRadians * 180 / Math.PI).toFloat()
Could you xplain y there is a - here?
@@harishgaming2274 probably, both the minus here and the minus in the video stem from the fact that the y axis in android coordinate system is flipped as opposed to a normal one.
@@rollebonmarquis7574 may be this angle representing tan inverse function to get angle ?
WOW Very cool
Amazing
Thanks a lot
Just curious.. Can we not just add colored surfaces instead of manually drawing rectangle, calculating offsets by hand?
Please Make video on following bro,
1.Jetpack Compose with Room Database
2.Jetpack Compose with Navigation Compose Crash Course
3.Jetpack Compose with most used UI (like Textfield, buttons, Dialog box, fab etc.. )Crash Course
4.Jetpack Compose Notification and Backround Services Crash Course
5.Jetpack Compose with Google Maps
6.Jetpack Compose with Exoplayer
7.Jetpack Compose with Firebase Authentication
8.Jetpack Compose with firestore etc..
Above all courses will help us a lot to learn Jetpack Compose bro..
So pls make it happen 🤗🤗
Thankssss
just tested this out, maybe I did smth wrong but the knob is overscrolling when reaching 100% and then getting back to 0. Is that intentional behaviour?
I am learning Android developer and currently transition xml to compose but when creating modern ui and custom ui and animation then I am not able do that because my math is very so weak how to improve math skill also
Das ist verdammt viel Grün, aber eindeutig nicht hinter Deinen Ohren! :D
Hello
How saving to listview in sharedpreference with Kotlin ?
I couldn't do it ,Can you help me ?
Hi Philipp, I am working on android tv. Does jetpack compose support dpad events for android tv. if yes, Could you please make some vertical and grid layout videos for android tv. I have searched the internet no one has published jetpack compose related to android tv articles. if
you're able to do it it is really appreciatable
Make video about TrafficStats
Sin cos tan 😁
Or knob rotary
Amit music 🎶
#trimuda :
this language is so overwhelming. It's just a volume knob and look at the amount of math and the code to make it
What has that to do with the language? 😂 You'll need this math in all languages