\t\t\t\tWhen used with care, animation can be much more than a mere gimmick—it can improve the quality of the user experience. Subtlety is the key to using animation effectively: the best UI animations are the ones your users don’t notice because they feel natural.<\/p>\n
I created a small helper class called The animated fading effect is particularly nice in cases where a placeholder image is later replaced with an image that is downloaded from the Internet. The result is a smooth transition that makes the change less jarring.<\/p>\n Without further ado, the following is the code:<\/p>\n To use it, replace occurences of When used with care, animation can be much more than a mere gimmick—it can improve the quality of the user experience. Subtlety is the key to using animation effectively: the best UI animations are the ones your users don’t notice because they feel natural. I created a small helper class called FadeImageView that wraps Android’s […]<\/p>\n","protected":false},"author":1925,"featured_media":39167,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[5,4],"class_list":["post-3252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-android","tag-xamarin-platform"],"acf":[],"blog_post_summary":" When used with care, animation can be much more than a mere gimmick—it can improve the quality of the user experience. Subtlety is the key to using animation effectively: the best UI animations are the ones your users don’t notice because they feel natural. I created a small helper class called FadeImageView that wraps Android’s […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/3252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1925"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=3252"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/3252\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=3252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=3252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=3252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}FadeImageView<\/code> that wraps Android’s standard ImageView<\/code>, applying an automatic fade transition when changing pictures. I have started using this class everywhere that I would normally use an ImageView<\/code>.<\/p>\n\nusing System;\n\nusing Android.App;\nusing Android.Content;\nusing Android.OS;\nusing Android.Runtime;\nusing Android.Util;\nusing Android.Views;\nusing Android.Widget;\nusing Android.Graphics;\nusing Android.Views.Animations;\nusing Android.Graphics.Drawables;\n\nnamespace Foo\n{\n\tpublic class FadeImageView : ImageView\n\t{\n\t\tAnimation fadeInAnimation;\n\t\tAnimation fadeOutAnimation;\n\n\t\tpublic FadeImageView (Context ctx) : base (ctx)\n\t\t{\n\t\t\tInitialize ();\n\t\t}\n\n\t\tpublic FadeImageView (Context context, IAttributeSet attrs) :\n\t\t\tbase (context, attrs)\n\t\t{\n\t\t\tInitialize ();\n\t\t}\n\n\t\tpublic FadeImageView (Context context, IAttributeSet attrs, int defStyle) :\n\t\t\tbase (context, attrs, defStyle)\n\t\t{\n\t\t\tInitialize ();\n\t\t}\n\n\t\tvoid Initialize ()\n\t\t{\n\t\t\tfadeInAnimation = new AlphaAnimation (0, 1) {\n\t\t\t\tDuration = 500\n\t\t\t};\n\t\t\tfadeOutAnimation = new AlphaAnimation (1, 0) {\n\t\t\t\tDuration = 100\n\t\t\t};\n\t\t}\n\n\t\tvoid DoAnimation (bool really, Action changePic)\n\t\t{\n\t\t\tif (!really)\n\t\t\t\tchangePic ();\n\t\t\telse {\n\t\t\t\tEventHandler<Animation.AnimationEndEventArgs> callback = (s, e) => {\n\t\t\t\t\tchangePic ();\n\t\t\t\t\tStartAnimation (fadeInAnimation);\n\t\t\t\t\tfadeOutAnimation.AnimationEnd -= callback;\n\t\t\t\t};\n\t\t\t\tfadeOutAnimation.AnimationEnd += callback;\n\t\t\t\tStartAnimation (fadeOutAnimation);\n\t\t\t}\n\t\t}\n\n\t\tpublic void SetImageBitmap (Bitmap bm, bool animate)\n\t\t{\n\t\t\tDoAnimation (animate, () => SetImageBitmap (bm));\n\t\t}\n\n\t\tpublic void SetImageDrawable (Drawable drawable, bool animate)\n\t\t{\n\t\t\tDoAnimation (animate, () => SetImageDrawable (drawable));\n\t\t}\n\n\t\tpublic void SetImageResource (int resId, bool animate)\n\t\t{\n\t\t\tDoAnimation (animate, () => SetImageResource (resId));\n\t\t}\n\n\t\tpublic void SetImageURI (Android.Net.Uri uri, bool animate)\n\t\t{\n\t\t\tDoAnimation (animate, () => SetImageURI (uri));\n\t\t}\n\t}\n}\n<\/pre>\nImageView<\/code> with FadeImageView<\/code>. You can use it in Android XML layouts or in code. To activate the animation, simply use the overload accepting a boolean.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"