Search code examples
androidandroid-layoutandroid-animationandroid-button

How can I make an animated/constant glowing effect around button in android?


I am seeking to make two buttons have a thin glow around them, kinda pulsating-fading effect

glowlike effect around button example image

The buttons have a background drawable image, and i just wanna have a glowing effect around it to make it kinda resonate with the music playing

I have already searched around multiple threads, and they were either just about an imageView, or upon pressed, or a Bitmap, so not necessarily what I am seeking

Here is my Button XML:

<Button
android:id="@+id/playEasyMode_Button"
android:layout_width="145dp"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/play_easy_button"
android:onClick="playEasyMode"
android:layout_margin="15dp"/>

Please dont try suggesting using background drawables upon pressed and whatnot, this is not what I am looking to do. I wanna set such effect either programatically or in the XML


edit: Object Animator offloat relative layout error image edit2: ok so as i have almost achieved the effect I want thanx to Aman Verma below, here is my updated XML right now:

<RelativeLayout
    android:id="@+id/relative_layout_id"
    android:layout_width="160dp"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true"
    android:background="#FFC107"
    android:alpha=".1"
    android:layout_gravity="center_horizontal"
    android:layout_margin="15dp">

    <Button
        android:id="@+id/playEasyMode_Button"
        android:layout_width="145dp"
        android:layout_height="40dp"
        android:layout_marginLeft="8dp"
        android:background="@drawable/play_easy_button"
        android:onClick="playEasyMode"
        android:layout_marginTop="8dp"/>

</RelativeLayout>

and this is the java code:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.home_screen_layout);

    //glowing button effect
    RelativeLayout relativelayout = (RelativeLayout)findViewById(R.id.relative_layout_id);

    ObjectAnimator fadeOut = ObjectAnimator.ofFloat(relativelayout, "alpha", .5f, .1f);
    fadeOut.setDuration(300);
    ObjectAnimator fadeIn = ObjectAnimator.ofFloat(relativelayout, "alpha", .1f, .5f);
    fadeIn.setDuration(300);

    final AnimatorSet mAnimationSet = new AnimatorSet();

    mAnimationSet.play(fadeIn).after(fadeOut);

    mAnimationSet.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            mAnimationSet.start();
        }
    });

    mAnimationSet.start();
}

It is currently animating BOTH the button AND the yellow color behind in the relative layout I need to set the button as is without being affected by the realtive layout animation


Solution

  • What you can do is you can make a relative layout as a background like this-

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#FFC107"
            android:alpha="0.1"
            android:layout_marginBottom="30dp">
    
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="40dp"
    
    
                />
    
        </RelativeLayout>
    

    i have set the alpha to 0.1 initially in relative layout.

    now in activity you can write the animation of fadein and fadeout-

    ObjectAnimator fadeOut = ObjectAnimator.ofFloat(relativelayout, "alpha", .5f, .1f);
            fadeOut.setDuration(300);
            ObjectAnimator fadeIn = ObjectAnimator.ofFloat(relativelayout, "alpha", .1f, .5f);
            fadeIn.setDuration(300);
    
            mAnimationSet = new AnimatorSet();
    
            mAnimationSet.play(fadeIn).after(fadeOut);
    
            mAnimationSet.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    mAnimationSet.start();
                }
            });
    
            mAnimationSet.start();
    

    EDIT 3:

    Update you layout like this copy and paste the code : change the color accordingly.

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp">
    
            <RelativeLayout
                android:id="@+id/relative_layout_id"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_centerInParent="true"
                android:background="#FFC107"
                android:alpha="0.1">
    
    
            </RelativeLayout>
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="#000000"
                android:layout_centerInParent="true"
    
                />
    
        </RelativeLayout>