Glow Button in Android

In this article, we are going to add a glowing button to our android studio app. We can use this button just as a normal button provided by android but with more advanced features and many customizations. A sample image is given below to get an idea about what we are going to do in this article.

Approach:

Step 1: Creating a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that choose Java as the language though we are going to implement this project in Java language.

Step 2: Before going to the coding section first do some pre-task

Go to app -> res -> values -> colors.xml file and set the colors.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#0F9D58</color>
    <color name="colorAccent">#05af9b</color>
    <color name="white">#ffffff</color>

</resources>

Step 3: Add dependency and JitPack Repository

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.   

implementation ‘com.github.SanojPunchihewa:GlowButton:1.0.1’

Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.

allprojects {
 repositories {
   ...
   maven { url "https://jitpack.io" }
     }
}

After adding this dependency sync your project and now we will move towards its implementation.  

Step 4: Designing the UI

In the activity_main.xml remove the default Text View and change the layout to Relative layout and add the GlowButton as shown below 

XML

<com.sanojpunchihewa.glowbutton.GlowButton
  android:textColor="@color/white"
  android:text="Hello World :)"
  android:layout_centerInParent="true"
  app:buttonColor="@color/colorPrimary"
  app:unpressedGlowSize="20dp"
  app:pressedGlowSize="25dp"
  app:glowColor="@color/colorPrimary"
  app:cornerRadius="50dp"
  android:layout_width="200dp"
  android:layout_height="80dp"/>

Properties of the GlowButton 

Attribute	Default Value	XML
button color	#8800FF	buttonColor
glow color	#885BFC	glowColor
unpressed glow size	10dp	unpressedGlowSize
pressed glow size	12dp	pressedGlowSize
corner radius	50dp	cornerRadius

Step 5: Coding Part

There is nothing to do with the MainActivity.java, leave the code as default as shown below 

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
}

Kotlin

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;


class MainActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main);
       }
}
// This code is cwritten by Ujjwal Kumar Bhardwaj

Output: