Fix Overlapping Collapsing/Expanding Cards Java

tsc101 :

I am using Android Studio to create 2 CardViews that expand and collapse on a mouseclick. However, when I expand a card, the card underneath does not get pushed down and still visible even if the card above is expanded and is an overlap problem. How do i fix this so either the card below the one being expanded gets pushed down or that the card that is being expanded information is at the front?

Screenshot of how cards look before clicked:Before Clicked

screenshot of when when clicked: when clicked (as you can see the 'Steven Smith card is still being shown)

Note: I did look into using a Recycler View + adapter etc. but in each card I would want different layouts/images (vs all being consistent info like a contact in someones phone)

Here is my java code:

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

        expandableView = findViewById(R.id.expandableView);
        arrowBtn = findViewById(R.id.arrowBtn);
        cardView = findViewById(R.id.cardView);


        arrowBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (expandableView.getVisibility()==View.GONE){
                    TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
                    expandableView.setVisibility(View.VISIBLE);
                    arrowBtn.setBackgroundResource(R.drawable.down_arrow);
                } else {
                    TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
                    expandableView.setVisibility(View.GONE);
                    arrowBtn.setBackgroundResource(R.drawable.android_icon);
                }
            }
        });

        expandableView2 = findViewById(R.id.expandableView2);
        arrowBtn2 = findViewById(R.id.arrowBtn2);
        cardView2 = findViewById(R.id.cardView2);

        arrowBtn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (expandableView2.getVisibility()==View.GONE){
                    TransitionManager.beginDelayedTransition(cardView2, new AutoTransition());
                    expandableView2.setVisibility(View.VISIBLE);
                    arrowBtn2.setBackgroundResource(R.drawable.down_arrow);
                } else {
                    TransitionManager.beginDelayedTransition(cardView2, new AutoTransition());
                    expandableView2.setVisibility(View.GONE);
                    arrowBtn2.setBackgroundResource(R.drawable.android_icon);
                }
            }
        });
    }
}

Here is my XML code:

