CODEWITHSUNDEEP
androidandroid-constraintlayoutandroid-transitions
Alon
Alon

Reputation: 703

TransitionManager and ConstraintLayout with Guideline not working

I am trying to get a view from full screen to half screen using TransitionManager ConstraintLayout and Guideline

this should be straight forward. Move from constraint to bottom parent, to the 50% guideline. Check out the video of the result. It reduces the height to 1dp.

enter image description here

My first layout:

<?xml version="1.0" encoding="utf-8"?><!--
  ~ (c) Facebook, Inc. and its affiliates. Confidential and proprietary.
  -->

<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/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="BadClassUsageInResource-FrameLayout">

    <!-- foreground image -->
    <ImageView
        android:id="@+id/foreground_image"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#ff0000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

My second layout:

<?xml version="1.0" encoding="utf-8"?><!--
  ~ (c) Facebook, Inc. and its affiliates. Confidential and proprietary.
  -->

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- foreground image -->
    <ImageView
        android:id="@+id/foreground_image"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="50dp"
        android:background="#ff0000"
        app:layout_constraintBottom_toTopOf="@+id/middle_guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#9944FF"
        android:text="skdfjhskdjfhksjd"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/middle_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/middle_guideline"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

</android.support.constraint.ConstraintLayout>

The transition when clicking:

ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(this, R.layout.second);
TransitionManager.beginDelayedTransition(mroot);
constraintSet.applyTo((ConstraintLayout) mroot);

Upvotes: 0

Views: 689

Answers (1)

Cheticamp
Cheticamp

Reputation: 62841

Make sure that the guideline is present in both of the layout files with the same id. The guideline should be horizontal and not vertical.

You should also clone the ConstraintSet from the layout that you are transitioning to. (It's not clear that this is the case.)

val constraintSet = ConstraintSet()
// Clone from the layout that we are transitioning to.
constraintSet.clone(this, R.layout.activity_main_2)
TransitionManager.beginDelayedTransition(mroot)
constraintSet.applyTo(mroot as ConstraintLayout?)

Do these things and it should work.

I should add that the your second layout with the TextView is only used for its constraints. The TextView will not appear in your layout after the transition. If you do want the TextView to appear, you will need to add it to the first layout.

Upvotes: 3

Related Questions