Geek Answers Handbook

Toolbar animation with LayoutTransition

What I would like to achieve

My application has a Toolbar that contains 2 AutoCompleteTextView . I would like to show the second only when the user selected someting in the first and hides it again if the first is cleared (I have an “X” in AutoCompleteTextView to clear it).

I would like the Toolbar animate between these two states, expanding and fading in the second AutoCompleteTextView when something is selected in the first, and the second AutoCompleteTextView fades out and collapses the Toolbar > when the first is cleared.

What I tried but didn't work

I tried using LayoutTransition , both in the android:animateLayoutChanges XML settings, and in the code, declaring LayoutTransition and setting it to a LinearLayout containing both my AutoCompleteTextView s.

The first time I tried this as follows:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" style="@style/CategoryStyle.Vertical" tools:context=".MainActivity"> <!-- TOOLBAR --> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar_main" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" style="@style/ToolbarStyle"> <!-- i set the LayoutTransition on THIS ONE --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:id="@+id/linear_toolbar"> <!-- AUTOCOMPLETE market --> <com.mwd.shoppinglist.Utility.AutoCompleteTextViewNoFilter android:id="@+id/shop_chooser" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Autocomplete" android:hint="@string/chooseShop" android:textSize="16sp" android:drawableRight="@drawable/ic_action_cancel"/> <!-- AUTOCOMPLETE product --> <com.mwd.shoppinglist.Utility.AutoCompleteTextViewNoFilter android:id="@+id/item_chooser" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Autocomplete" android:hint="@string/autoCompleteHint" android:textSize="16sp" android:drawableRight="@drawable/ic_action_cancel_dark"/> </LinearLayout> </android.support.v7.widget.Toolbar> <!-- RECYCLER VIEW --> <android.support.v7.widget.RecyclerView android:id="@+id/list" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone"/> <!-- TEMP TEXTVIEW --> <TextView android:id="@+id/main_temp1" android:text="@string/pick_a_market" style="@style/TempTextView"/> <!-- BUTTON --> <Button android:id="@+id/main_btn_start" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/btn_start" android:textSize="16sp" android:visibility="gone"/> </LinearLayout>

Toolbar contains a LinearLayout to which I set the LayoutTransition in code. This handler looked pretty good: the Toolbar expands, and the second AutoCompleteTextView disappears.

The problem was disappearing : the Toolbar instantly resets, while I still see the second AutoCompleteTextView on the white background of my RecyclerView , and after a while the AutoCompleteTextView disappears and the Toolbar expands quickly and quickly.

The second time I tried this:

 <!-- i set the LayoutTransition on THIS ONE --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" style="@style/CategoryStyle.Vertical" tools:context=".MainActivity" android:id="@+id/linear_toolbar"> <!-- TOOLBAR --> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar_main" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" style="@style/ToolbarStyle"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!-- AUTOCOMPLETE market --> <com.mwd.shoppinglist.Utility.AutoCompleteTextViewNoFilter android:id="@+id/shop_chooser" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Autocomplete" android:hint="@string/chooseShop" android:textSize="16sp" android:drawableRight="@drawable/ic_action_cancel"/> <!-- AUTOCOMPLETE product --> <com.mwd.shoppinglist.Utility.AutoCompleteTextViewNoFilter android:id="@+id/item_chooser" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Autocomplete" android:hint="@string/autoCompleteHint" android:textSize="16sp" android:drawableRight="@drawable/ic_action_cancel_dark"/> </LinearLayout> </android.support.v7.widget.Toolbar> <!-- RECYCLER VIEW --> <android.support.v7.widget.RecyclerView android:id="@+id/list" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone"/> <!-- TEMP TEXTVIEW --> <TextView android:id="@+id/main_temp1" android:text="@string/pick_a_market" style="@style/TempTextView"/> <!-- BUTTON --> <Button android:id="@+id/main_btn_start" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/btn_start" android:textSize="16sp" android:visibility="gone"/> </LinearLayout>

This time the extinction was handled well: AutoCompleteTextView disappears and then the Toolbar is compressed.

This time there was a problem: AutoCompleteTextView disappears on a white background of my RecyclerView and after a while the Toolbar expands.

Both times, the appearance / disappearance of the second AutoCompleteTextView handled by setting the Visibility code to VISIBLE or GONE .

I also tried using two Toolbar with AutoCompleteTextView , each of which gliding to / from the second, but I really think that in some situations it looks ugly.

+6
source share
1 answer

Instead of forcing LayoutTransition to do what you want, you can use the Android-Transition library and add the following code

  final Animation animAutoComplete = ViewTransitionBuilder.transit(chooser).alpha(1f, 0f).range(0f, 0.7f).buildAnimation(); //delayHeight(0) is required since the calculation requires current height, but it still 0 when onCreate(Bundle) is called final Animation animAutoComplete2 = ViewTransitionBuilder.transit(chooser).delayHeight(0).range(0.7f, 1f).buildAnimation(); final AnimationManager am = new AnimationManager(); am.addAnimation(animAutoComplete2); am.addAnimation(animAutoComplete); //change this to suit your need findViewById(R.id.main_btn_start).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { am.cancelAnimation(); am.setReverseAnimation(reverse); am.startAnimation(400); reverse = !reverse; } });

Note that you need to either download the entire project or make it a fork, as some of the codes above are not in the Gradle-importable releases.

0
source

More articles:


All Articles