I'd like to achieve drawing a diagram just like the image attached but I'm having trouble drawing the red vertical rectangle on the right along with putting other objects on top. The biggest concern is the to do with numerous different screen sizes of Android devices. I fully understand what I'm trying to achieve during the process, which includes the objectives below. All help would be highly appreciated.
- 1 red rectangle on each side of the screen (right hand side I don't know how to draw there)
- 7 grey boxes in between the red vertical rectangles need to be equal in width
- a black vertical line needs to be in between the rectangles just like in the image above
- a text box showing a number needs to be in the center of each grey rectangle along with little red ones
- I also want to be able to reuse the diagram in future so I can fill the little boxes with red or black whenever I want
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">
<my.package.name.ComplexDiagram
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_centerVertical="true"
/>
</RelativeLayout>
Java
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 ComplexDiagram extends View {
private int measuredWidth, measuredHeight;
private Paint mGreyRectPaint, mBlackLinePaint, mRedRectPaint;
private RectF mGreyRect, mBlackLineF, mRedRectF;
public ComplexDiagram(Context context) {
super(context);
init(context, null, 0);
}
public ComplexDiagram(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public ComplexDiagram(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, AttributeSet attributeSet, int defStyle) {
mGreyRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mGreyRectPaint.setColor(0xFF3C3C3C);
mGreyRectPaint.setStyle(Paint.Style.FILL);
mBlackLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBlackLinePaint.setColor(0xFF000000);
mBlackLinePaint.setStyle(Paint.Style.FILL);
mRedRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mRedRectPaint.setColor(0xFFCC3333);
mRedRectPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
setMeasuredDimension(measuredWidth, measuredHeight);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (measuredHeight == 0 || measuredWidth == 0)
return;
canvas.drawRect(mGreyRect, mGreyRectPaint);
canvas.drawRect(mBlackLineF, mBlackLinePaint);
canvas.drawRect(mRedRectF, mRedRectPaint);
}
}
do it this way
Put this in your XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<View
android:layout_width="5dp"
android:layout_height="wrap_content"
android:background="#CC3333" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerHorizontal="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="1"
android:textColor="@android:color/black" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="#CC3333" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="2"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="3"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="4"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="5"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="6"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerHorizontal="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:layout_marginRight="1dp"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="7"
android:textColor="@android:color/black" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="1dp"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="5dp"
android:layout_height="wrap_content"
android:background="#CC3333" />
</LinearLayout>
for red rectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="@android:color/transparent" />
<stroke
android:width="1dip"
android:color="#CC3333" />
</shape>
来源：https://stackoverflow.com/questions/30113281/draw-multi-object-diagram-in-fragment