Create Multiple circle in Design Layout and add small circle on it by programmatically?

Question

Hi I'm trying to create a layout has multiple circle in center of screen. then add small circle on it by programmatically.

Creating such layout

Below are my code to try to achieve these but not success.

Circle XML Code

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:top="8px">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#c2c2c2" />
                    <padding
                        android:bottom="6px"
                        android:left="6px"
                        android:right="6px"
                        android:top="6px" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#e3e3e3" />
                    <padding
                        android:bottom="4px"
                        android:left="4px"
                        android:right="4px"
                        android:top="4px" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#d1d1d1" />
                    <padding
                        android:bottom="3px"
                        android:left="3px"
                        android:right="3px"
                        android:top="3px" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#e2e2e2" />
                    <padding
                        android:bottom="2px"
                        android:left="2px"
                        android:right="2px"
                        android:top="2px" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#a2a2a2" />
                    <padding
                        android:bottom="1px"
                        android:left="1px"
                        android:right="1px"
                        android:top="1px" />
                </shape>
            </item>
        </layer-list>
    </item>
</layer-list>

Layout Code

<?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="match_parent"
    android:layout_centerInParent="true"
    android:background="@drawable/circle"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Circle1"/>

</LinearLayout>

My Layout Image like these

How can I create such layout. give me some hint to achieve such layout.

Thanks in advanced

I'm not yet create such custom view. Can suggest any tutorial or sample to make custom view — Kailas, Nov 18 '15 at 18:33
For the layout, see http://stackoverflow.com/questions/21613308/how-to-draw-a-circle-inside-a-circle-using-android-xml-shapes/27569549#27569549 — Sean Barbeau, Nov 18 '15 at 19:00

score 1 · Answer 1 · answered Nov 18 '15 at 18:57

I have created a custom view . you can take help from that

attrs.xml

 <?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomLineDotsView">
    <attr name="viewColor" format="color" />
    <attr name="paddingPercentage" format="float"/>
    <attr name="circleRadius" format="integer"></attr>
</declare-styleable>

CustomView class

   public class CustomLineDotsView extends View {

private int viewColor,circleRadius;
float paddingPercentage;
Paint viewPaint;

public CustomLineDotsView(Context context,AttributeSet attrs) {
    super(context);

    viewPaint = new Paint();
    //get the attributes specified in attrs.xml using the name we included
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
            R.styleable.CustomLineDotsView, 0, 0);
    try {
        //get the text and colors specified using the names in attrs.xml
        viewColor = a.getInteger(R.styleable.CustomLineDotsView_viewColor, 0);
           paddingPercentage =       a.getFloat(R.styleable.CustomLineDotsView_paddingPercentage, 0);//0 is default
        circleRadius = a.getInteger(R.styleable.CustomLineDotsView_circleRadius, 0);

    } finally {
        a.recycle();
    }


}


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

    int measuredWidth = getMeasuredWidth();
    int measuredHeight = getMeasuredHeight();

    viewPaint.setColor(viewColor);
    viewPaint.setStyle(Paint.Style.FILL);


    canvas.drawCircle(((measuredWidth * paddingPercentage) / 100), measuredHeight / 2, circleRadius, viewPaint);
    canvas.drawCircle((measuredWidth - ((measuredWidth * paddingPercentage) / 100)), measuredHeight / 2, circleRadius,viewPaint);

    canvas.drawLine(
            ((measuredWidth * paddingPercentage) / 100),
            (measuredHeight / 2),
            (measuredWidth - ((measuredWidth * paddingPercentage) / 100)), (measuredHeight/2),viewPaint);

}


}

How to use this view in your layout

                <yourpackagename.CustomLineDotsView
                android:layout_width="match_parent"
                android:layout_height="24dp"
                card_view:circleRadius="8"
                card_view:paddingPercentage="20"
                card_view:viewColor="@color/login_background" />

Follow this links for your reference

http://developer.android.com/guide/topics/ui/custom-components.html http://www.vogella.com/tutorials/AndroidCustomViews/article.html http://code.tutsplus.com/tutorials/android-sdk-creating-custom-views--mobile-14548

thanks bond will try by ref your helping code. thanks – Kailas Nov 18 '15 at 19:42 — Kailas, Nov 18 '15 at 19:42

score 1 · Accepted Answer · answered Nov 27 '15 at 08:40

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

    <TextView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="@drawable/circle"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:textColor="#FFFFFF"
        android:textSize="10dp" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    <TextView
        android:id="@+id/large_volume"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@drawable/yellow_circle"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:textColor="#FFFFFF"
        android:textSize="10dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/medium_volume"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/green_circle"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:textColor="#FFFFFF"
            android:textSize="10dp" />


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/small_volume"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/circle"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:textColor="#FFFFFF"
            android:textSize="10dp" />
        <RelativeLayout
            android:id="@+id/small_circle"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

        </RelativeLayout>
    </RelativeLayout>

    </RelativeLayout>
    </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

Create Multiple circle in Design Layout and add small circle on it by programmatically?

2 Answers2