Glow Button in Android
Last Updated :
02 Aug, 2022
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);
}
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...