I want to display progress bar with rounded corners in Xamarin forms. I was able to do it in iOS using a custom renderer:
class CustomProgressBarRenderer: ProgressBarRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e) { base.OnElementChanged(e); Control.ProgressTintColor = Color.FromRgb(255, 201, 74).ToUIColor(); } public override void LayoutSubviews() { base.LayoutSubviews(); var X = 1.0f; var Y = 7.0f; CGAffineTransform transform = CGAffineTransform.MakeScale(X, Y); this.Transform = transform; this.ClipsToBounds = true; this.Layer.MasksToBounds = true; this.Layer.CornerRadius = 5; // This is for rounded corners. } }
How can I achieve the same in Android? This is how I want the progress bar(rounded corners) to look.
How to make a progress bar with rounded corners in Xamarin forms
You could add a Drawable on your android ProgressBar to implement this feature.
Set the style for your ProgressBar , Drawable\bar_color.xml :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--set progressbar backgound style--> <item android:id="@android:id/background" android:drawable="@drawable/progress_bar_background" /> <!--set progressbar schedule style--> <item android:id="@android:id/progress"> <scale android:drawable="@drawable/shape_progressbar_progress" android:scaleWidth="100%" /> </item> </layer-list>
Drawable\progress_bar_background.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="20dp" /> <solid android:color="#FFCBC2C2" /> </shape>
Drawable\shape_progressbar_progress.xml :
<corners android:radius="20dp" /> <solid android:color="#3F8CC4" /> <stroke android:width="0dp" android:color="#FFFFFF"></stroke> </shape>
Using it in your CustomProgressBarRenderer :
public class CustomProgressBarRenderer : ProgressBarRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e) { base.OnElementChanged(e); if(Control != null) { var progressBar = Control as Android.Widget.ProgressBar; var draw = Resources.GetDrawable(Resource.Drawable.bar_color); progressBar.ProgressDrawable = draw; } } }
Effect :
