Tutorials ▶ UI
Tutorials ▶ UI ▶ Layout
Beautiful Animations with ContraintLayout

Minimal coding required

ConstraintLayout seems to be the hot new thing nowadays. Flattening your view hierarchy, improving performance, supporting arbitrary bounding rules — it promises to fix all of the shortcomings of some previous layout files (*cough* I’m looking at you RelativeLayout *cough*) and more. But there is one other benefit of ConstraintLayout that most people are unaware of and the official documentation curiously doesn’t mention anything about: performing cool animations on your ConstraintLayout views with very little code.


I’m going to assume that you know the basics of ConstraintLayout (e.g. you know what is app:layout_constraintLeft_toLeftOf and its relatives). Most of the tutorials on ConstraintLayout focus on using the newly improved Android Studio layout design panel where you can drag/drop/visualize the various constraints. For the purposes of animations, it’s also good to take a peek at the generated XML to get a better understanding of the various constraint attributes so you know how to manipulate them.

Full article

Tutorials ▶ UI ▶ Animation

SpringAnimation with examples

Have you ever wanted to do a bouncy animation like one of these on Android? If you have, you’re in for a treat!

Dynamic-animation is a new module introduced in revision 25.3.0 of the Android Support Library. It provides a small set of classes for making realistic physics-based view animations.

You might say “whatever, I’m just gonna slap a BounceInterpolator or an OvershootInterpolator on my animation and be good”Well, in reality these two often don’t look that great. Of course, you could always write your own interpolator or implement a whole custom animation – but now there’s a much easier way.

Full article

Tutorials ▶ UI ▶ Animation

Workcation App

Welcome to the first of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.

As we can see in the animation, there is a lot of going on:

  1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
  2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
  3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
  4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.

Full article 

Tutorials ▶ UI ▶ Layout
Fragments Introduction

The mini-me's of Activities

This tutorial is an introduction to Android Fragments. You will learn the fundamental concepts of Android Fragments while creating an app that displays the rage comics.

Update note: This tutorial has been updated to API 25 and Android Studio 2.2.2 by Huyen Tue Dao. The original tutorial was written by Huyen Tue Dao.

fragmentnoun | /’frag-mənt/
an isolated or incomplete part of something.

A fragment is an Android component that holds part of the behavior and/or UI of an activity. As the name intimates, fragments are not independent entities, but are subservient to a single activity.

In many ways, they resemble and echo the functionality of activities.

Full article