Open In App

Glow TextView in Android

Last Updated : 09 Apr, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

By default Android doesn’t provide a simple way to add the glow to the text view or any other view, so to make our app more attractive and beautiful we can add the glow effect to our TextView. In order to do so, we can use many different external libraries. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Glow TextView in Android Sample GIF

Approach

Step 1: Create 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 select Java as the programming 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 for the app.

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>


Go to Gradle Scripts > build.gradle (Module: app) section and import the following dependencies and click the “sync Now” on the above pop-up. 

// Adding glowtextview

implementation ‘com.riningan.widget:glowtextview:1.0’

Step 3: Designing the UI

In the activity_main.xml remove the default Text View and change the layout to Relative layout and add the GlowTextView and we also add 2 SeekBar to change the color and radius of the glow text view as shown below. Below is the code for the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!-- Glow Text View -->
    <com.riningan.widget.GlowTextView
        android:id="@+id/glowTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="40dp"
        android:text="Hello world :)"
        android:textColor="@android:color/white"
        android:textSize="40dp"
        app:glowColor="@color/Green"
        app:glowRadius="16dp" />
  
    <!-- simple seek bar to change the glow of the GlowTextView -->
    <SeekBar
        android:id="@+id/seekBarGlow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="80dp"
        android:max="100" />
  
    <!-- simple seek bar to change the color of the GlowTextView -->
    <SeekBar
        android:id="@+id/seekBarColor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="120dp" />
  
</RelativeLayout>


Properties:

  1. app:glowRadius: it is used to set the glow Radius [ default value 60f ]
  2. app:glowColor: it is used to set the  glow Color [ default color value WHITE ]

Step 4: Coding Part

Open the MainActivity.java file and inside the class, we create an array of integer to store different colors ( which we use later to change the color of the GlowTextView ) as shown below

Java




// array of different colors
int[] colors={Color.RED,Color.GREEN,Color.BLACK,Color.CYAN,Color.DKGRAY,Color.GRAY,Color.LTGRAY,Color.BLUE,Color.WHITE,Color.YELLOW,Color.MAGENTA};


Now inside the onCreate() get the reference of the GlowTextView and 2 SeekBar and set the max of the color SeekBar to the colors.length – 1 as shown below.

Java




// getting Glow seekBar reference
SeekBar seekBarGlow =(SeekBar)findViewById(R.id.seekBarGlow);
  
// getting Color seekBar reference
SeekBar seekBarColor =(SeekBar)findViewById(R.id.seekBarColor);
  
// setting the max of seekBar to color length -1
seekBarColor.setMax(colors.length-1);
  
// getting glowTextView reference
GlowTextView  glowTextView =(GlowTextView)findViewById(R.id.glowTextView);


Now create a SeekBarChangeListener of both the SeekBar and inside the onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) set the GlowColor and GlowRadius value to the process as shown below

Java




// seekBar change listener for changing the glow radius
seekBarGlow.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
           @Override
           public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
               // change the glow radius of the glow text view
               glowTextView.setGlowRadius(progress);
           }
  
           @Override
           public void onStartTrackingTouch(SeekBar seekBar) {
  
           }
  
           @Override
           public void onStopTrackingTouch(SeekBar seekBar) {
  
           }
       });
  
        // seekBar change listener for changing color
        seekBarColor.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                // change the glow color  of the glow text view
                glowTextView.setGlowColor(colors[progress]);
            }
  
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
  
            }
  
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
  
            }
});


Below is the complete code of the MainActvity.java file.

Java




import android.graphics.Color;
import android.os.Bundle;
import android.widget.SeekBar;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.riningan.widget.GlowTextView;
  
public class MainActivity extends AppCompatActivity {
  