<?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:layout_height="match_parent"
    tools:context=".EngineeringPage"
    android:background="#22325A">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/toolbar"
        android:background="#C4C4C4"
        app:logo="@drawable/image1"
        app:title="">
    </android.support.v7.widget.Toolbar>

    <TextView
        android:id="@+id/engineeringTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="409dp"
        android:layout_marginEnd="111dp"
        android:layout_marginLeft="111dp"
        android:layout_marginRight="111dp"
        android:layout_marginStart="111dp"
        android:layout_marginTop="61dp"
        android:text="Engineering"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/CardView.Light"
        android:layout_marginTop="98dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="12dp">
            <TextView
                android:id="@+id/name"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Section 1"
                style="@style/TextAppearance.AppCompat.Title"
                android:layout_marginStart="12dp" />
            <Button
                android:id="@+id/arrowBtn"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginEnd="12dp"
                android:background="@drawable/down_arrow"
                app:layout_constraintEnd_toEndOf="parent" />
            <android.support.constraint.ConstraintLayout
                android:id="@+id/expandableView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="12dp"
                android:visibility="gone"
                android:layout_marginTop="12dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent">
                <ImageView
                    android:id="@+id/phoneIcon"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginTop="52dp"
                    android:layout_marginStart="12dp"
                    android:src="@drawable/android_icon"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"/>

                <TextView
                    android:id="@+id/phoneNumber"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="(999) 345 32 45"
                    android:layout_marginStart="32dp"
                    android:textColor="#000"
                    style="@style/TextAppearance.AppCompat.Medium"
                    app:layout_constraintTop_toTopOf="@+id/phoneIcon"
                    app:layout_constraintStart_toEndOf="@id/phoneIcon"
                    app:layout_constraintBottom_toTopOf="@+id/phoneDesc"/>

                <TextView
                    android:id="@+id/phoneDesc"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="Mobile"
                    android:layout_marginStart="32dp"
                    android:textColor="#8A000000"
                    style="@style/TextAppearance.AppCompat.Body1"
                    app:layout_constraintTop_toBottomOf="@+id/phoneNumber"
                    app:layout_constraintStart_toEndOf="@id/phoneIcon"
                    app:layout_constraintBottom_toBottomOf="@+id/phoneIcon"/>

                <ImageView
                    android:id="@+id/mailIcon"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginTop="22dp"
                    android:layout_marginStart="12dp"
                    android:src="@drawable/android_icon"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/phoneIcon"/>

                <TextView
                    android:id="@+id/mailNumber"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="[email protected]"
                    android:layout_marginStart="32dp"
                    android:textColor="#000"
                    style="@style/TextAppearance.AppCompat.Medium"
                    app:layout_constraintTop_toTopOf="@+id/mailIcon"
                    app:layout_constraintStart_toEndOf="@id/mailIcon"
                    app:layout_constraintBottom_toTopOf="@+id/mailDesc"/>

                <TextView
                    android:id="@+id/mailDesc"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="Work"
                    android:layout_marginStart="32dp"
                    android:textColor="#8A000000"
                    style="@style/TextAppearance.AppCompat.Body1"
                    app:layout_constraintTop_toBottomOf="@+id/mailNumber"
                    app:layout_constraintStart_toEndOf="@id/mailIcon"
                    app:layout_constraintBottom_toBottomOf="@+id/mailIcon"/>

            </android.support.constraint.ConstraintLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/cardView2"
        style="@style/CardView.Light"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="184dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="12dp">

            <TextView
                android:id="@+id/name2"
                style="@style/TextAppearance.AppCompat.Title"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:text="Steven Smith" />

            <Button
                android:id="@+id/arrowBtn2"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginEnd="12dp"
                android:background="@drawable/down_arrow"
                app:layout_constraintEnd_toEndOf="parent" />

            <android.support.constraint.ConstraintLayout
                android:id="@+id/expandableView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:paddingBottom="12dp"
                android:visibility="gone"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent">

                <ImageView
                    android:id="@+id/phoneIcon2"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="52dp"
                    android:src="@drawable/android_icon"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/phoneNumber2"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="32dp"
                    android:text="(999) 345 32 45"
                    android:textColor="#000"
                    app:layout_constraintBottom_toTopOf="@+id/phoneDesc2"
                    app:layout_constraintStart_toEndOf="@id/phoneIcon2"
                    app:layout_constraintTop_toTopOf="@+id/phoneIcon2" />

                <TextView
                    android:id="@+id/phoneDesc2"
                    style="@style/TextAppearance.AppCompat.Body1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="32dp"
                    android:text="Mobile"
                    android:textColor="#8A000000"
                    app:layout_constraintBottom_toBottomOf="@+id/phoneIcon2"
                    app:layout_constraintStart_toEndOf="@id/phoneIcon2"
                    app:layout_constraintTop_toBottomOf="@+id/phoneNumber2" />

                <ImageView
                    android:id="@+id/mailIcon2"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="22dp"
                    android:src="@drawable/android_icon"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/phoneIcon2" />

                <TextView
                    android:id="@+id/mailNumber2"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="32dp"
                    android:text="[email protected]"
                    android:textColor="#000"
                    app:layout_constraintBottom_toTopOf="@+id/mailDesc2"
                    app:layout_constraintStart_toEndOf="@id/mailIcon2"
                    app:layout_constraintTop_toTopOf="@+id/mailIcon2" />

                <TextView
                    android:id="@+id/mailDesc2"
                    style="@style/TextAppearance.AppCompat.Body1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="32dp"
                    android:text="Work"
                    android:textColor="#8A000000"
                    app:layout_constraintBottom_toBottomOf="@+id/mailIcon2"
                    app:layout_constraintStart_toEndOf="@id/mailIcon2"
                    app:layout_constraintTop_toBottomOf="@+id/mailNumber2" />

            </android.support.constraint.ConstraintLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>


