How to make a view like this ? Actually I tried wi

Question

I want to make the design like image and also display same in phone and 7 inch tab. I am using Linear layout by dividing the view in 5 part of the screen with using Framlayout draw a line but not possible to achieve like this image.

What's the other option like using canvas or any other better option.

First Image is displing expected result. and other two are getting result.

     <?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
    android:angle="360.0"
    android:endColor="#A29AA4"
    android:startColor="#A29AA4" />
  </shape>

Below layout

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:weightSum="5">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle1"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:background="@drawable/circleshape" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle2"
                        android:layout_width="20dp"
                        android:layout_height="20dp"

                        android:background="@drawable/circleshape" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle3"
                        android:layout_width="20dp"
                        android:layout_height="20dp"

                        android:background="@drawable/circleshape" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle4"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:background="@drawable/circleshape" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle5"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:background="@drawable/circleshape" />
                </LinearLayout>
            </LinearLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_gravity="center_vertical"
                android:background="#A29AA4">

            </RelativeLayout>

        </FrameLayout>

Answer 1

This is easier and cleaner in canvas. Here is how you would do the first one.. You can replicate this with slight modifications for the other two.

Create a Canvas View:

public class CanvasView  extends View {

Paint bPaint;
RectF coordbounds;

public CanvasView(Context context) {
    super(context);
}

private void init()
{
    bPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    bPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    bPaint.setColor(Color.BLACK);
}

@Override
public void onDraw(android.graphics.Canvas canvas)

{
    super.onDraw(canvas);

     canvas.drawLine(coordbounds.left,coordbounds.centerY(),
     coordbounds.right,coordbounds.centerY(),bPaint);

    int circledia=20;

    //Divide the line into four segments and subtract 2 * half the      radii
    float actualspan = (coordbounds.right - coordbounds.left) - (2 *   circledia/2);
    //Segment the line into 3 parts
    float interlinesegments = actualspan/(4-1);
    for(int i=0; i<4;i++)
    {
        canvas.drawCircle(coordbounds.left + circledia/2 +
         (i*interlinesegments),
         coordbounds.centerY(),10,bPaint);
    }
 }

}

Create a layout to hold the view and call this view in your activity:

LinearLayout layout = (LinearLayout) findViewById(R.id.root);

    CanvasView view = new CanvasView(this);
    layout.addView(view);

oops, I forgot . :-) Please add this method in CanvasView class to declare the bounding box and set the layout:

@Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {

    float xpad = (float) (getPaddingLeft() + getPaddingRight());
    float ypad = (float) (getPaddingTop() + getPaddingBottom());
    float coww = 0.0f, cohh = 0.0f, coll = 0.0f;
    init();
    coww = (float) w - xpad;
    cohh = (float) h - ypad;

    // Create a bounding box

    coordbounds = new RectF(0.0f,0.0f,
            coww,cohh);
}

EDIT : Change the above methods for bitmap

private void init()
{
    bPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    bPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    bPaint.setColor(Color.BLACK);

    bitmap = BitmapFactory.decodeResource(getResources(),
            R.drawable.button);
}

Change onDraw as follows:

@Override
public void onDraw(android.graphics.Canvas canvas)

{
    super.onDraw(canvas);

    canvas.drawLine(coordbounds.left,coordbounds.centerY(),
    coordbounds.right,coordbounds.centerY(),bPaint);

    int rectwidth=bitmap.getWidth();
    int rectheight=bitmap.getHeight();


    //Divide the line into four segments and subtract 2 * half the radii
    float actualspan = (coordbounds.right - coordbounds.left) - (2 * rectwidth/2);

    //Segment the line into 3 parts
    float interlinesegments = actualspan/(4-1);


    for(int i=0; i<4;i++)
    {


        float left= coordbounds.left + (i * interlinesegments);
        float top= coordbounds.centerY()-rectheight/2;
        float right = coordbounds.left+(i *    interlinesegments)+rectwidth;
        float bottom= coordbounds.centerY()+ rectheight/2;

       canvas.drawBitmap(bitmap,null,new RectF(left,top,right,bottom),null);


    }
}

Answer 2

With the help of above code and previous code I made this Combination of circle shape and bitmap.

   @Override
    public void onDraw(android.graphics.Canvas canvas)

{
    super.onDraw(canvas);

    canvas.drawLine(coordbounds.left, coordbounds.centerY(),
            coordbounds.right, coordbounds.centerY(), bPaint);

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_myprofile);

    int rectwidth=bitmap.getWidth();
    int rectheight=bitmap.getHeight();


    //Divide the line into four segments and subtract 2 * half the radii
    float actualspan_image = (coordbounds.right - coordbounds.left) - (2 * rectwidth/2);

    //Segment the line into 3 parts
    float interlinesegments_bitmap = actualspan_image / (4 - 1);


    int circledia = 20;

    //Divide the line into four segments and subtract 2 * half the      radii
    float actualspan = (coordbounds.right - coordbounds.left) - (2 *   circledia/2);
    //Segment the line into 3 parts
    float interlinesegments = actualspan/(4-1);

    for(int i=0; i<4;i++)
    {
        float left= coordbounds.left + (i * interlinesegments_bitmap);
        float top= coordbounds.centerY()-rectheight/2;
        float right = coordbounds.left+(i *    interlinesegments_bitmap)+rectwidth;
        float bottom= coordbounds.centerY()+ rectheight/2;

        if(i==1){
            canvas.drawBitmap(bitmap,null,new RectF(left,top,right,bottom),null);
        }else{
            canvas.drawCircle(coordbounds.left + circledia / 2 +
                            (i * interlinesegments),
                    coordbounds.centerY(), 10, bPaint);
        }


    }
}