Create "L" shape curved line with dynamic data
<p>I want to draw a pure dynamic view like below image</p>

<p><a href="https://i.stack.imgur.com/NgO9y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NgO9y.png" alt="enter image description here"></a></p>

<p>I have two arraylist </p>

<pre><code>List&lt;String&gt; type and List&lt;Float&gt; level;
</code></pre>

<p><strong>type</strong> have <em>name</em>(max,type1,type2, etc) and <strong>level</strong> have <em>marker value</em> of type</p>

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

<p>Suppose I got .4 for min and .5 for max from server then all <strong>type</strong>(type1, type2, type3, etc) will lie between .4 and .5 . Then all rest of <strong>types</strong> 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.</p>

<p>If above design is bit complex then please give me some reference or link to achieve below design.
<a href="https://i.stack.imgur.com/Daqst.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Daqst.png" alt="enter image description here"></a></p>

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

<p>I have tried below code in onCreate() block.</p>

<pre><code>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);    

        }
    });

}  
</code></pre>

<p>and my inner class to draw view is below</p>

<pre><code>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);
        }
    }
</code></pre>

<p>My XML design is below</p>

<pre><code>&lt;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"&gt;

    &lt;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" &gt;
    &lt;/View&gt;


&lt;/LinearLayout&gt;
</code></pre>

<p>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? <a href="https://i.stack.imgur.com/pryrM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pryrM.png" alt="enter image description here"></a></p>