</android.support.constraint.ConstraintLayout>

Mohammed Alaa :

I have modified your sample to make it work correctly, you need to animated the parent layout for the two cardViews to make the animation smoth

java

final ConstraintLayout content = findViewById(R.id.content_layout);

final ConstraintLayout expandableView = findViewById(R.id.expandableView);
final Button arrowBtn = findViewById(R.id.arrowBtn);
arrowBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (expandableView.getVisibility() == View.GONE) {
                TransitionManager.beginDelayedTransition(content, new AutoTransition());
                expandableView.setVisibility(View.VISIBLE);
                arrowBtn.setBackgroundResource(R.drawable.down_arrow);
            } else {
                TransitionManager.beginDelayedTransition(content, new AutoTransition());
                expandableView.setVisibility(View.GONE);
                arrowBtn.setBackgroundResource(R.drawable.android_icon);
            }
        }
    });

final ConstraintLayout expandableView2 = findViewById(R.id.expandableView2);
final Button arrowBtn2 = findViewById(R.id.arrowBtn2);
arrowBtn2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (expandableView2.getVisibility() == View.GONE) {
                TransitionManager.beginDelayedTransition(content, new AutoTransition());
                expandableView2.setVisibility(View.VISIBLE);
                arrowBtn2.setBackgroundResource(R.drawable.down_arrow);
            } else {
                TransitionManager.beginDelayedTransition(content, new AutoTransition());
                expandableView2.setVisibility(View.GONE);
                arrowBtn2.setBackgroundResource(R.drawable.android_icon);
            }
        }
    });

xml

