Draw multilayer rectangle in fragment

Question

What's the best way to draw this image in a fragment (all rectangles should use the whole width of the screen and the height should be in specific dp measurements)? Obviously rectangles need to be drawn but I don't know how to draw the white and yellow rectangles on top of the big grey rectangle underneath. Also can this be achieved using the same fragment java class rather than having to create a new one?

platform

@Override
 public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Paint paint = new Paint();
    paint.setColor(Color.parseColor("#868F98"));
    Bitmap bg = Bitmap.createBitmap(480, 800, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bg); 
    canvas.drawRect(0, 0, 200, 200, paint); 
    LinearLayout ll = (LinearLayout) findViewById(R.id.rect);
    ll.setBackgroundDrawable(new BitmapDrawable(bg));   
 }

you need to try something and then come back. – Chris Bolton May 07 '15 at 20:01 — Chris Bolton, May 07 '15 at 20:01

score 2 · Accepted Answer · edited Sep 27 '19 at 15:47

You can use something like this. You can tweak is with custom attributes in attrs.xml and public methods to set colors and stuff to make it more customizable, but the basic idea is here.

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;


public class LayerRectangle extends View {


    private int measuredWidth, measuredHeight;
    private Paint mBackgroundPaint, mYellowLinePaint, mWhiteLinePaint;
    private RectF mBackgroundRect, mYellowLineRectF, mWhiteLineRectF;


    public LayerRectangle(Context context) {
        super(context);
        init(context, null, 0);
    }

    public LayerRectangle(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public LayerRectangle(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attributeSet, int defStyle) {

        mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBackgroundPaint.setColor(0xFF3C3C3C);
        mBackgroundPaint.setStyle(Paint.Style.FILL);

        mYellowLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mYellowLinePaint.setColor(0xFFFFFF00);
        mYellowLinePaint.setStyle(Paint.Style.FILL);

        mWhiteLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mWhiteLinePaint.setColor(0xFFFFFFFF);
        mWhiteLinePaint.setStyle(Paint.Style.FILL);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);

        mBackgroundRect = new RectF(0, 0, measuredWidth, measuredHeight);
        mYellowLineRectF = new RectF(0, 0.7f * measuredHeight, measuredWidth, 0.8f * measuredHeight);
        mWhiteLineRectF = new RectF(0, 0.9f * measuredHeight, measuredWidth, measuredHeight);

        setMeasuredDimension(measuredWidth, measuredHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (measuredHeight == 0 || measuredWidth == 0)
            return;

        canvas.drawRect(mBackgroundRect, mBackgroundPaint);
        canvas.drawRect(mYellowLineRectF, mYellowLinePaint);
        canvas.drawRect(mWhiteLineRectF, mWhiteLinePaint);
    }
}

Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <replace.me.with.your.package.name.LayerRectangle
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_centerVertical="true"
        />

</RelativeLayout>

And this is how it looks like

_{(source: shrani.si)}

Yes, I tried to keep it clean by not putting uncecessarry stuff into it as I mentioned custom attributes and other methods — Bojan Kseneman, May 07 '15 at 21:01
@BojanKseneman OK. Although you couldn't see it, there is also a white line in my drawing at the bottom (same height as the yellow line). Could you please adjust your code as necessary to include the white line at the very bottom? — wbk727, May 07 '15 at 21:24
@BojanKseneman Brilliant. Thanks. How can I do the same thing but with the white line at the top and the yellow line underneath that? — wbk727, May 07 '15 at 22:04
You define the postion of where each rectangle is and how big it is in the onMeasure method. If you want to swap the teo, just swap the parameters that are set to the rectangles in the onMeasure pass — Bojan Kseneman, May 07 '15 at 22:06
Play around a bit with those parameters and change them if you fill the need. — Bojan Kseneman, May 07 '15 at 22:08
@BojanKseneman Is it possible to use 1 java class in the same way you did to create something like the image in [my other question](http://stackoverflow.com/questions/30113281/draw-multi-object-diagram-in-fragment)? Or do I have to use more than one java class? — wbk727, May 08 '15 at 17:13
You can make it on one class, but I would make a LinearLayout with seven child views (same class). I would put the LinearLayout inside a RelativeLayout and put the red rectangle and tell the LinearLayout to be to the right of the one on the right and to the left of the one on the left. You can reuse layouts... http://developer.android.com/training/improving-layouts/reusing-layouts.html — Bojan Kseneman, May 08 '15 at 17:27
@BojanKseneman Do you know a proper solution for solving [this other issue programmatically (in Java using canvas not XML)](http://stackoverflow.com/questions/32037260/how-to-add-rectangles-on-top-of-existing-rectangle-in-canvas)? I've spent months trying to solve this issue but have had no luck and the answers that have been given don't solve the problem either. — wbk727, Aug 19 '15 at 19:02

Draw multilayer rectangle in fragment

1 Answers1