Nested LinearLayouts LayoutTransition animation jumps on child removal

0

I've created nested LinearLayouts that contain children Buttons and other LinearLayouts with wrap_content and animateLayoutChanges set to true.

code below

When I remove a Button from a nested LinearLayout, the animation plays removing the Button but then repeats again creating jump effect in the overall nested Layout.

It seems to be a bug that occurs in API 19 and API 25 - and possibly other ones (haven't tested yet), but it works perfectly fine on API >= 27, so they must have fixed it or changed something for those versions of Android and I don't know what it is.

Problem is, I would like it to work for all APIs >= 19.

Is there any way to resolve this issue/bug or code workaround so that it works properly for those other versions of Android < API 27?

CODE EXAMPE

Click on Button GR1 to create a new child View (Button) in the blue LinearLayout (id = linearLayoutB) and click it again to remove that same Button to see the animation problem on any of the lower Android API versions mentioned

Click on Button R3 to to create a new child Button in the grey LinearLayout (id = linearLayoutGR) which isn't nested in any other LinearLayouts, but is able to add and remove that child Button without any animation problems for any Android version that supports LayoutTransition of course!

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:animateLayoutChanges="true"

tools:context=".MainActivity">



<LinearLayout

    android:id="@+id/linearLayoutGR"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_centerHorizontal="true"

    android:layout_centerVertical="true"

    android:background="#ddd"

    android:animateLayoutChanges="true"

    android:orientation="horizontal"

    android:padding="5dp">



    <Button

        android:id="@+id/btnGR1"

        android:layout_width="50dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="GR1"/>



    <LinearLayout

        android:id="@+id/linearLayoutR"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#fdd"

        android:animateLayoutChanges="true"

        android:orientation="vertical"

        android:padding="5dp">



        <Button

            android:id="@+id/btnR1"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R1"/>



        <Button

            android:id="@+id/btnR2"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R2"/>



        <Button

            android:id="@+id/btnR3"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R3"/>



        <LinearLayout

            android:id="@+id/linearLayoutG"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:background="#dfd"

            android:animateLayoutChanges="true"

            android:orientation="vertical"

            android:padding="5dp">



            <Button

                android:id="@+id/btnG1"

                android:layout_width="50dp"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:text="G1"/>



            <Button

                android:id="@+id/btnG2"

                android:layout_width="50dp"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:text="G2"/>



            <LinearLayout

                android:id="@+id/linearLayoutB"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:background="#ddf"

                android:animateLayoutChanges="true"

                android:orientation="horizontal"

                android:padding="5dp">



                <Button

                    android:id="@+id/btnB1"

                    android:layout_width="50dp"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:text="B1"/>



                <Button

                    android:id="@+id/btnB2"

                    android:layout_width="50dp"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:text="B2"/>



            </LinearLayout>

    </LinearLayout>



        <Button

            android:id="@+id/btnR5"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R5" />



    </LinearLayout>



    <LinearLayout

        android:id="@+id/linearLayoutP"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#fdf"

        android:animateLayoutChanges="true"

        android:orientation="vertical"

        android:padding="5dp">



        <Button

            android:id="@+id/btnP1"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="P1"/>



        <Button

            android:id="@+id/btnP2"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="P2"/>

    </LinearLayout>



    <Button

        android:id="@+id/btnGR4"

        android:layout_width="50dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="GR4"/>

</LinearLayout>

MainActivity.java

import android.animation.LayoutTransition;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.Gravity;

import android.view.View;

import android.widget.Button;

import android.widget.LinearLayout;



public class MainActivity extends AppCompatActivity {



private LinearLayout linearLayoutGR;

private LinearLayout linearLayoutR;

private LinearLayout linearLayoutG;

private LinearLayout linearLayoutB;

private LinearLayout linearLayoutP;



private Button btnGR1, btnR3;



@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);



    linearLayoutGR = findViewById(R.id.linearLayoutGR);

    linearLayoutR = findViewById(R.id.linearLayoutR);

    linearLayoutG = findViewById(R.id.linearLayoutG);

    linearLayoutB = findViewById(R.id.linearLayoutB);

    linearLayoutP = findViewById(R.id.linearLayoutP);



    linearLayoutGR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutG.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutB.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutP.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);



    btnGR1 = findViewById(R.id.btnGR1);

    btnR3 = findViewById(R.id.btnR3);



    final Button aBtn = new Button(this);



    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(131, LinearLayout.LayoutParams.WRAP_CONTENT);

    params.gravity = Gravity.CENTER;



    aBtn.setLayoutParams(params);

    aBtn.setGravity(Gravity.CENTER);

    aBtn.setText("A");





    final Button bBtn = new Button(this);



    bBtn.setLayoutParams(params);

    bBtn.setGravity(Gravity.CENTER);

    bBtn.setText("B");





    btnGR1.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

            if (linearLayoutB.getChildCount() < 3) {

                linearLayoutB.addView(aBtn);

            } else {

                linearLayoutB.removeView(aBtn);

            }

        }

    });



    btnR3.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

            if (linearLayoutGR.getChildCount() < 5) {

                linearLayoutGR.addView(bBtn);

            } else {

                linearLayoutGR.removeView(bBtn);

            }

        }

    });

}

}

If there's some workaround I would still like to keep the same effect/behavior that it has now without that bug, where any child views (Buttons and other LinearLayouts) that are added or removed into any of the other nested Layouts causes all layouts to resize accordingly with smooth animations while keeping all child views centered and compact together

java android android-layout android-animation android-linearlayout

share|improve this question

edited Jan 2 at 15:44

C9C

asked Jan 2 at 0:13

C9CC9C

367

add a comment | 

0

I've created nested LinearLayouts that contain children Buttons and other LinearLayouts with wrap_content and animateLayoutChanges set to true.

code below

When I remove a Button from a nested LinearLayout, the animation plays removing the Button but then repeats again creating jump effect in the overall nested Layout.

It seems to be a bug that occurs in API 19 and API 25 - and possibly other ones (haven't tested yet), but it works perfectly fine on API >= 27, so they must have fixed it or changed something for those versions of Android and I don't know what it is.

Problem is, I would like it to work for all APIs >= 19.

Is there any way to resolve this issue/bug or code workaround so that it works properly for those other versions of Android < API 27?

CODE EXAMPE

Click on Button GR1 to create a new child View (Button) in the blue LinearLayout (id = linearLayoutB) and click it again to remove that same Button to see the animation problem on any of the lower Android API versions mentioned

Click on Button R3 to to create a new child Button in the grey LinearLayout (id = linearLayoutGR) which isn't nested in any other LinearLayouts, but is able to add and remove that child Button without any animation problems for any Android version that supports LayoutTransition of course!

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:animateLayoutChanges="true"

tools:context=".MainActivity">



<LinearLayout

    android:id="@+id/linearLayoutGR"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_centerHorizontal="true"

    android:layout_centerVertical="true"

    android:background="#ddd"

    android:animateLayoutChanges="true"

    android:orientation="horizontal"

    android:padding="5dp">



    <Button

        android:id="@+id/btnGR1"

        android:layout_width="50dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="GR1"/>



    <LinearLayout

        android:id="@+id/linearLayoutR"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#fdd"

        android:animateLayoutChanges="true"

        android:orientation="vertical"

        android:padding="5dp">



        <Button

            android:id="@+id/btnR1"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R1"/>



        <Button

            android:id="@+id/btnR2"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R2"/>



        <Button

            android:id="@+id/btnR3"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R3"/>



        <LinearLayout

            android:id="@+id/linearLayoutG"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:background="#dfd"

            android:animateLayoutChanges="true"

            android:orientation="vertical"

            android:padding="5dp">



            <Button

                android:id="@+id/btnG1"

                android:layout_width="50dp"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:text="G1"/>



            <Button

                android:id="@+id/btnG2"

                android:layout_width="50dp"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:text="G2"/>



            <LinearLayout

                android:id="@+id/linearLayoutB"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:background="#ddf"

                android:animateLayoutChanges="true"

                android:orientation="horizontal"

                android:padding="5dp">



                <Button

                    android:id="@+id/btnB1"

                    android:layout_width="50dp"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:text="B1"/>



                <Button

                    android:id="@+id/btnB2"

                    android:layout_width="50dp"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:text="B2"/>



            </LinearLayout>

    </LinearLayout>



        <Button

            android:id="@+id/btnR5"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R5" />



    </LinearLayout>



    <LinearLayout

        android:id="@+id/linearLayoutP"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#fdf"

        android:animateLayoutChanges="true"

        android:orientation="vertical"

        android:padding="5dp">



        <Button

            android:id="@+id/btnP1"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="P1"/>



        <Button

            android:id="@+id/btnP2"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="P2"/>

    </LinearLayout>



    <Button

        android:id="@+id/btnGR4"

        android:layout_width="50dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="GR4"/>

</LinearLayout>

MainActivity.java

import android.animation.LayoutTransition;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.Gravity;

import android.view.View;

import android.widget.Button;

import android.widget.LinearLayout;



public class MainActivity extends AppCompatActivity {



private LinearLayout linearLayoutGR;

private LinearLayout linearLayoutR;

private LinearLayout linearLayoutG;

private LinearLayout linearLayoutB;

private LinearLayout linearLayoutP;



private Button btnGR1, btnR3;



@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);



    linearLayoutGR = findViewById(R.id.linearLayoutGR);

    linearLayoutR = findViewById(R.id.linearLayoutR);

    linearLayoutG = findViewById(R.id.linearLayoutG);

    linearLayoutB = findViewById(R.id.linearLayoutB);

    linearLayoutP = findViewById(R.id.linearLayoutP);



    linearLayoutGR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutG.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutB.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutP.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);



    btnGR1 = findViewById(R.id.btnGR1);

    btnR3 = findViewById(R.id.btnR3);



    final Button aBtn = new Button(this);



    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(131, LinearLayout.LayoutParams.WRAP_CONTENT);

    params.gravity = Gravity.CENTER;



    aBtn.setLayoutParams(params);

    aBtn.setGravity(Gravity.CENTER);

    aBtn.setText("A");





    final Button bBtn = new Button(this);



    bBtn.setLayoutParams(params);

    bBtn.setGravity(Gravity.CENTER);

    bBtn.setText("B");





    btnGR1.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

            if (linearLayoutB.getChildCount() < 3) {

                linearLayoutB.addView(aBtn);

            } else {

                linearLayoutB.removeView(aBtn);

            }

        }

    });



    btnR3.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

            if (linearLayoutGR.getChildCount() < 5) {

                linearLayoutGR.addView(bBtn);

            } else {

                linearLayoutGR.removeView(bBtn);

            }

        }

    });

}

}

