How to make text glow?

Question

Can we apply glowing effect to any text like shown below:

Updated: Please also tell me what things i need to create something like this:

Do i need a Special font for this?

Philadelphia

I think you should post the second one as another question. Anyways, you probably need a custom View class for that one. Maybe it's possible with custom fonts, but I recommend creating a View for it and handling the drawing in the onDraw() method. – Edirne

Thanx for info Scythe but if i knew what you are telling me, i wouldn't be asking question here. simple sentences wont work for beginners like me... So please explain a bit give some supporting examples or atleast a link to refer to... – Philadelphia

i am sorry to ask you here: can you tell me what the layout of the seekbar in your first pic – Serrato

@pengwang... hehe.. i just copy the pictures from google, only thing i want was to ask you people about glowing effect... and i think its centred and layout can be linear... – Philadelphia

Answer 1

How about setting a blue shadow for the textview by using android:shadowColor and setting android:shadowDx and android:shadowDy to zero, with a pretty big android:shadowRadius?

Elizabetelizabeth

I use this but no effect... xml is: <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Glow" android:textSize="40sp" android:id="@+id/id_tv_GlowText" android:textStyle="bold" android:shadowColor="#0000ff" android:textColor="#0000ff" android:shadowDx="0.0" android:shadowDy="0.0" android:shadowRadius="280"/> also tried 210... same result... – Philadelphia

Love that I got the "enlightened" badge for a question about a glow effect. – Elizabetelizabeth

is there a way to do this for text on buttons with transparent background? – Jaqitsch

Hello @Elizabetelizabeth I gave <code> <item name="android:shadowColor">@android:color/black</item> <item name="android:shadowDx">0.0</item> <item name="android:shadowDy">0.0</item> <item name="android:shadowRadius">5</item> </code>. But it is not showing darker shadow .. What i want is darker shadow pbs.twimg.com/media/BnqtvaaIAAAVU8y.jpg What i am able to produce now is pbs.twimg.com/media/Bnqqk03IYAAGA1U.png Please help me how to make the shadow darker – Aureomycin

Answer 2

<TextView
    android:id="@+id/glowingText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:shadowColor="#cf1d1d"
    android:shadowDx="0.0"
    android:shadowDy="0.0"
    android:shadowRadius="8"
    android:text="Radioactive"
    android:textColor="#cf1d1d"
    android:textSize="20sp" />

i recommend to add a padding, because the shadow/glow effect increases the needed space.

For custom fonts create a folder with the name "fonts" in your assets folder. Then put your .ttf files inside it. You can convert .otf files online there are lots of websites.

Put this in your Class

Typeface myFont = Typeface.createFromAsset(getAssets(), "fonts/yourCustomFont.ttf");

and this is how you set the font to your textview

yourTextView.setTypeface(myFont);

i have tested the glow effect and it works with custom fonts too. Keep in mind that you maybe have to decrease the size of your text because custom fonts are for some reason bigger. I used the half of the sp size that i normally would use.

Legra

Answer 3

Bemmu is right. Thats the best way by far without going the full OpenGL route. You want to also make sure the TextView has an aquate padding set on each side otherwise a large radius shadow that matches the origin text color (or a slight shade brighter) will show the dropshadow clipping on each side of the TextView.

You might even be able to achieve even more of a blur effect by creating a layered view group with increasing/decreasing dropshadow effects (not sure what render perf would be like however)

Energumen

Answer 4

I had a workaround to achieve the requirement, but still not perfect....

The sample result:

https://cloud.githubusercontent.com/assets/5714437/3962552/d5c29fee-276c-11e4-9ea3-d1b31d8c54ac.png

Key point: * Give a Paint, and draw eight times in onDraw() from TextView *

public class ShadowTextView extends TextView {
private final Paint mStrokePaint = new Paint();
private final Rect mTextBounds = new Rect();
public ShadowTextView(Context context) {
    super(context);
    setupPaint();
}

public ShadowTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setupPaint();
}

public ShadowTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setupPaint();
}

protected void onDraw(Canvas canvas) {
    // Get the text to print
    final String text = super.getText().toString();
    // Figure out the drawing coordinates
    super.getPaint().getTextBounds(text, 0, text.length(), mTextBounds);
    float radius = (float) Math.hypot(3, 3);
    // draw everything
    drawShadow(canvas, text, 0, 3);
    drawShadow(canvas, text, 0, -3);
    drawShadow(canvas, text, 3, 0);
    drawShadow(canvas, text, -3, 0);

    drawShadow(canvas, text, radius, radius);
    drawShadow(canvas, text, -radius, radius);
    drawShadow(canvas, text, radius, -radius);
    drawShadow(canvas, text, -radius, radius);

    super.onDraw(canvas);
}

private void drawShadow (Canvas canvas, String text, float dx, float dy) {
    mStrokePaint.setShadowLayer(3, dx, dy, Color.BLACK);
    mStrokePaint.setXfermode(new PorterDuffXfermode(Mode.SRC_ATOP));
    canvas.drawText(text,
            0.0f + this.getPaddingLeft() * 1.0f , (super.getHeight() + mTextBounds.height()) * 0.5f,
            mStrokePaint);
}

private final void setupPaint() {
    mStrokePaint.setAntiAlias(true);
    mStrokePaint.setStyle(Paint.Style.FILL);
    // setup stroke
    mStrokePaint.setColor(0x75000000);
    mStrokePaint.setStrokeWidth(5);
    mStrokePaint.setTextSize(super.getTextSize());
    mStrokePaint.setFlags(super.getPaintFlags());
    mStrokePaint.setTypeface(super.getTypeface());
    mStrokePaint.setStrokeCap(Cap.ROUND);
    mStrokePaint.setStrokeJoin(Join.ROUND);
}

}

Bobsledding

Answer 5

Here is a simple css3 for glow effect

.button {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 48px/normal "Warnes", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.button:hover {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}
body{background:#000;}

<link async href="http://fonts.googleapis.com/css?family=Warnes" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>

<div class="button">Neel UPadhyay</div>

Havoc

The question is glowing text in android but you have answered using web concept – Barbie