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.
