Create "L" shape curved line with dynamic data

Question

I want to draw a pure dynamic view like below image

I have two arraylist

List<String> type and List<Float> level;

type have name(max,type1,type2, etc) and level have marker value of type

level will always lie between 0 to 1 and type will be a string, value of both level and type will come from server. We have two fixed label - min and max.

Suppose I got .4 for min and .5 for max from server then all type(type1, type2, type3, etc) will lie between .4 and .5 . Then all rest of types should be arrange like crooked line, but if we get value for min is .001 and for max .9 then we have enough space to show rest of labels, in that case we don’t need to show by crooked line or marker. But I don’t have any idea how to achieve it or from where I can start. Any help will be really appreciated. Thanks in advance to all.

If above design is bit complex then please give me some reference or link to achieve below design.

It would be great favor if i am able to do this simpler one(above image).

I have tried below code in onCreate() block.

ViewTreeObserver viewTreeObserver = viewbar.getViewTreeObserver();
if (viewTreeObserver.isAlive()) {
    viewTreeObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
        @SuppressLint({ "NewApi", "ResourceAsColor" })
        @Override
        public void onGlobalLayout() {
            viewbar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            viewWidth = viewbar.getWidth();
            viewHeight = viewbar.getHeight();

            DefineType definetype = new DefineType();   
            float maxvalue = Collections.max(definetype.frameCalLevels);
            float minvalue = Collections.min(definetype.frameCalLevels);
            min.setText(definetype.frameCalType.get(0).toString());
            max.setText(definetype.frameCalType.get(4).toString());
            float density = getApplicationContext().getResources().getDisplayMetrics().density;
            int[] posXY = new int[2];
            viewbar.getLocationOnScreen(posXY);
            int x = posXY[0];         
            int y = posXY[1];       

            DrawView drawView;
            drawView = new DrawView(MainActivity.this, x, y,density);
            //drawView.setBackgroundColor(Color.WHITE);

            drawView.setX((float)((x*density/160))+viewWidth+180);
            drawView.setX((float) ((float)((y*density/160))));

            drawView.invalidate();
            ll.addView(drawView);    

        }
    });

}  

and my inner class to draw view is below

class   DrawView extends View {
        Paint paint = new Paint();
        float mx,  my,  mdensity;
        Paint mBGPaint, mTXTPaint,mLINEPaint,mBRDPaint;
        public DrawView(Context context, float x, float y, float density) {
            super(context);
            paint.setColor(Color.RED);
            paint.setStrokeWidth(8);
            paint.setStyle(Paint.Style.STROKE);         

            mx = x;
            my = y;         
            mdensity = density;
        }
        @Override
        public void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            init();

            mLINEPaint.setStrokeWidth(8);

            //draw rect
            canvas.drawRect(100,100,200,200,mBGPaint);
            //draw rect border
            canvas.drawRect(100,100,200,200,mBRDPaint);
            //draw text
            canvas.drawText("min", 250, 460, mTXTPaint);
            //draw line
            canvas.drawLine(50, 150, 100, 150, mLINEPaint);

        }
        @SuppressLint("ResourceAsColor")
        public void init() {

            //rectangle background
            mBGPaint = new Paint();
            mBGPaint.setColor(0xFF0000FF);

            //your text
            mTXTPaint = new Paint();
            mTXTPaint.setColor(android.R.color.holo_blue_light);

            //your line
            mLINEPaint = new Paint();
            mLINEPaint.setColor(0xFFFF00FF);

            //rectangle border
            mBRDPaint = new Paint();
            mBRDPaint.setStyle(Paint.Style.STROKE);
            mBRDPaint.setStrokeWidth(10);
            mBRDPaint.setColor(0xFFFFFF00);
        }
    }

My XML design is below

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:id="@+id/ll">

    <View
        android:id="@+id/view"
        android:layout_width="70dp"
        android:layout_height="300dp"
        android:layout_marginTop="40dp"
        android:layout_marginLeft="10dp"
        android:orientation="vertical"
        android:background="@drawable/rect" >
    </View>


</LinearLayout>

By above code i am getting below screen, so its not appropriate. What i am missing here.? Please suggest me how to move our drawer up?

Answer 1

In this case I would use custom View with custom onDraw:

That is,

public class myView extended View {
public myView(Context ctx) {
super(ctx);
init();
}
public void init(){
paint = new Paint();
}
@Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
//loop here
      canvas.drawLine(0, 0, 20, 20, paint);//your some positions.
canvas.drawRect(....)
canvas.drawText(...)
    }
}

EDIT For your second example:

init() {

//rectangle background
mBGPaint = new Paint();
mBGPaint.setColor(0xFF0000FF);

//your text
mTXTPaint = new Paint();
mTXTPaint.setColor(0xFFFFFFFF);

//your line
mLINEPaint = new Paint();
mLINEPaint.setColor(0xFFFF00FF);

//rectangle border
mBRDPaint = new Paint();
mBRDPaint.setStyle(Style.STROKE);
mBRDPaint.setStrokeWidth(10);
mBRDPaint.setColor(0xFFFFFF00);
}

onDraw(...) {

//draw rect
canvas.drawRect(100,100,200,200,mBGPaint);
//draw rect border
canvas.drawRect(100,100,200,200,mBRDPaint);
//draw text
canvas.drawRect(100,100,mTXTPaint);
//draw line
canvas.drawLine(50, 150, 100, 150, mLINEPaint);
}