Part 5 – Placeholders


Watch the next part

In part 5 of the ConstraintLayout tutorial, we will learn how to use Placeholders to create templates and animate views.
We can replace the placeholder with any view we want, either by calling setContentId in Java or by setting the app:content attribute in xml.
When we replace the view dynamically, we can also very easily animate the transition with the TransitionManager.beginDelayedTransition method, where we pass the ConstraintsLayout itself as a parameter.
We can also build whole templates for portrait and landscape mode by putting the placeholders into a separate merge layout file, and then use them in another layout with the include tag.

Show more
Show less
Links & Dependenciesactivity_main.xml (Version 1)MainActivity.java (Version 1)header_template.xmlheader_template.xml (land)activity_main.xml (Version 2)

Design Support Library:

developer.android.com/topic/libraries/support-library/packages.html#design

<?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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.codinginflow.constraintlayout.MainActivity">

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="48dp"
        android:layout_height="48dp"
        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="parent" />

    <ImageView
        android:id="@+id/robot"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginBottom="32dp"
        android:onClick="swapView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/audio"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_android" />

    <ImageView
        android:id="@+id/audio"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginBottom="32dp"
        android:onClick="swapView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/palette"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/robot"
        app:srcCompat="@drawable/ic_audio" />

    <ImageView
        android:id="@+id/palette"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginBottom="32dp"
        android:onClick="swapView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/heart"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/audio"
        app:srcCompat="@drawable/ic_palette" />

    <ImageView
        android:id="@+id/heart"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginBottom="32dp"
        android:onClick="swapView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/happy"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/palette"
        app:srcCompat="@drawable/ic_heart" />

    <ImageView
        android:id="@+id/happy"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginBottom="32dp"
        android:onClick="swapView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/heart"
        app:srcCompat="@drawable/ic_happy" />

</android.support.constraint.ConstraintLayout>
package com.codinginflow.constraintlayout;

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;

public class MainActivity extends AppCompatActivity {
    private ConstraintLayout layout;
    private Placeholder placeholder;

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

        layout = findViewById(R.id.layout);
        placeholder = findViewById(R.id.placeholder);
    }

    public void swapView(View v) {
        TransitionManager.beginDelayedTransition(layout);
        placeholder.setContentId(v.getId());
    }
}
<?xml version="1.0" encoding="utf-8"?>
<merge 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:layout_height="match_parent"
    tools:parentTag="android.support.constraint.ConstraintLayout">

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:content="@+id/image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder_button"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginEnd="64dp"
        android:layout_marginBottom="8dp"
        app:content="@+id/button"
        app:layout_constraintBottom_toBottomOf="@+id/placeholder_image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/placeholder_image"
        app:layout_constraintVertical_bias="0.465" />

</merge>
<?xml version="1.0" encoding="utf-8"?>
<merge 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:layout_height="match_parent"
    tools:parentTag="android.support.constraint.ConstraintLayout">

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:content="@+id/image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintWidth_percent="0.5" />

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder_button"
        android:layout_width="50dp"
        android:layout_height="45dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:content="@+id/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</merge>
<?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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.codinginflow.constraintlayout.MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/sunrise" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email" />

    <include layout="@layout/header_template" />

</android.support.constraint.ConstraintLayout>