If there's some workaround I would still like to keep the same effect/behavior that it has now without that bug, where any child views (Buttons and other LinearLayouts) that are added or removed into any of the other nested Layouts causes all layouts to resize accordingly with smooth animations while keeping all child views centered and compact together

java android android-layout android-animation android-linearlayout

share|improve this question

edited Jan 2 at 15:44

C9C

asked Jan 2 at 0:13

C9CC9C

367

add a comment | 

0

0

0

I've created nested LinearLayouts that contain children Buttons and other LinearLayouts with wrap_content and animateLayoutChanges set to true.

code below

When I remove a Button from a nested LinearLayout, the animation plays removing the Button but then repeats again creating jump effect in the overall nested Layout.

It seems to be a bug that occurs in API 19 and API 25 - and possibly other ones (haven't tested yet), but it works perfectly fine on API >= 27, so they must have fixed it or changed something for those versions of Android and I don't know what it is.

Problem is, I would like it to work for all APIs >= 19.

Is there any way to resolve this issue/bug or code workaround so that it works properly for those other versions of Android < API 27?

CODE EXAMPE

Click on Button GR1 to create a new child View (Button) in the blue LinearLayout (id = linearLayoutB) and click it again to remove that same Button to see the animation problem on any of the lower Android API versions mentioned

Click on Button R3 to to create a new child Button in the grey LinearLayout (id = linearLayoutGR) which isn't nested in any other LinearLayouts, but is able to add and remove that child Button without any animation problems for any Android version that supports LayoutTransition of course!

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:animateLayoutChanges="true"

tools:context=".MainActivity">



<LinearLayout

    android:id="@+id/linearLayoutGR"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_centerHorizontal="true"

    android:layout_centerVertical="true"

    android:background="#ddd"

    android:animateLayoutChanges="true"

    android:orientation="horizontal"

    android:padding="5dp">



    <Button

        android:id="@+id/btnGR1"

        android:layout_width="50dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="GR1"/>



    <LinearLayout

        android:id="@+id/linearLayoutR"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#fdd"

        android:animateLayoutChanges="true"

        android:orientation="vertical"

        android:padding="5dp">



        <Button

            android:id="@+id/btnR1"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R1"/>



        <Button

            android:id="@+id/btnR2"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R2"/>



        <Button

            android:id="@+id/btnR3"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R3"/>



        <LinearLayout

            android:id="@+id/linearLayoutG"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:background="#dfd"

            android:animateLayoutChanges="true"

            android:orientation="vertical"

            android:padding="5dp">



            <Button

                android:id="@+id/btnG1"

                android:layout_width="50dp"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:text="G1"/>



            <Button

                android:id="@+id/btnG2"

                android:layout_width="50dp"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:text="G2"/>



            <LinearLayout

                android:id="@+id/linearLayoutB"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:background="#ddf"

                android:animateLayoutChanges="true"

                android:orientation="horizontal"

                android:padding="5dp">



                <Button

                    android:id="@+id/btnB1"

                    android:layout_width="50dp"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:text="B1"/>



                <Button

                    android:id="@+id/btnB2"

                    android:layout_width="50dp"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:text="B2"/>



            </LinearLayout>

    </LinearLayout>



        <Button

            android:id="@+id/btnR5"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R5" />



    </LinearLayout>



    <LinearLayout

        android:id="@+id/linearLayoutP"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#fdf"

        android:animateLayoutChanges="true"

        android:orientation="vertical"

        android:padding="5dp">



        <Button

            android:id="@+id/btnP1"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="P1"/>



        <Button

            android:id="@+id/btnP2"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="P2"/>

    </LinearLayout>



    <Button

        android:id="@+id/btnGR4"

        android:layout_width="50dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="GR4"/>

</LinearLayout>

MainActivity.java

import android.animation.LayoutTransition;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.Gravity;

import android.view.View;

import android.widget.Button;

import android.widget.LinearLayout;



public class MainActivity extends AppCompatActivity {



private LinearLayout linearLayoutGR;

private LinearLayout linearLayoutR;

private LinearLayout linearLayoutG;

private LinearLayout linearLayoutB;

private LinearLayout linearLayoutP;



private Button btnGR1, btnR3;



@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);



    linearLayoutGR = findViewById(R.id.linearLayoutGR);

    linearLayoutR = findViewById(R.id.linearLayoutR);

    linearLayoutG = findViewById(R.id.linearLayoutG);

    linearLayoutB = findViewById(R.id.linearLayoutB);

    linearLayoutP = findViewById(R.id.linearLayoutP);



    linearLayoutGR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutG.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutB.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutP.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);



    btnGR1 = findViewById(R.id.btnGR1);

    btnR3 = findViewById(R.id.btnR3);



    final Button aBtn = new Button(this);



    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(131, LinearLayout.LayoutParams.WRAP_CONTENT);

    params.gravity = Gravity.CENTER;



    aBtn.setLayoutParams(params);

    aBtn.setGravity(Gravity.CENTER);

    aBtn.setText("A");





    final Button bBtn = new Button(this);



    bBtn.setLayoutParams(params);

    bBtn.setGravity(Gravity.CENTER);

    bBtn.setText("B");





    btnGR1.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

            if (linearLayoutB.getChildCount() < 3) {

                linearLayoutB.addView(aBtn);

            } else {

                linearLayoutB.removeView(aBtn);

            }

        }

    });



    btnR3.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

            if (linearLayoutGR.getChildCount() < 5) {

                linearLayoutGR.addView(bBtn);

            } else {

                linearLayoutGR.removeView(bBtn);

            }

        }

    });

}

}

