0

I have a very simple loading symbol which I created using ProgressBar in one of my Android apps. The loading symbol looks like the following: enter image description here

XML code for the ProgressBar:

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true" />

I want to add some styling to the ProgressBar or make it look like the following:

enter image description here

Is it possible to do it? If so, how?

Any example code would be very helpful.

Dinux
  • 644
  • 1
  • 6
  • 19
  • I don't mean to bash on you, but SO is not a free-coding site, users are expected to do some _homework_ before asking a question. There are dozens of answers on SO (and any search engine) about how to customize or even [create a custom progress bar](https://stackoverflow.com/questions/8929062/how-to-make-a-custom-progressbar-in-android). If the theme/drawables don't do it, you can extend a ProgressBar and override `onDraw()` to go low level. – Martin Marconcini Aug 15 '23 at 10:21
  • @MartinMarconcini Ok, thanks. Could you pls provide any link? Coz I couldn't find much on SO on how to customise a progress bar. – Dinux Aug 15 '23 at 10:24
  • I'd start [here](https://m3.material.io/components/progress-indicators/overview) in the Material 3 component itself (if you're using M3 - and you should-). If you go the `onDraw()` route, it's wise to read about [custom drawing](https://developer.android.com/develop/ui/views/layout/custom-views/custom-drawing). Lastly, there are good references in [this SO post](https://stackoverflow.com/questions/21333866/how-to-create-a-circular-progressbar-in-android-which-rotates-on-it). Keep in mind you will not find "the exact solution" made for you, but the understanding on how to get there. – Martin Marconcini Aug 15 '23 at 10:30
  • You're welcome! Oh, and don't forget the actual specs for the M3 Progress indicator, located [here](https://github.com/material-components/material-components-android/blob/master/docs/components/ProgressIndicator.md). – Martin Marconcini Aug 15 '23 at 10:33

1 Answers1

0

You can change the color by using following

   android:indeterminate="true"
   android:indeterminateTintMode="src_atop"
   android:indeterminateTint="@color/secondary"

and for styling which image you have shared can be possible by using the GIF. you can check GIF sample from https://loading.io/.

Using progress bar bar you can update some styling but not as you shared in image

Let me know if you still have doubt

Yogesh Rewani
  • 176
  • 5