Making a horizontal progress bar using image xamarin android

Question

How can I change progress bar with a picture? I want it to look like I want it to take nearly all the horizontal length.

I want this result http://www.bellaterreno.com/graphics/biz_processingbar/processingbar_blue_diagonal_sm_ani.gif

Answer 1

You can set a custom Progress Bar creating an additional XML in your Resource > drawable folder. Create progressbar.xml file and customize it with your own style. It should looks similar to this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Define the BACKGROUND properties: colors, gradient, etc -->
    <item android:id="@android:id/background">
    <shape>
        <gradient
                android:startColor="#000001"
                android:centerColor="#0b131e"
                android:centerY="1.0"
                android:endColor="#0d1522"
                android:angle="270" />
    </shape>
   </item>

  <!-- Define the PROGRESS BAR properties: colors, gradient, etc -->
  <item android:id="@android:id/progress">
    <clip>
        <shape>
            <gradient
                android:startColor="#007A00"
                android:centerColor="#007A00"
                android:centerY="1.0"
                android:endColor="#06101d"
                android:angle="270" />
        </shape>
    </clip>
    </item>
</layer-list>
In your AXML file you have to define 'android:progressDrawable':

<ProgressBar
    android:progressDrawable="@drawable/progressbar"
...
/>

Based on this stackoverflow post. How to Customize a Progress Bar In Android

or with this information in Xamarin

You can achieve this using Custom Renderer.

Xamarin's James Montemagno have a good guide regarding creating custom circular progress bar.

https://blog.xamarin.com/using-custom-controls-in-xamarin-forms-on-android/

Official Documentation on Xamarin.Forms Custom Renderers can be found at https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/