Create a curved line shape L with dynamic data

Question

I want to draw a clean dynamic view as shown below.

I have two arraylist

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

the type has a name (max, type1, type2, etc.) and the level has the value of a type marker

the level will always be between 0 and 1, and the type will be a string, the level value and will come from the server. We have two fixed tags - min and max.

Suppose I got .4 for min and .5 for max from the server, then all type (type1, type2, type3, etc.) will be between .4 and .5. Then all other types should be arranged as a curved line, but if we get the value min, equal to .001 and max.9, then we have enough space to show the rest of the labels, in this case we do not need to show along the curved line or marker . But I do not know how to achieve this or where I can start. Any help would be really appreciated. Thanks in advance to everyone.

If the above design is a bit complicated, then please give me a link or link to achieve the below design.

It would be great if I could make it easier (above the image).

I tried to make the code below in the 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 for viewing looks 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> 

In the above code, I get below the screen, so it doesn't fit. What am I missing here? Please suggest me how to move our box?

Answer 1

In this case, I would use a custom view with a custom onDraw:

I.e

 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 a really big question. And I think no one can give you the final answers.

My advice is baby steps:

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

2- If you know the start and end position for the button, you can easily calculate the line length2. For lines1 and line3 you also need to pass one more parameter for your calculation function (by the way, you should have it), where to start screaming.

After completing this task, there is more. 3- Then you have to place 5 buttons on the screen and collect their prepared lines using the function that you defined earlier. 4- According to your starting and ending point, your prepared line should go up and down. 5- Now you can create cooked lines. It's time to calculate the real problem.

6- You need to calculate the required space and somehow figure out whether the buttons will be inserted. If not, you should put the button in the second strip and then use your magic L-draw method to connect them to the calculated starting position (you would have to calculate the y position of the starting points for each button.)

It continues. Just try to divide your task into small pieces, and then try to complete each of them without a headache.