3 fill parent Accordion menus

[tangible-idea]

Please refer to this video. https://youtu.be/yJ7ZIQWG3no the transitions are looking not natural. :'( I've tried using el_parallax too. but it didn't work with this case..

`<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" tools:context=".PlanActivity">

    <TextView
        android:id="@+id/expand_button_0"
        style="@style/TextAppearance.AppCompat.Medium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#b3b3b3"
        android:elevation="6dp"
        android:foreground="?selectableItemBackground"
        android:gravity="center"
        android:padding="16dp"
        android:text="Region"
        android:textColor="#000" />

    <net.cachapa.expandablelayout.ExpandableLayout
        android:id="@+id/expandable_layout_0"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:el_duration="500"
        app:el_expanded="true">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:clipToPadding="false"
            android:elevation="4dp"
            android:gravity="center"
            android:text="t1"
            android:textColor="#000" />

    </net.cachapa.expandablelayout.ExpandableLayout>

    <TextView
        android:id="@+id/expand_button_1"
        style="@style/TextAppearance.AppCompat.Medium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#b3b3b3"
        android:elevation="6dp"
        android:foreground="?selectableItemBackground"
        android:gravity="center"
        android:padding="16dp"
        android:text="Date/Time"
        android:textColor="#000" />

    <net.cachapa.expandablelayout.ExpandableLayout
        android:id="@+id/expandable_layout_1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:el_duration="500"
        app:el_expanded="false">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:clipToPadding="false"
            android:elevation="4dp"
            android:gravity="center"
            android:text="t2"
            android:textColor="#000"/>

    </net.cachapa.expandablelayout.ExpandableLayout>

        <TextView
            android:id="@+id/expand_button_2"
            style="@style/TextAppearance.AppCompat.Medium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#b3b3b3"
            android:elevation="6dp"
            android:foreground="?selectableItemBackground"
            android:gravity="center"
            android:padding="16dp"
            android:text="Message"
            android:textColor="#000" />

        <net.cachapa.expandablelayout.ExpandableLayout
            android:id="@+id/expandable_layout_2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            app:el_duration="500"
            app:el_expanded="false">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#fff"
                android:clipToPadding="false"
                android:elevation="4dp"
                android:gravity="center"
                android:text="t2"
                android:textColor="#000"/>

        </net.cachapa.expandablelayout.ExpandableLayout>

`

XML code

` expand_button_0.setOnClickListener { expandable_layout_0.expand() expandable_layout_1.collapse() expandable_layout_2.collapse() }

    expand_button_1.setOnClickListener {
        expandable_layout_0.collapse()
        expandable_layout_1.expand()
        expandable_layout_2.collapse()
    }

    expand_button_2.setOnClickListener {
        expandable_layout_0.collapse()
        expandable_layout_1.collapse()
        expandable_layout_2.expand()
    }`

and my Kolin.

here is the image that I wanted to create. What am I missing?

[cachapa]

Your XML isn't complete. It's missing at least the parent layout. Can you post the entire layout?

[tangible-idea]

