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...