If there's some workaround I would still like to keep the same effect/behavior that it has now without that bug, where any child views (Buttons and other LinearLayouts) that are added or removed into any of the other nested Layouts causes all layouts to resize accordingly with smooth animations while keeping all child views centered and compact together

java android android-layout android-animation android-linearlayout

share|improve this question

edited Jan 2 at 15:44

C9C

asked Jan 2 at 0:13

C9CC9C

367

I've created nested LinearLayouts that contain children Buttons and other LinearLayouts with wrap_content and animateLayoutChanges set to true.

code below

When I remove a Button from a nested LinearLayout, the animation plays removing the Button but then repeats again creating jump effect in the overall nested Layout.

It seems to be a bug that occurs in API 19 and API 25 - and possibly other ones (haven't tested yet), but it works perfectly fine on API >= 27, so they must have fixed it or changed something for those versions of Android and I don't know what it is.

Problem is, I would like it to work for all APIs >= 19.

Is there any way to resolve this issue/bug or code workaround so that it works properly for those other versions of Android < API 27?

CODE EXAMPE

Click on Button GR1 to create a new child View (Button) in the blue LinearLayout (id = linearLayoutB) and click it again to remove that same Button to see the animation problem on any of the lower Android API versions mentioned

Click on Button R3 to to create a new child Button in the grey LinearLayout (id = linearLayoutGR) which isn't nested in any other LinearLayouts, but is able to add and remove that child Button without any animation problems for any Android version that supports LayoutTransition of course!

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:animateLayoutChanges="true"

tools:context=".MainActivity">



<LinearLayout

    android:id="@+id/linearLayoutGR"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_centerHorizontal="true"

    android:layout_centerVertical="true"

    android:background="#ddd"

    android:animateLayoutChanges="true"

    android:orientation="horizontal"

    android:padding="5dp">



    <Button

        android:id="@+id/btnGR1"

        android:layout_width="50dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="GR1"/>



    <LinearLayout

        android:id="@+id/linearLayoutR"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#fdd"

        android:animateLayoutChanges="true"

        android:orientation="vertical"

        android:padding="5dp">



        <Button

            android:id="@+id/btnR1"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R1"/>



        <Button

            android:id="@+id/btnR2"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R2"/>



        <Button

            android:id="@+id/btnR3"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R3"/>



        <LinearLayout

            android:id="@+id/linearLayoutG"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:background="#dfd"

            android:animateLayoutChanges="true"

            android:orientation="vertical"

            android:padding="5dp">



            <Button

                android:id="@+id/btnG1"

                android:layout_width="50dp"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:text="G1"/>



            <Button

                android:id="@+id/btnG2"

                android:layout_width="50dp"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:text="G2"/>



            <LinearLayout

                android:id="@+id/linearLayoutB"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:background="#ddf"

                android:animateLayoutChanges="true"

                android:orientation="horizontal"

                android:padding="5dp">



                <Button

                    android:id="@+id/btnB1"

                    android:layout_width="50dp"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:text="B1"/>



                <Button

                    android:id="@+id/btnB2"

                    android:layout_width="50dp"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:text="B2"/>



            </LinearLayout>

    </LinearLayout>



        <Button

            android:id="@+id/btnR5"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="R5" />



    </LinearLayout>



    <LinearLayout

        android:id="@+id/linearLayoutP"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#fdf"

        android:animateLayoutChanges="true"

        android:orientation="vertical"

        android:padding="5dp">



        <Button

            android:id="@+id/btnP1"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="P1"/>



        <Button

            android:id="@+id/btnP2"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="P2"/>

    </LinearLayout>



    <Button

        android:id="@+id/btnGR4"

        android:layout_width="50dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="GR4"/>

</LinearLayout>

MainActivity.java

import android.animation.LayoutTransition;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.Gravity;

import android.view.View;

import android.widget.Button;

import android.widget.LinearLayout;



public class MainActivity extends AppCompatActivity {



private LinearLayout linearLayoutGR;

private LinearLayout linearLayoutR;

private LinearLayout linearLayoutG;

private LinearLayout linearLayoutB;

private LinearLayout linearLayoutP;



private Button btnGR1, btnR3;



@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);



    linearLayoutGR = findViewById(R.id.linearLayoutGR);

    linearLayoutR = findViewById(R.id.linearLayoutR);

    linearLayoutG = findViewById(R.id.linearLayoutG);

    linearLayoutB = findViewById(R.id.linearLayoutB);

    linearLayoutP = findViewById(R.id.linearLayoutP);



    linearLayoutGR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutG.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutB.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    linearLayoutP.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);



    btnGR1 = findViewById(R.id.btnGR1);

    btnR3 = findViewById(R.id.btnR3);



    final Button aBtn = new Button(this);



    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(131, LinearLayout.LayoutParams.WRAP_CONTENT);

    params.gravity = Gravity.CENTER;



    aBtn.setLayoutParams(params);

    aBtn.setGravity(Gravity.CENTER);

    aBtn.setText("A");





    final Button bBtn = new Button(this);



    bBtn.setLayoutParams(params);

    bBtn.setGravity(Gravity.CENTER);

    bBtn.setText("B");





    btnGR1.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

            if (linearLayoutB.getChildCount() < 3) {

                linearLayoutB.addView(aBtn);

            } else {

                linearLayoutB.removeView(aBtn);

            }

        }

    });



    btnR3.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

            if (linearLayoutGR.getChildCount() < 5) {

                linearLayoutGR.addView(bBtn);

            } else {

                linearLayoutGR.removeView(bBtn);

            }

        }

    });

}

}