@cachapa representation1 : https://youtu.be/yJ7ZIQWG3no

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" tools:context=".PlanActivity">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/expand_button_0"
    android:layout_width="match_parent"
    android:layout_height="82dp"
    android:background="#f8f8f8"
    android:foreground="?selectableItemBackground">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/img_region"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="29dp"
        android:layout_marginBottom="29dp"
        android:src="@drawable/ic_plan_region"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/title_region"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="21dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:lineSpacingExtra="12sp"
        android:text="Region"
        android:textAlignment="viewStart"
        android:textAppearance="@style/region_demi_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@+id/img_region"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

    <net.cachapa.expandablelayout.ExpandableLayout
        android:id="@+id/expandable_layout_0"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:el_duration="300"
        app:el_expanded="true">

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

    </net.cachapa.expandablelayout.ExpandableLayout>

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/expand_button_1"
    android:layout_width="match_parent"
    android:layout_height="82dp"
    android:background="#f8f8f8"
    android:foreground="?selectableItemBackground">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/img_datetime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="29dp"
        android:layout_marginBottom="29dp"
        android:src="@drawable/ic_plan_region"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="21dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:lineSpacingExtra="12sp"
        android:text="Date / Time"
        android:textAlignment="viewStart"
        android:textAppearance="@style/region_demi_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@+id/img_datetime"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

    <net.cachapa.expandablelayout.ExpandableLayout
        android:id="@+id/expandable_layout_1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:el_duration="300"
        app:el_expanded="false">

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

    </net.cachapa.expandablelayout.ExpandableLayout>

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/expand_button_2"
    android:layout_width="match_parent"
    android:layout_height="82dp"
    android:background="#f8f8f8"
    android:foreground="?selectableItemBackground">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/img_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="29dp"
        android:layout_marginBottom="29dp"
        android:src="@drawable/ic_plan_message"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/title_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="21dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:lineSpacingExtra="12sp"
        android:text="Message"
        android:textAlignment="viewStart"
        android:textAppearance="@style/region_demi_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@+id/img_message"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

        <net.cachapa.expandablelayout.ExpandableLayout
            android:id="@+id/expandable_layout_2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            app:el_duration="300"
            app:el_expanded="false">

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

        </net.cachapa.expandablelayout.ExpandableLayout>

[tangible-idea]

@cachapa representation2 : https://youtu.be/xQ8HoWWdPOU

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" tools:context=".PlanActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/expand_button_0"
        style="@style/TextAppearance.AppCompat.Medium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00b300"
        android:elevation="6dp"
        android:foreground="?selectableItemBackground"
        android:gravity="center"
        android:padding="16dp"
        android:text="Tap to toggle expansion"
        android:textColor="#fff" />

    <net.cachapa.expandablelayout.ExpandableLayout
        android:id="@+id/expandable_layout_0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:el_duration="500"
        app:el_expanded="false">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#009900"
            android:clipToPadding="false"
            android:elevation="4dp"
            android:gravity="center"
            android:text="Fixed height"
            android:textColor="#fff" />

    </net.cachapa.expandablelayout.ExpandableLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/expand_button_1"
        style="@style/TextAppearance.AppCompat.Medium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00f"
        android:elevation="6dp"
        android:foreground="?selectableItemBackground"
        android:gravity="center"
        android:padding="16dp"
        android:text="Tap to toggle expansion"
        android:textColor="#fff" />

    <net.cachapa.expandablelayout.ExpandableLayout
        android:id="@+id/expandable_layout_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:el_duration="500"
        app:el_expanded="true">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#0000e6"
            android:clipToPadding="false"
            android:elevation="4dp"
            android:gravity="center"
            android:text="Fixed height"
            android:textColor="#fff"/>

    </net.cachapa.expandablelayout.ExpandableLayout>

</LinearLayout>

[cachapa]

That's still not the entire XML. It's missing the parent layout tag.

[tangible-idea]

@cachapa Sorry, I tried to copy and paste but it didn't work properly.

https://s3-eu-west-1.amazonaws.com/tangibleidea.net/activity_plan_old.xml https://s3-eu-west-1.amazonaws.com/tangibleidea.net/activity_plan.xml here are the links of issues xml files.

[cachapa]

Ok, so it seems the issue is that you can't have an "accordion" animation with LinearLayout weights. ExpandableLayout needs to know its calculated height so it can animate between states. That height is requested from its parent layout, in this case, LinearLayout.

When you animate two layouts simultaneously (in order to create the accordion effect), both layouts are visible at the same time, which causes the parent LinearLayout to attribute 50% of its height to each ExpandableLayout.

ExpandableLayout is behaving correctly here, as it's delegating his size calculations to its parent. I'm not sure how to achieve the effect you want, but you might have to go with a different route, like layout transitions or custom animations. It might make sense to ask this in StackOverflow.

In any case it isn't an issue with ExpandableLayout so I'm closing this.

[tangible-idea]

@cachapa What parent layout should I use then? only fixed height supported so far? What about layout_constraintHeight_percentwith ConstraintLayout