how do I create a drawable circle?

Question

I am a beginner in android. For learning purpose, I am developing the following UI using android studio.

The rectangle the screen is a textview and circle is an area where I can draw with hand.

The number of textview and circle is dynamic.

I am starting with Android, I looked at several examples but none really explained:

1) How to create a circle and enable user to draw inside it?

2) How to create a dynamic ui? I suppose this means adding view to viewgroup and dynamically creating multiple view groups etc.

Any help is greatly appreciated.

I don't understand exactly what you want but if it helps, for drwawing inside the circle you could use the `Canvas` class (check some tutorials) or also try with `SignaturePad` [SignaturePad on Github](https://github.com/gcacace/android-signaturepad) — Luis Aguilar, Dec 04 '19 at 00:48
Well, it's the tutorial that I am looking for. What I need is to create a circle and allow user to draw inside it. — wantro, Dec 04 '19 at 19:14

score 9 · Answer 1 · answered Dec 07 '19 at 05:34

Put this in a file called round_bg.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/white"/>
        </shape>
    </item>
</selector>

Then in your layout file you can refer to this file like this:

<View
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:background="@drawable/round_bg"/>

So you can get a round shape.

About your second question. You have to look into Recyclerview and adapters and so on.

score 2 · Answer 2 · answered Dec 13 '19 at 06:34

Create a drawable resouce file as rounded_circle.xml

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:innerRadius="0dp"
        android:shape="ring"
        android:thicknessRatio="2"
        android:useLevel="false">
        <solid android:color="@color/colorPrimary" />

        <stroke
            android:width="1.5dp"
            android:color="@color/colorPrimary" />
    </shape>

Use it in your layout xml as:

<View 
      android:layout_width="@dimen/dimen_20"
      android:layout_height="@dimen/dimen_20"
      android:background="@drawable/rounded_circle"/>

score 1 · Answer 3 · answered Dec 07 '19 at 06:57

If you want like this:

use this code

Put this in a file called round_bg.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#ddd"/>
    <corners android:radius="90dp"/>
</shape>

and your layout codes:

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="8dp">
        <TextView
            android:layout_width="275dp"
            android:layout_height="match_parent"
            android:text="TextView"
            android:gravity="center"
            android:background="#ddd"
            android:layout_marginRight="18dp"
            android:layout_marginEnd="18dp" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/circle"/>
    </LinearLayout>

if you want to create a dynamic ui , you can create customize view or use widgets like recyclerview or list view

score 0 · Answer 4 · answered Dec 07 '19 at 06:36

1) How to create a circle and enable user to draw inside it?

To draw inside a view you to create custom view and implement corresponding logic, you can find more about this topic in this answer.

2) How to create a dynamic ui? I suppose this means adding view to viewgroup and dynamically creating multiple view groups etc.

I suppose you need some kind of list here, please, take a look at RecyclerView.

RonTLV · Answer 5 · 2019-12-07T09:16:05.373

You can draw a circle with a custom view, then you can draw anything to the canvas. Example:

package com.example.customcircle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

public class CustomCircle extends View {

    private Paint paint = null;

    public CustomCircle(Context context) {
        super(context);
        init();
    }

    public CustomCircle(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public CustomCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setStyle( Paint.Style.FILL );
        paint.setColor( Color.BLACK );
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int radius = 300;
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, paint );
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
        // handle touch
    }
}

Usage:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <com.example.custumcircle.CustomCircle
        android:id="@+id/custumCircle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

score 0 · Answer 6 · answered Dec 10 '19 at 16:24

I wrote a simplest implementation of a draw pad. It was written by Kotlin. But when the count of lines increases, it'll have performance issue, and can be optimized in a lot of ways.

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View

class PathDrawView(context: Context, attributeSet: AttributeSet) : View(context, attributeSet) {
    // Path is used to describe how the line is drawn by canvas
    private val paths = mutableListOf<Path>()

    // The path which the user is drawing
    private lateinit var current: Path

    // init a paint for drawing the lines
    private val paint = Paint().apply { 
        color = Color.BLACK
        strokeWidth = 2f
        strokeJoin = Paint.Join.ROUND
        isDither = true
        isAntiAlias = true
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        val x = event.x
        val y = event.y
        when (event.action) {
            MotionEvent.ACTION_DOWN -> { // When use touch down, start the line drawing
                current = Path()
                paths.add(current)
                current.moveTo(x, y)
            }
            MotionEvent.ACTION_MOVE -> { // Every time user moves, update the path's data
                current.lineTo(x, y)
                invalidate() // request the view hierarchy to re-draw
            }
            MotionEvent.ACTION_UP -> {
            }
        }
        return true
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // draw all paths
        paths.forEach { 
            canvas.drawPath(it, paint)
        }
    }
}

score 0 · Answer 7 · answered Jan 09 '23 at 11:32

    Create this file in drawable folder like bg_rounded.xml
    <?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    
        <solid
            android:color="yourcolor"/>

        <stroke
            android:width="2dp"
            android:color="stroke color" />
    
        <size
            android:width="100dp"
            android:height="100dp"/>
    </shape>

how do I create a drawable circle?

7 Answers7