Skip to content
Related Articles

Related Articles

Improve Article

Glow Button in Android

  • Last Updated : 06 Apr, 2021
Geek Week

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);
  
    }
}

Output:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :