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.
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>