CODEWITHSUNDEEP
androidanimationbuttontransition
Kevin Li
Kevin Li

Reputation: 195

Android: How to add color fade-in animation for custom button

I have made an xml specifying 2 states for a button (pressed and non-pressed states). The pressed button has a color filled in, while the non-pressed button has a border with some text in it. How can I make the non-pressed button fade into the pressed button when the user touches it and revert back to the non-pressed button as soon as the user releases the button?

EDIT:

It seems that most of the answers did not exactly solve my problem and although the transitiondrawable seems like it could work, I don't know how to implement it with my current code.

To clarify further, the following is my code for a button stored in the drawable folder named button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/buttonpressed"
        android:state_enabled="true"
        android:state_pressed="true"/>

    <item
        android:drawable="@drawable/buttonnormal"
        android:state_enabled="true"/>

</selector>

I have already referenced the drawable xml in my main xml file.

I want to be able to fade from "buttonnormal" to "buttonpressed" when the button is pressed and revert back to "buttonnormal" when the button is released.

Upvotes: 1

Views: 4542

Answers (3)

amit pandya
amit pandya

Reputation: 1388

I think its little late now but, you can add from following steps:

  1. Add the below colour values to the colors.xml located in res ⇒ values ⇒ colors.xml.

    <?xml version="1.0" encoding="utf-8"?>

    <resources>

    <color name="colorPrimary">#3F51B5</color>

    <color name="colorPrimaryDark">#303F9F</color>

    <color name="colorAccent">#FFFFFF</color>

    <!-- Gradient color -->

    <color name="colorPurple_A400">#D500F9</color>

    <color name="colorPurple_900">#4A148C</color>

</resources>

  1. Add below line in your styles.xml file:

    <item name="android:windowTranslucentStatus">true</item>

  2. Add the drawable for this gradient: [Make a file in the drawable folder like eg: gradient.xml and add these lines...]

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient android:angle="90" android:endColor="@color/colorPurple_A400" android:startColor="@color/colorPurple_900" /> </shape>

  1. Make a file called anime_list.xml inside the drawable folder and add these lines:

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/drawable_purple_gradient" android:duration="6000" />

</animation-list>

Now add this anime_list.xml as background of main root-layout element like:

android:background="@drawable/anime_list"
  1. In MainActivity.java file add these modifications:

public class MainActivity extends AppCompatActivity {

private ConstraintLayout constraintLayout;
private AnimationDrawable animationDrawable;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    getSupportActionBar().hide();

    // init constraintLayout
    constraintLayout = (ConstraintLayout) findViewById(R.id.constraintLayout);

    // initializing animation drawable by getting background from constraint layout
    animationDrawable = (AnimationDrawable) constraintLayout.getBackground();

    // setting enter fade animation duration to 5 seconds
    animationDrawable.setEnterFadeDuration(5000);

    // setting exit fade animation duration to 2 seconds
    animationDrawable.setExitFadeDuration(2000);
}
}

And you are good to go...

Reference: animated-gradient-background-in-android

Upvotes: 0

Gekkula
Gekkula

Reputation: 171

Use ObjectAnimator

int colorFrom = 0xaaaaaaaa;
int colorTo = 0xffFFFFFF;
int duration = 500;
Button myButton = (Button)findViewById(R.id.myButton);
ObjectAnimator anim = ObjectAnimator.ofObject(myButton, "backgroundColor", new ArgbEvaluator(), colorFrom, colorTo)

anim.addListener(new AnimatorListener() {
    @Override 
    public void onAnimationEnd(Animator animation) {
        // Trigger the events after animation is ended
    }
   @Override
    public void onAnimationEnd(Animation arg0) {
    }
    @Override
    public void onAnimationRepeat(Animation animation) {
    }
});
anim.setDuration(duration).start();

Upvotes: 6

Antrromet
Antrromet

Reputation: 15424

Create a 3rd xml file, say button_bg.xml, with the following content

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/pressed" android:state_selected="true"/>
    <item android:drawable="@drawable/pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/normal"></item>

</selector>

where pressed.xml and normal.xml are your xmls with the color filled in and otherwise, respectively. Now set the above xml as the background of the button.

         <Button
                android:id="@+id/button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/button_bg"/>

Upvotes: 0

Related Questions