Android Studio Question posted in
The official documentation can be found here.

Android Studio – How to achieve glow effect on focused icon in Android?

I want to show a similar glow like on this image
enter image description here

I know how to get dominant color using Palette. I was wondering how to show a glow effect like this.

Tags:

2

Answers


  1. 0

    I did a similar couple of days ago using a Third-party library. Follow initial steps by adding dependency and maven from here.

    below is the XML code of the Glowing button.

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@color/black"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.smb.glowbutton.GlowButton
        android:id="@+id/myGlowButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="16dp"
        android:layout_marginTop="8dp"
        app:gb_drawablePadding="50dp"
        app:gb_drawableTint="@color/black"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        app:gb_text="Prime Video"
        app:gb_textColor="@color/white"
        app:gb_textSize="16dp"
        app:gb_backgroundColor="#305B7B"
        app:gb_cornerRadius="15dp"
        app:gb_disabledTextColor="#808080"
        app:gb_glowAnimationDuration="500"
        app:gb_glowColor="#305B7B"
        app:gb_rippleAnimationDuration="1500"
        app:gb_rippleColor="#305B7B"
        app:gb_rippleEnabled="true" />

</LinearLayout>

    Output

    enter image description here

    Login or Signup to reply.
  2. 0 
    body{
 background:#444;  
}
button{
 background:#90efff;   
 color:#fff;
 border:solid white 2px;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 padding: 10px;
 transition:box-shadow .3s linear;
 -moz-transition:-moz-box-shadow .3s linear;
 -webkit-transition:-webkit-box-shadow .3s linear;
}
button:hover{
 box-shadow:0px 0px 15px #5da4c5;
 -moz-box-shadow:0px 0px 15px #5da4c5;
 -webkit-box-shadow:0px 0px 15px #5da4c5;   
}
    <button>Prime Video</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search