If there's some workaround I would still like to keep the same effect/behavior that it has now without that bug, where any child views (Buttons and other LinearLayouts) that are added or removed into any of the other nested Layouts causes all layouts to resize accordingly with smooth animations while keeping all child views centered and compact together

java android android-layout android-animation android-linearlayout

java android android-layout android-animation android-linearlayout

share|improve this question

edited Jan 2 at 15:44

C9C

asked Jan 2 at 0:13

C9CC9C

367

share|improve this question

edited Jan 2 at 15:44

C9C

asked Jan 2 at 0:13

C9CC9C

367

share|improve this question

share|improve this question

edited Jan 2 at 15:44

C9C

edited Jan 2 at 15:44

C9C

edited Jan 2 at 15:44

C9C

asked Jan 2 at 0:13

C9CC9C

367

asked Jan 2 at 0:13

C9CC9C

367

asked Jan 2 at 0:13

C9CC9C

367

367

add a comment | 

add a comment | 

1 Answer
1

active

oldest

votes

0

The issue with the child removal seems to be that it's animation is delayed - looking in LayoutTrasition mChangingDisappearingDelay is set to DEFAULT_DURATION of 300ms

By setting LayoutTransition object to a delay of 0 with the code

layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

the LinearLayouts seem to animate properly again.

