En forme d'hexagone ProgressBar

Question

J'essaie de faire un jeu où un utilisateur gagne des points d'expérience et son niveau augmente comme indiqué dans l'image ci-dessous.

Je pensais à y parvenir avec l'utilisation de la barre de progression, mais je ne suis pas en mesure de faire une barre de progression avec la forme d'un hexagone .

La ligne jaune devrait augmenter à mesure que les points utilisateurs augmentent.

Quelqu'un peut-il me donner des idées sur la façon dont je peux y parvenir ?? (j'ai essayé personnalisé ProgressBar, mais il ne fonctionne pas.)

Merci.

Answer 1

J'ai réussi à changer le code que Nilesh mentioned et fait une barre de progression qui n'a pas de courbes.

Cela fonctionne très bien pour moi.

Maintenant, je dois juste comprendre comment insérer l'image dans la barre de progression. : 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>