    // array of different colors
    int[] colors = {Color.RED, Color.GREEN, Color.BLACK, Color.CYAN, Color.DKGRAY, Color.GRAY, Color.LTGRAY, Color.BLUE, Color.WHITE, Color.YELLOW, Color.MAGENTA};
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // getting Glow seekBar reference
        SeekBar seekBarGlow = (SeekBar) findViewById(R.id.seekBarGlow);
  
        // getting Color seekBar reference
        SeekBar seekBarColor = (SeekBar) findViewById(R.id.seekBarColor);
  
        // setting the max of seekBar to color length -1
        seekBarColor.setMax(colors.length - 1);
  
        // getting glowTextView reference
        GlowTextView glowTextView = (GlowTextView) findViewById(R.id.glowTextView);
  
  
        // seekBar change listener for changing the glow radius
        seekBarGlow.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                // change the glow radius of the glow text view
                glowTextView.setGlowRadius(progress);
            }
  
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
  
            }
  
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
  
            }
        });
  
        // seekBar change listener for changing color
        seekBarColor.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                // change the glow color  of the glow text view
                glowTextView.setGlowColor(colors[progress]);
            }
  
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
  
            }
  
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
  
            }
        });
    }
  
}


Output:



Similar Reads

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
2 min read
Flutter - Using the Avatar Glow
Flutter has a package called avatar_glow that provides an Avatar Glow Widget with cool background glowing animation. In this article, we will explore the same package with an example. Implementation: First, add the dependency to the pubspec.yaml file as shown below: Now import the following code to your main.dart file: import 'package:avatar_glow/a
2 min read
JavaFX | Glow Class
Glow class is a part of JavaFX. Glow is a high-level effect that makes the input image appear to glow using a configurable threshold. Glow class inherits Effect class. Constructors of the class: Glow(): Creates a new glow object with default parameters.Glow(double l): Creates a new instance of Glow with specified level.Commonly Used Methods: Method
4 min read
TextView in Android using Jetpack Compose
Jetpack Compose is a new toolkit provided by Google. This is useful for designing beautiful UI designs. Android TextView is a simple view in Android which is used to display text inside our App. In this article, we will take a look at the implementation of TextView in Android using Jetpack Compose. Attributes of TextView WidgetAttributes Descriptio
4 min read
How to add fading TextView animation in Android
TextView is the basic building block of user interface components. It is used to set the text and display it to the user. It is a very basic component and used a lot. A Fading TextView is a TextView that changes its content automatically every few seconds. If we want to design a beautiful interface than we can use Fading TextView. Approach: Add thi
1 min read
How to Display HTML in Textview along with Images in Android?
There are some situations when one needs to display rich formatted text in the app, like for a blog app or an app like Quora but Android's inbuilt function doesn't allow to display inline images by default, moreover they show the ugly blue line to the left of anything inside blockquote tag. Here is the simple solution to show HTML in TextView along
11 min read
Autosizing TextView in Android
If the user is giving the input and the input needs to be shown as TextView and if the user inputs the stuff which can go out of the screen, then in this case the font TextView should be decreased gradually. So, in this article, it has been discussed how the developer can reduce the size of TextView gradually as the user gives the data. One can hav
7 min read
How to Add a TextView with Rounded Corner in Android?
TextView is an essential object of an Android application. It comes in the list of some basic objects of android and used to print text on the screen. In order to create better apps, we should learn that how can we create a TextView which have a background with rounded corners. We can implement this skill in a practical manner for any android appli
2 min read
How to Make TextView and EditText Selectable in Android?
In this article, we are going to implement a very important feature related to TextView. While using any social media app or like using Facebook you may have seen there is a particular type of TextView which you cannot copy like a caption that people write on their posts. You can select the message but there few texts which cannot select or copy. S
3 min read
How to Increase or Decrease TextView Font Size in Android Programmatically?
In this App, we are going to learn how to increase or decrease TextView Font Size in android programmatically. Like we have seen that in many apps we sometimes want to enlarge the text. So here basically we are going to implement that. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going t
3 min read
Article Tags :
Practice Tags :