I have a simple selector for my ListView
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/yellow_arc" android:state_activated="true"/>
<item android:drawable="#drawable/yellow_nonarc" android:state_activated="false"/>
</selector>
I want to animate the transition between these drawables when the state of the views are changed from activated to not-activated and vica versa.
If you run the example in API demos you will see an obvious fade-in/fade-out animation while the activated state of the view is changed.
So what I want is a custom animation while the state of the view is changed. I think it should be done via xml but I couldn't find a way.
Thanks in advance.
EDIT:
I guess I have found something useful there's a activated_background.xml in \Android\android-sdk\platforms\android-API_VERSION\data\res\drawable which includes
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime">
<item android:state_activated="true" android:drawable="#android:drawable/list_selector_background_selected" />
<item android:drawable="#color/transparent" />
</selector>
So the example in API-demos achieveing this fade-out animation by declaring an exitFadeDuration. However, this is not exactly what I want.. I want to declare custom animations for the transition between the state drawables since the fade-in/fade-out animation does not look good for my drawables.
Added in api 21 "StateListAnimator"
http://developer.android.com/reference/android/animation/StateListAnimator.html
I know this is an old question but this may help future people looking to do this.
I guess TransitionDrawable could help you to accomplish this.
You can check the answer here:
Animate change of view background color on Android
The modern way (since api 21) of doing it with example:
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/checked"
android:drawable="#drawable/check_box_on"
app:check="true" /> <!-- this is custom state. You can use android:state_checked="true"-->
<item
android:id="#+id/unchecked"
android:drawable="#drawable/check_box_off"
app:check="false" />
<transition
android:drawable="#drawable/toggle_checkbox_unchecked_checked"
android:fromId="#+id/unchecked"
android:toId="#+id/checked" />
<transition
android:drawable="#drawable/toggle_checkbox_checked_unchecked"
android:fromId="#+id/checked"
android:toId="#+id/unchecked" />
</animated-selector>
documentation for animated-selector: link
where transition drawable is for example this:
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="#drawable/check_box_on">
<target android:name="check_box_on_path">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:interpolator="#android:interpolator/decelerate_cubic"
android:propertyName="trimPathEnd"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType" />
</aapt:attr>
</target>
</animated-vector>
documentation for animated-vector: link
Is it the fade you want?
I guess it would be the same as how a textSwitcher works, maybe you want to change it to a ViewSwitcher instead, the fade is done pro-grammatically
Animation in = AnimationUtils.loadAnimation(this,
android.R.anim.fade_in);
Animation out = AnimationUtils.loadAnimation(this,
android.R.anim.fade_out);
mSwitcher1.setInAnimation(in);
mSwitcher1.setOutAnimation(out);
Related
I was looking at animating the VectorDrawables I currently use in my BottomNavigationView when a tab is selected like in this Material Product Study for the Owl app. However unlike for the Toolbar view when I get the icon using MenuItem.getIcon(), cast it to AnimatedVectorDrawable and call the animate() method, there is no animation.
I was wondering if there is anything I could do to achieve this, if this will be likely included in the stable Material Components library or if I am better off creating a custom view extending the BottomNavigationView class.
we can animate the bottomnavigationview icon using below code:
bottomNavigationId.menu.getItem(i).icon =
AnimatedVectorDrawableCompat.create(this, R.drawable.ic_settings_active_avd)
val anim = bottomNavigationId.menu.getItem(i).icon as Animatable
anim.start()
but this is not working api > 24
So, better approach is create an AnimatedStateListDrawable where the AVD is the transition used into android:state_checked="true". Then you can just set this as the drawable on the MenuItem and it will run the AVD when the item is selected.
Eg:
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="16">
<item android:id="#+id/state_on"
android:drawable="#drawable/ic_settings_active"
android:state_checked="true"/>
<item android:id="#+id/state_off"
android:drawable="#drawable/ic_settings_inactive"/>
<transition
android:drawable="#drawable/ic_settings_active_avd"
android:fromId="#id/state_off"
android:toId="#id/state_on" />
</animated-selector>
Use this animated state list drawable as icon in menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/item_settings_fragment"
android:icon="#drawable/anim_settings"
android:title="#string/settings"
app:showAsAction="always" />
...
</menu>
Checkout below link for complete understanding bottomnavigationview with animated drawables
https://medium.com/#naththeprince/delightful-animations-in-android-d6e9c62a23d3
It's currently not possible to use animated icons with BottomNavigationView. We have had this feature request submitted internally, but have deprioritized work on it.
If you would like to help add support we'd gladly accept a pr at https://github.com/material-components/material-components-android
Make an animated vector drawable by using Shape Shifter
Add this line in build.gradle(Module:app)
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
Make Drawable selector file - selector_search.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:targetApi="16">
<item
android:id="#+id/state_on"
android:drawable="#drawable/avd_search"
android:state_checked="true" />
<item
android:id="#+id/state_off"
android:drawable="#drawable/icon_search" />
<transition
android:drawable="#drawable/avd_search"
android:fromId="#id/state_off"
android:toId="#id/state_on" />
</animated-selector>
avd search is animated vector drawable file
icon_search is normal drawable file
Use this drawable selector file as icon in menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/navigation_search"
android:icon="#drawable/selector_search"
android:title="#string/search"
/>
</menu>
Enjoy
How to have this blink effect on my notification icon during a download file, like that:
MY ANSWER
Just use this native drawable android.R.drawable.stat_sys_download
mBuilder.setContentTitle(title)
.setContentText(filename)
.setSmallIcon(android.R.drawable.stat_sys_download);
Try using an animation drawable.
For example:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/frame1On" android:duration="1000" />
<item android:drawable="#drawable/frame2Off" android:duration="1000" />
</animation-list>
Where frame1On on is the image highlighted, and frame2Off is the image greyed out. Add more frames if necessary.
I am using animation for my button but its too fast when I click the animation happens so fast you can barely see at the moment its just two drawables with a selector.xml state pressed true
How can I so slow the animation just a little bit
You can use android:enterFadeDuration and android:exitFadeDurationto achieve your desired effect.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="400" android:exitFadeDuration="400">
<item android:drawable="#color/pressed" android:state_pressed="true" />
<item android:drawable="#color/default" />
</selector>
This android:duration="200" is the time in miliseconds that your animation will occur. Go for 500 (0,5 seconds) or more if you want.
We are building an Android app where in the place of splash screen while waiting, i want to add an animation just like Boot animation of Moto G. Not exactly the same, but globe with some other elements will be used.
So my question is how to do it something like that?
Any input is much appreciated.
Thanks,
as for android .. you have to make animation manually ..
for this make xml file with animatiom-list under res/drawable .. then add items and give duration ..
EXAMPLE:::::
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="#drawable/image1"
android:duration="300"
/>
<item
android:drawable="#drawable/image2"
android:duration="300"
/>
<item
android:drawable="#drawable/image3"
android:duration="300"
/>
<item
android:drawable="#drawable/image4"
android:duration="300"
/>
android:oneshot="false" is to repeat animation again and again .. if you dont want to repeat then make it true
after you make animation .. add it in a imageview ..
I want an animated gif, since this isn't possible in Android I am using individual frames in a transition.
except it seems like the transition class only will show two frames ever! I saw other animation methods but they didn't seem to apply to what I was doing, or seemed old and convulated like for an older infant android build
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/activateanima"></item>
<item android:drawable="#drawable/activateanimb"></item>
<item android:drawable="#drawable/activateanimc"></item>
<item android:drawable="#drawable/activateanimc"></item>
<item android:drawable="#drawable/activateanimd"></item>
<item android:drawable="#drawable/activateanime"></item>
<item android:drawable="#drawable/activateanimf"></item>
<item android:drawable="#drawable/activateanimg"></item>
</transition>
How do I animate an image to behave like an animated gif, in place. no rotations or translations here. Using android 2.1+
Are you after a Frame animation? See: here. This will play a standing still animation.
Example from above site:
XML file saved at res/anim/rocket.xml:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust3" android:duration="200" />
</animation-list>
To use:
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
rocketAnimation.start();
Just use a view flipper to flip between the images. Just define your in and out animations to be 0seconds long and they should be instantianous. (but use alpha to be sure). View flipper has the benefit of also auto animating and auto starting