How To Draw The Below Image In Android Programatically?

I am new to android. I'm finding very difficulty in using the Canvas. How to draw the below image in android? I also want to make the alphabet selected highlighted when it is touch

Solution 1:

Here it is:

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="64dp"android:background="#000"><!-- Main area --></FrameLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="64dp"android:layout_gravity="center_horizontal"android:orientation="horizontal"><Viewandroid:id="@+id/a"android:layout_width="64dp"android:layout_height="64dp"android:background="#f00"/><Viewandroid:id="@+id/b"android:layout_width="64dp"android:layout_height="64dp"android:background="#0f0"/><Viewandroid:id="@+id/c"android:layout_width="64dp"android:layout_height="64dp"android:background="#00f"/></LinearLayout><LinearLayoutandroid:layout_width="64dp"android:layout_height="wrap_content"android:layout_gravity="center_vertical|right"android:orientation="vertical"><Viewandroid:id="@+id/d"android:layout_width="64dp"android:layout_height="64dp"android:background="#ff0"/><Viewandroid:id="@+id/e"android:layout_width="64dp"android:layout_height="64dp"android:background="#0ff"/><Viewandroid:id="@+id/f"android:layout_width="64dp"android:layout_height="64dp"android:background="#f0f"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="64dp"android:layout_gravity="center_horizontal|bottom"android:orientation="horizontal"><Viewandroid:id="@+id/g"android:layout_width="64dp"android:layout_height="64dp"android:background="#900"/><Viewandroid:id="@+id/h"android:layout_width="64dp"android:layout_height="64dp"android:background="#090"/><Viewandroid:id="@+id/i"android:layout_width="64dp"android:layout_height="64dp"android:background="#009"/></LinearLayout><LinearLayoutandroid:layout_width="64dp"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:orientation="vertical"><Viewandroid:id="@+id/l"android:layout_width="64dp"android:layout_height="64dp"android:background="#990"/><Viewandroid:id="@+id/k"android:layout_width="64dp"android:layout_height="64dp"android:background="#099"/><Viewandroid:id="@+id/j"android:layout_width="64dp"android:layout_height="64dp"android:background="#909"/></LinearLayout></FrameLayout>

EDITED

You also can do this within one view with help of canvas:

publicclassGameViewextendsView {
    privatefinalint[] colors = {
            0xffff0000, 0xff00ff00, 0xff0000ff,
            0xffffff00, 0xff00ffff, 0xffff00ff,
            0xff990000, 0xff009900, 0xff000099,
            0xff999900, 0xff009999, 0xff990099};

    privatefinal Paint[] paints = newPaint[colors.length];
    privatePaintmainAreaPaint=newPaint();

    private RectF mainAreaRect;

    publicGameView(Context context) {
        super(context);
        init();
    }

    publicGameView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)publicGameView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    @OverrideprotectedvoidonDraw(Canvas canvas) {
        super.onDraw(canvas);
        floatsquareSize= Math.min(getWidth(), getHeight()) / 7;

        //draw main area
        canvas.drawRect(newRectF(squareSize, squareSize, 6 * squareSize, 6 * squareSize), mainAreaPaint);

        //draw top squares
        canvas.drawRect(newRectF(2 * squareSize, 0, 3 * squareSize, squareSize), paints[0]);
        canvas.drawRect(newRectF(3 * squareSize, 0, 4 * squareSize, squareSize), paints[1]);
        canvas.drawRect(newRectF(4 * squareSize, 0, 5 * squareSize, squareSize), paints[2]);

        //draw right squares
        canvas.drawRect(newRectF(6 * squareSize, 2 * squareSize, 7 * squareSize, 3 * squareSize), paints[3]);
        canvas.drawRect(newRectF(6 * squareSize, 3 * squareSize, 7 * squareSize, 4 * squareSize), paints[4]);
        canvas.drawRect(newRectF(6 * squareSize, 4 * squareSize, 7 * squareSize, 5 * squareSize), paints[5]);

        //draw bottom squares
        canvas.drawRect(newRectF(4 * squareSize, 6 * squareSize, 5 * squareSize, 7 * squareSize), paints[6]);
        canvas.drawRect(newRectF(3 * squareSize, 6 * squareSize, 4 * squareSize, 7 * squareSize), paints[7]);
        canvas.drawRect(newRectF(2 * squareSize, 6 * squareSize, 3 * squareSize, 7 * squareSize), paints[8]);

        //draw left squares
        canvas.drawRect(newRectF(0, 4 * squareSize, squareSize, 5 * squareSize), paints[9]);
        canvas.drawRect(newRectF(0, 3 * squareSize, squareSize, 4 * squareSize), paints[10]);
        canvas.drawRect(newRectF(0, 2 * squareSize, squareSize, 3 * squareSize), paints[11]);
    }

    privatevoidinit() {
        for(inti=0; i < colors.length; i++) {
            paints[i] = initPaint(colors[i]);
        }

        mainAreaPaint = initPaint(0xff000000);
    }

    private Paint initPaint(int color) {
        Paintpaint=newPaint();
        paint.setAntiAlias(true);
        paint.setColor(color);
        paint.setStyle(Paint.Style.FILL);
        return paint;
    }
}

Sorry about bad-performance-code. Of course you need to place all initializations of Rects in onMeasure method and properly handle andoird xml attributes like minHeight and e.t.c. Also it's is up to you to write right positioning of drawed paining inside view (in center, in corner e.t.c), but I just wrote a sample to catch main point. Here is screenshot, what we have in the end: