Hexagon shaped ProgressBar

Question

I am trying to make a game where a user gains experience points and his level increases as shown in the image below.

I was thinking of achieving this with the use of progress bar,but I am not able to make a progress bar with the shape of a Hexagon .

The yellow line should increase as the users points increase.

Can anyone give me ideas on how I can achieve this??(I tried Custom ProgressBar ,but it did not work.)

Thanks.

Answer 1

I managed to change the code that Nilesh mentioned and made a progressbar which did not have any curves.

This works fine for me.

Now I just have to figure out how to insert the image inside the progressbar. :p

package com.example.benedict.progress;

import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;


public class V extends View implements View.OnClickListener {
Path segment = new Path();
Paint paint = new Paint();
PathMeasure pm;
String TAG = "View";
Path path;

public V(Context context) {
    super(context);
    init();
}

public V(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
}

public V(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

public V(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

void init() {
    setOnClickListener(this);
    paint.setColor(0xaa00ff00);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(10);
    paint.setStrokeCap(Paint.Cap.ROUND);

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    Path src = new Path();

    src.moveTo(8.80000f, 0.630000f);//0
    src.lineTo(26.030001f, 0.630000f);//1
    src.lineTo(32.109999f, 14.030000f);//2
    src.lineTo(26.030001f, 28.440001f);//3
    src.lineTo(7.800000f, 28.440001f);//4
    src.lineTo(2.200000f, 14.030000f);//5
    src.lineTo(8.80000f, 0.630000f);//6


    Matrix m = new Matrix();
    RectF srcRect = new RectF(0, 0, 32, 40);
    RectF dstRect = new RectF(0, 0, w, h);

    dstRect.inset(paint.getStrokeWidth() / 2, paint.getStrokeWidth() / 2);
    m.setRectToRect(srcRect, dstRect, Matrix.ScaleToFit.CENTER);

    Path dst = new Path();
    src.transform(m, dst);
    pm = new PathMeasure(dst, true);
    pm.getSegment(0, pm.getLength() / 2, segment, true);
    //  segment.rLineTo(0, 0);
    setProgress(pm.getLength());
}

void setProgress(float progress) {
    segment.reset();
    float start = 0;
    float end = (progress);
    if (start < end) {
        pm.getSegment(start, end, segment, true);
    } /*else {
        pm.getSegment(start, length, segment, true);
      //  pm.getSegment(0, end, segment, true);
    }*/
    segment.rLineTo(0, 0);
    invalidate();
}

  @Override
    public void onClick(View v) {
    ObjectAnimator.ofFloat(this, "progress", 0, 
    pm.getLength()).setDuration(5 * 2500).start();
    Log.d(TAG, pm.getLength() + "");
}

  @Override
  protected void onDraw(Canvas canvas) {

      canvas.drawPath(segment, paint);

   }
 }

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/loading_status"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:orientation="vertical"
android:background="#000"
android:visibility="visible" >


<com.example.benedict.progress.V
    android:id="@+id/progress"
    android:src="@drawable/poster1"
    android:scaleType="centerCrop"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="visible" />



</LinearLayout>