Each LinearLayout must have their own unique LayoutTransition object - you can't give them the same LayoutTransition object, so I created a method for that below

private LayoutTransition createLayoutTransition(){

    LayoutTransition layoutTransition = new LayoutTransition();

    layoutTransition.enableTransitionType(LayoutTransition.CHANGING);



    // the delay fix

    layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

    return layoutTransition;

}

and then set each of the LinearLayouts LayoutTransition to the method above

linearLayoutGR.setLayoutTransition(createLayoutTransition());

linearLayoutR.setLayoutTransition(createLayoutTransition());

linearLayoutG.setLayoutTransition(createLayoutTransition());

linearLayoutB.setLayoutTransition(createLayoutTransition());

linearLayoutP.setLayoutTransition(createLayoutTransition());

replacing the old code below with the code above

linearLayoutGR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutG.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutB.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutP.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

Now it seems to work on all APIs that support LayoutTransition

share|improve this answer

answered Jan 2 at 15:47

C9CC9C

367

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999964%2fnested-linearlayouts-layouttransition-animation-jumps-on-child-removal%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

The issue with the child removal seems to be that it's animation is delayed - looking in LayoutTrasition mChangingDisappearingDelay is set to DEFAULT_DURATION of 300ms

By setting LayoutTransition object to a delay of 0 with the code

layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

the LinearLayouts seem to animate properly again.

Each LinearLayout must have their own unique LayoutTransition object - you can't give them the same LayoutTransition object, so I created a method for that below

private LayoutTransition createLayoutTransition(){

    LayoutTransition layoutTransition = new LayoutTransition();

    layoutTransition.enableTransitionType(LayoutTransition.CHANGING);



    // the delay fix

    layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

    return layoutTransition;

}

and then set each of the LinearLayouts LayoutTransition to the method above

linearLayoutGR.setLayoutTransition(createLayoutTransition());

linearLayoutR.setLayoutTransition(createLayoutTransition());

linearLayoutG.setLayoutTransition(createLayoutTransition());

linearLayoutB.setLayoutTransition(createLayoutTransition());

linearLayoutP.setLayoutTransition(createLayoutTransition());

replacing the old code below with the code above

linearLayoutGR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutG.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutB.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutP.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

Now it seems to work on all APIs that support LayoutTransition

share|improve this answer

