Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 272
Cataster Avatar asked Aug 16 '17 02:08

Cataster


People also ask

How do you make a glowing animation?

Type “glow” into the Effects & Presets window, select the Glow effect, then drag and drop it onto the 'Light Scribble Effect' layer within your composition. It's time to enhance the look of the paint effect by adding a glow.


2 Answers

Step 1: Create a "glowing" drawable to put behind your button and put them both in a Framelayout. You'll need to put some padding around your button to be able to see the drawable behind it.

Step 2: Create an animation resource file like this and adjust the numbers to your likings.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fillAfter="true">

    <scale
        android:fromXScale="1"
        android:toXScale="0"
        android:fromYScale="1"
        android:toYScale="0"
        android:duration="400"
        android:pivotX="50%"
        android:pivotY="50%"
        />

    <scale
        android:startOffset="700"
        android:fromXScale="0"
        android:toXScale="1"
        android:fromYScale="0"
        android:toYScale="1"
        android:duration="400"
        android:pivotX="50%"
        android:pivotY="50%"
        />
</set>
like image 196
Lincoln White Avatar answered Oct 10 '22 03:10

Lincoln White


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>
like image 26
Aman Verma Avatar answered Oct 10 '22 05:10

Aman Verma