Creating responsive UI for android applications was very difficult by using some basic layouts like RelativeLayout, LinnearLayout, FrameLayout, etc. With ConstraintLayout we can create complex layouts furthermore making responsive UI  using animation is very simple. Using ConstraintLayout we can create complex animation with just a few lines of code. I have already discussed Keyframe Animations with ConstraintLayout and ConstraintSet. Now in this post, we will learn how we can create ConstraintLayout animation using placeholders.

DEMO

SOURCE CODE

ConstraintLayout animation using placeholders Example

In this year’s Google I\O google introduced many new features. While creating layout’s Google wants us to use the layout editor tool. That’s why the new layout editor provides very good control over ConstraintLayout. Let’s create an application that will make use of ConstraintLayout and placeholder with animations.

STEP 1 : Create or open existing android studio project.

STEP 2: Add gradle dependency for ConstraintLayout  as shown below

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.loopwiki.constrainlayoutanimationusingplaceholder"
        minSdkVersion 19
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

STEP 3: Now we will create a new activity. Create a new Layout activity_main.xml. Inside layout, we will add ConstraintLayout as a parent. In ConstraintLayout we will place four ImageButton’s as shown below.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/constraintLayout"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/mail" />

    <ImageButton
        android:id="@+id/favorite"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:background="#00000000"
        android:tint="#E64A19"
        android:src="@drawable/ic_favorite_black_24dp"
        app:layout_constraintEnd_toStartOf="@id/mail"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:tint="#512DA8"
        android:id="@+id/mail"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:background="#00000000"
        android:src="@drawable/ic_mail_black_24dp"
        app:layout_constraintEnd_toStartOf="@id/save"
        app:layout_constraintStart_toEndOf="@id/favorite"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:tint="#D32F2F"
        android:id="@+id/save"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:background="#00000000"
        android:src="@drawable/ic_save_black_24dp"
        app:layout_constraintEnd_toStartOf="@id/play"
        app:layout_constraintStart_toEndOf="@id/mail"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:tint="#FFA000"
        android:id="@+id/play"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:background="#00000000"
        android:src="@drawable/ic_play_circle_filled_black_24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/save"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

Create new class MainActivity. In this class on the click of any imagebutton we will move the image button to placeholder position. Use TransitionManager.beginDelayedTransition() to animate view while changing position.

package com.loopwiki.constrainlayoutanimationusingplaceholder;

import android.support.constraint.ConstraintLayout;
import android.support.constraint.Placeholder;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.TransitionManager;
import android.view.View;
import android.widget.ImageButton;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    //Placeholder declaration
    Placeholder mPlaceholder;

    //ConstraintLayout declaration
    ConstraintLayout mConstraintLayout;

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

        //Bind buttons from view
        ImageButton favorite = findViewById(R.id.favorite);
        //set on click listener
        favorite.setOnClickListener(this);
        ImageButton mail = findViewById(R.id.mail);
        mail.setOnClickListener(this);
        ImageButton save = findViewById(R.id.save);
        save.setOnClickListener(this);
        ImageButton play = findViewById(R.id.play);
        play.setOnClickListener(this);

        //Bind ConstraintLayout from view
        mConstraintLayout = findViewById(R.id.constraintLayout);

        //Bind Placeholder from view
        mPlaceholder = findViewById(R.id.placeholder);

    }

    @Override
    public void onClick(View view) {
        //call TransitionManager so and pass ConstraintLayout to perform smooth animation
        TransitionManager.beginDelayedTransition(mConstraintLayout);
        //finally set clicked view at placeholder
        mPlaceholder.setContentId(view.getId());
    }
}

STEP 4 : Run the application

If you still have any queries, please post them in the comments section below, I will be happy to help you.