Help on UI Design

I want create progress bar like as below image. I put a child card view within a parent card view. Corner radius of both card views is 25. But not getting perfect as image. Can any one create it?

Thanks in Advance


You can create such progress view but it will be circular.


I have it. But i need now as image looks

Try this solution

Take a card view make width to fill parent padding to 0 and corner radius to 50 and place linear progress into it and adjust card view height to linear progress height.

1 Like

I dont want circular. Need rectangular shape as shown in image

I have edited the post see it. Maybe it works.

How can be made with two card views?

Not two card view use only one card view an place linear progress I side it.

1 Like

I tried as you said. But it doesn’t fullfill my criteria.

If any one create like as above image, it would be very helpful…

I will try it but it will take some time

I got like this. Need to fill left side also

I will try it

Thanks @Vedang

1 Like

Take card and setting paddings to 0 set radius to half of height… and set background color to white

Inside card take horizontal arrangement and set background color to yellow…

Now check how much percentage you want to load progess…

Suppose if achievement is 100/1000 means 10% is achieved…
According to this set horizontal width to 0.1 * card.width


I am hopping that @Vedang will solve my probelm

You have posted topic on community so everyone is allowed to solve your query…
And if you want @Vedang to solve your problem then you must message him personally…

1 Like

I am trying to solve it just be patient

1 Like

This is the best possible way to get what you want.
And you must try yourself too don’t just ask for ready made things.

I am Sorry if I am so rude

i did it.aiaaia (1).apk (5.0 MB) aiaaia.aia (2.4 KB)

Video :-