Skip to content
Related Articles

Related Articles

Glow Button in Android

Improve Article
Save Article
  • Last Updated : 02 Aug, 2022
Improve Article
Save Article

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.

Glow Button in Android

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#8800FFbuttonColor
glow color#885BFCglowColor
unpressed glow size10dpunpressedGlowSize
pressed glow size12dppressedGlowSize
corner radius50dpcornerRadius

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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!