ConstraintLayout animation using placeholders
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’s with just few lines of code. I have already discussed Keyframe Animations with ConstraintLayout and ConstraintSet . Now in this post we will lean 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 want us to use layout editor tool. That’s why new layout editor provides very good control over ConstraintLayout. Let’s create an application which 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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 new activity. Create 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
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. If you have any other questions in mind then make sure to visit our ask section.