answered Jan 2 at 15:47

C9CC9C

367

add a comment | 

0

The issue with the child removal seems to be that it's animation is delayed - looking in LayoutTrasition mChangingDisappearingDelay is set to DEFAULT_DURATION of 300ms

By setting LayoutTransition object to a delay of 0 with the code

layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

the LinearLayouts seem to animate properly again.

Each LinearLayout must have their own unique LayoutTransition object - you can't give them the same LayoutTransition object, so I created a method for that below

private LayoutTransition createLayoutTransition(){

    LayoutTransition layoutTransition = new LayoutTransition();

    layoutTransition.enableTransitionType(LayoutTransition.CHANGING);



    // the delay fix

    layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

    return layoutTransition;

}

and then set each of the LinearLayouts LayoutTransition to the method above

linearLayoutGR.setLayoutTransition(createLayoutTransition());

linearLayoutR.setLayoutTransition(createLayoutTransition());

linearLayoutG.setLayoutTransition(createLayoutTransition());

linearLayoutB.setLayoutTransition(createLayoutTransition());

linearLayoutP.setLayoutTransition(createLayoutTransition());

replacing the old code below with the code above

linearLayoutGR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutG.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutB.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutP.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

Now it seems to work on all APIs that support LayoutTransition

share|improve this answer

answered Jan 2 at 15:47

C9CC9C

367

add a comment | 

0

0

0

The issue with the child removal seems to be that it's animation is delayed - looking in LayoutTrasition mChangingDisappearingDelay is set to DEFAULT_DURATION of 300ms

By setting LayoutTransition object to a delay of 0 with the code

layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

the LinearLayouts seem to animate properly again.

Each LinearLayout must have their own unique LayoutTransition object - you can't give them the same LayoutTransition object, so I created a method for that below

private LayoutTransition createLayoutTransition(){

    LayoutTransition layoutTransition = new LayoutTransition();

    layoutTransition.enableTransitionType(LayoutTransition.CHANGING);



    // the delay fix

    layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

    return layoutTransition;

}

and then set each of the LinearLayouts LayoutTransition to the method above

linearLayoutGR.setLayoutTransition(createLayoutTransition());

linearLayoutR.setLayoutTransition(createLayoutTransition());

linearLayoutG.setLayoutTransition(createLayoutTransition());

linearLayoutB.setLayoutTransition(createLayoutTransition());

linearLayoutP.setLayoutTransition(createLayoutTransition());

replacing the old code below with the code above

linearLayoutGR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutG.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutB.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutP.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

Now it seems to work on all APIs that support LayoutTransition

share|improve this answer

answered Jan 2 at 15:47

C9CC9C

367

The issue with the child removal seems to be that it's animation is delayed - looking in LayoutTrasition mChangingDisappearingDelay is set to DEFAULT_DURATION of 300ms

By setting LayoutTransition object to a delay of 0 with the code

layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

the LinearLayouts seem to animate properly again.

Each LinearLayout must have their own unique LayoutTransition object - you can't give them the same LayoutTransition object, so I created a method for that below

private LayoutTransition createLayoutTransition(){

    LayoutTransition layoutTransition = new LayoutTransition();

    layoutTransition.enableTransitionType(LayoutTransition.CHANGING);



    // the delay fix

    layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

    return layoutTransition;

}

and then set each of the LinearLayouts LayoutTransition to the method above

linearLayoutGR.setLayoutTransition(createLayoutTransition());

linearLayoutR.setLayoutTransition(createLayoutTransition());

linearLayoutG.setLayoutTransition(createLayoutTransition());

linearLayoutB.setLayoutTransition(createLayoutTransition());

linearLayoutP.setLayoutTransition(createLayoutTransition());

replacing the old code below with the code above

linearLayoutGR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutR.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutG.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutB.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

linearLayoutP.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

Now it seems to work on all APIs that support LayoutTransition

share|improve this answer

answered Jan 2 at 15:47

C9CC9C

367

share|improve this answer

share|improve this answer

answered Jan 2 at 15:47

C9CC9C

367

answered Jan 2 at 15:47

C9CC9C

367

answered Jan 2 at 15:47

C9CC9C

367

367

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999964%2fnested-linearlayouts-layouttransition-animation-jumps-on-child-removal%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here