Is it possible to make ProgressBar vertical in Xamarin Studio (Android)?

Question

I need to place a small vertical progress bar in each cell of a ListView. I have spent lots of hours trying to make my own custom progress bar using different techniques. Here are some of them: I tried placing two ImageViews one above the other, switching their background color to look similar to a standard ProgressBar. And the thing was to switch their position and height to make it look like the progress is proceeding. Another solution was to use a custom shape

But I always faced the same problem: the views wouldnot redraw until I do any useraction. Anyways, I was thinking, what if I use a standard ProgressBar, which does redraw automatically, but rotate it.

Does anyone know how to rotate a ProgressBar or any other solution to my issue?

nightsnaker · Accepted Answer · 2013-09-10T11:41:07.333

Finally answering my own question. In order to make a standard progress bar vertical you should create a class which inherits from ProgressBar and override the Draw method:

public class VerticalProgressBar : ProgressBar
{
    protected VerticalProgressBar(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
    {
    }

    public VerticalProgressBar(Context context) : base(context)
    {
    }

    public VerticalProgressBar(Context context, IAttributeSet attrs) : base(context, attrs)
    {
    }

    public VerticalProgressBar(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle)
    {
    }

    protected override void OnSizeChanged (int w, int h, int oldw, int oldh)
{
    base.OnSizeChanged (h, w, oldh, oldw); //Fixes the width-height issue
}

public override void Draw(Android.Graphics.Canvas canvas)
{
    canvas.Rotate(-90); //Rotating the canvas around (0,0) point of the control
    canvas.Translate(-Height, 0); //Moving the canvas inside the control rect
    base.OnDraw(canvas);
}
}

After that you can either add the control in code, or use the new control in your .axml document writing the namespace containing it in front like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <YOUR_NAMESPACE.VerticalProgressBar
        android:id="@+id/progress"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="10px"
        android:layout_height="100px" />
    <LinearLayout
        android:id="@+id/linearText"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_marginLeft="10px"
        android:layout_marginTop="10px">
        <TextView
            android:id="@+id/textTop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
        <TextView
            android:id="@+id/textBottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </LinearLayout>
</RelativeLayout>

There still remains an issue: the bottom part of such vertical progress bar stops auto-redrawing. Non-redrawing part size = android:layout_height - android:layout_width. If anybody knows how to resolve the issue, please let me know. — nightsnaker, Sep 10 '13 at 11:37
You can kind of solve this changing some code if you do not care about the edges: base.OnSizeChanged (h, h, oldh, oldw) and canvas.Translate(-Height, -6). — nightsnaker, Sep 10 '13 at 12:52

Is it possible to make ProgressBar vertical in Xamarin Studio (Android)?

1 Answers1