Android Kotlin: Circle drawable programmatically

Android Kotlin - Drawing a Circle Drawable Programmatically

This code snippet demonstrates how to create a circular shaped drawable programmatically in Kotlin for an Android application. It utilizes the GradientDrawable class and configures it to achieve a circle shape.

Here's a breakdown of the code:

  1. MainActivity.kt:

    • This file defines the main activity of the application.
    • In the onCreate method, it sets the layout for the activity (activity_main.xml) and calls the drawCircleShape function to create a circle drawable for two ImageViews (imageView and imageView2).

  2. drawCircleShape():

    • This private method is responsible for creating the circular drawable.
    • It creates a GradientDrawable object and applies various configurations:
      • Sets the shape to OVAL (which represents a circle).
      • Defines all eight corner radii as zero to ensure a complete circle without rounded corners.
      • Sets the solid color of the circle to cyan using Color.CYAN.
      • Sets the width and height of the drawable to ensure a perfect circle.

  3. activity_main.xml:

    • This file defines the layout for the activity.
    • It uses a ConstraintLayout as the root layout.
    • It defines two ImageView elements (imageView and imageView2) with different sizes.
    • The drawCircleShape method is used to set the drawable for both ImageViews in the onCreate method of the MainActivity.

Summary

This code provides a way to programmatically create circular shapes in your Android application using Kotlin. By manipulating the GradientDrawable class and setting specific properties, you can achieve a clean and efficient way to display circular elements within your UI. This approach offers flexibility as you can define the circle's color and size dynamically within your code.


MainActivity.kt 

package com.example.jetpack

import android.graphics.Color
import android.graphics.drawable.GradientDrawable
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // set image view image from drawable
        imageView.setImageDrawable(drawCircleShape())
        imageView2.setImageDrawable(drawCircleShape())
    }
}


// method to create a circle drawable programmatically
private fun drawCircleShape():GradientDrawable{
    return GradientDrawable().apply {
        shape = GradientDrawable.OVAL
        cornerRadii = floatArrayOf(0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f)
        setColor(Color.CYAN)

        // make sure width and height are same for circle shape
        // size is important, try to put same value as your view
        setSize(50,50)
    }
}
activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="250dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        tools:srcCompat="@tools:sample/avatars" />

</androidx.constraintlayout.widget.ConstraintLayout>
More android kotlin tutorials