<?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:layout_height="match_parent"
android:id="@+id/content_layout"
android:background="#22325A">
<android.support.v7.widget.Toolbar
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:id="@+id/toolbar"
    android:background="#C4C4C4"
    app:logo="@drawable/logo"
    app:title="">
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    style="@style/CardView.Light"
    android:layout_marginTop="98dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/toolbar">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="12dp">
        <TextView
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:id="@+id/name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Section 1"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_marginStart="12dp" />
        <Button
            android:id="@+id/arrowBtn"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginEnd="12dp"
            android:background="@drawable/down_arrow"
            app:layout_constraintTop_toTopOf="@id/name"
            app:layout_constraintBottom_toBottomOf="@id/name"
            app:layout_constraintEnd_toEndOf="parent" />
        <android.support.constraint.ConstraintLayout
            android:id="@+id/expandableView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:paddingBottom="12dp"
            android:visibility="gone"
            app:layout_constraintTop_toBottomOf="@id/arrowBtn"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">
            <ImageView
                android:id="@+id/phoneIcon"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginStart="12dp"
                android:src="@drawable/logo"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>

            <TextView
                android:id="@+id/phoneNumber"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="(999) 345 32 45"
                android:layout_marginStart="32dp"
                android:textColor="#000"
                style="@style/TextAppearance.AppCompat.Medium"
                app:layout_constraintTop_toTopOf="@+id/phoneIcon"
                app:layout_constraintStart_toEndOf="@id/phoneIcon"
                app:layout_constraintBottom_toTopOf="@+id/phoneDesc"/>

            <TextView
                android:id="@+id/phoneDesc"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Mobile"
                app:layout_constraintStart_toStartOf="@id/phoneNumber"
                android:textColor="#8A000000"
                style="@style/TextAppearance.AppCompat.Body1"
                app:layout_constraintTop_toBottomOf="@+id/phoneNumber"
                app:layout_constraintStart_toEndOf="@id/phoneIcon"
                app:layout_constraintBottom_toBottomOf="@+id/phoneIcon"/>

            <ImageView
                android:id="@+id/mailIcon"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="22dp"
                android:layout_marginStart="12dp"
                android:src="@drawable/android_icon"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/phoneIcon"/>

            <TextView
                android:id="@+id/mailNumber"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="[email protected]"
                app:layout_constraintStart_toStartOf="@id/phoneNumber"
                android:textColor="#000"
                style="@style/TextAppearance.AppCompat.Medium"
                app:layout_constraintTop_toTopOf="@+id/mailIcon"
                app:layout_constraintStart_toEndOf="@id/mailIcon"
                app:layout_constraintBottom_toTopOf="@+id/mailDesc"/>

            <TextView
                android:id="@+id/mailDesc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Work"
                android:textColor="#8A000000"
                style="@style/TextAppearance.AppCompat.Body1"
                app:layout_constraintStart_toStartOf="@id/phoneNumber"
                app:layout_constraintTop_toBottomOf="@+id/mailNumber"
                app:layout_constraintBottom_toBottomOf="@+id/mailIcon"/>

        </android.support.constraint.ConstraintLayout>

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/cardView2"
    style="@style/CardView.Light"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="48dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/cardView">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="12dp">

        <TextView
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/name2"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_marginStart="12dp"
            android:text="Steven Smith" />

        <Button
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginEnd="12dp"
            android:background="@drawable/down_arrow"
            app:layout_constraintTop_toTopOf="@id/name2"
            app:layout_constraintBottom_toBottomOf="@id/name2"
            app:layout_constraintEnd_toEndOf="parent"
            android:id="@+id/arrowBtn2"
             />

        <android.support.constraint.ConstraintLayout
            android:id="@+id/expandableView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:paddingBottom="12dp"
            app:layout_constraintTop_toBottomOf="@id/arrowBtn2"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <ImageView
                android:id="@+id/phoneIcon2"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginStart="12dp"
                android:src="@drawable/logo"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                 />

            <TextView
                android:id="@+id/phoneNumber2"
                style="@style/TextAppearance.AppCompat.Medium"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="32dp"
                android:text="(999) 345 32 45"
                android:textColor="#000"
                app:layout_constraintBottom_toTopOf="@+id/phoneDesc2"
                app:layout_constraintStart_toEndOf="@id/phoneIcon2"
                app:layout_constraintTop_toTopOf="@+id/phoneIcon2" />

            <TextView
                android:id="@+id/phoneDesc2"
                style="@style/TextAppearance.AppCompat.Body1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="@id/phoneNumber2"
                android:text="Mobile"
                android:textColor="#8A000000"
                app:layout_constraintBottom_toBottomOf="@+id/phoneIcon2"
                app:layout_constraintStart_toEndOf="@id/phoneIcon2"
                app:layout_constraintTop_toBottomOf="@+id/phoneNumber2" />

            <ImageView
                android:id="@+id/mailIcon2"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginStart="12dp"
                android:layout_marginTop="22dp"
                android:src="@drawable/android_icon"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/phoneIcon2" />

            <TextView
                android:id="@+id/mailNumber2"
                style="@style/TextAppearance.AppCompat.Medium"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="@id/phoneNumber2"
                android:text="[email protected]"
                android:textColor="#000"
                app:layout_constraintBottom_toTopOf="@+id/mailDesc2"
                app:layout_constraintStart_toEndOf="@id/mailIcon2"
                app:layout_constraintTop_toTopOf="@+id/mailIcon2" />

            <TextView
                android:id="@+id/mailDesc2"
                style="@style/TextAppearance.AppCompat.Body1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Work"
                android:textColor="#8A000000"
                app:layout_constraintStart_toStartOf="@id/phoneNumber2"
                app:layout_constraintBottom_toBottomOf="@+id/mailIcon2"
                app:layout_constraintStart_toEndOf="@id/mailIcon2"
                app:layout_constraintTop_toBottomOf="@+id/mailNumber2" />

        </android.support.constraint.ConstraintLayout>

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>


</android.support.constraint.ConstraintLayout>