{"id":3424,"date":"2013-01-14T11:22:18","date_gmt":"2013-01-14T19:22:18","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=3424"},"modified":"2013-01-14T11:22:18","modified_gmt":"2013-01-14T19:22:18","slug":"android-tricks-eye-candy-using-layout-animations","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/android-tricks-eye-candy-using-layout-animations\/","title":{"rendered":"Android Tricks: Eye Candy Using Layout Animations"},"content":{"rendered":"

\t\t\t\tSince Android 3.0 (API level 11), a lot of effort has gone into improving the visual appeal of the operating system. In addition to adding eye candy to the builtin software, Google also introduced new features in the Android development frameworks that make it easier for third-party developers to improve the look and feel of their own applications. One such improvement is the ability to add animations to existing ViewGroup<\/code> elements (i.e. every layout object) without having to write the code by hand.<\/p>\n

When using the android:animateLayoutChanges<\/a> attribute with a ViewGroup<\/code>, a set of default animations are registered on the ViewGroup<\/code>‘s child views during layout changes. By default, visibility and size modifications are taken into account. The first produces a fading effect and the second produces a sliding animation.<\/p>\n

These two default effects can be used together with a LinearLayout<\/code> to make a nice transition between two states of the same widget:<\/p>\n

In the video above, my widget has two different presentation modes: one for user selection and the other for drag-and-drop interaction. The latter mode is triggered by a user action (starting the drag).<\/p>\n

Here is the relevant part of my layout XML for the widget skeleton:<\/p>\n

\n<LinearLayout\n    android:orientation="vertical"\n    android:layout_width="fill_parent"\n    android:layout_height="wrap_content"\n    android:layout_marginLeft="16dp"\n    android:layout_marginTop="16dp"\n    android:layout_marginRight="16dp"\n    android:animateLayoutChanges="true"\n    android:id="@+id\/animatedLayout">\n    <LinearLayout\n        android:orientation="vertical"\n        android:layout_width="fill_parent"\n        android:layout_height="wrap_content"\n        android:layout_marginBottom="7dp"\n        android:id="@+id\/mode1">\n\n\t\t<!-- Widget mode 1 layout -->\n\n    <\/LinearLayout>\n    <LinearLayout\n        android:orientation="horizontal"\n        android:layout_width="wrap_content"\n        android:layout_height="1px"\n        android:layout_gravity="center"\n        android:id="@+id\/mode2">\n\n        <!-- Widget mode 2 layout -->\n\n    <\/LinearLayout>\n<\/LinearLayout>\n<\/pre>\n
The outer LinearLayout<\/code> is the one that contains the android:animateLayoutChanges<\/code> attribute. Both widget modes are also LinearLayout<\/code> objects.<\/p>\n
Since the first mode is the one shown by default, its layout height is set to wrap_content<\/code> whereas the second mode layout is artificially hidden by setting its height to 1 pixel.<\/p>\n
To go from mode 1 to mode 2, I use the following code in the drag started event handler:<\/p>\n
\nvar parms = mode2.LayoutParameters as LinearLayout.LayoutParams;\nparms = new LinearLayout.LayoutParams (parms) {\n\tHeight = ViewGroup.LayoutParams.WrapContent,\n\tGravity = GravityFlags.Center\n};\nmode2.LayoutParameters = parms;\nmode1.Visibility = ViewStates.Gone;\n<\/pre>\n
And to go the other way, we simply restore the XML state we had beforehand with a similar code:<\/p>\n
\nmode1.Visibility = ViewStates.Visible;\nvar parms = mode2.LayoutParameters as LinearLayout.LayoutParams;\nparms = new LinearLayout.LayoutParams (parms) {\n\tHeight = 1,\n\tGravity = GravityFlags.Center\n};\nmode2.LayoutParameters = parms;\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Since Android 3.0 (API level 11), a lot of effort has gone into improving the visual appeal of the operating system. In addition to adding eye candy to the builtin software, Google also introduced new features in the Android development frameworks that make it easier for third-party developers to improve the look and feel of […]<\/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-3424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-android","tag-xamarin-platform"],"acf":[],"blog_post_summary":"
Since Android 3.0 (API level 11), a lot of effort has gone into improving the visual appeal of the operating system. In addition to adding eye candy to the builtin software, Google also introduced new features in the Android development frameworks that make it easier for third-party developers to improve the look and feel of […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/3424","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=3424"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/3424\/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=3424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=3424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=3424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}