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);
}

Answer 2

This is really a big question. And I think no one can give you a definitive answers for that.

My advise is baby steps:

1-Put a button on the screen and try to create 3 lines to get a crooked line effect. Calculate the length of all 3 parts of the crooked line by using a start point(at the beginning you can start from the middle of the screen) and end point(buttons final destination)

2- If you know start and end position for the button you can calculate the line2 length easily. For the line1 and line3 you also need to pass another parameter for your calculate function(by the way you should have it) where to start to crook.

After you complete this task then there are more. 3- You should then place 5 buttons on the screen and assemble their cooked lines by using the function you defined before. 4- According to your start and end point your cooked line should go up and down. 5- Now you are capable of creating cooked lines. It is time to calculate for the real task.

6- You should calculate the required space available and somehow figure out if the buttons will fit in. If not you should put the button in second lane and then use your magical L draw method to connect them to a calculated start position(you should have calculated the y position of the start points for every buttons.)

It is go on. Just try to split your assignment into little pieces and then try to complete each of them easily without any headache.