I am seeking to make two buttons have a thin glow around them, kinda pulsating-fading effect
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
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.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With