android - Animating Toolbar with LayoutTransition -


what i'd achieve

my app has toolbar contains 2 autocompletetextview. i'd show second 1 when user selected someting in first one, , hide again if first 1 cleared (i have 'x' in autocompletetextview clear it).

i'd toolbar animate between 2 states, expanding , fading in second autocompletetextview when selected in first one, , fading out second autocompletetextview , collapsing toolbar when first 1 cleared.

what tried, didn't work

i tried using layouttransition, both in xml setting android:animatelayoutchanges true, , in code declaring layouttransition , setting linearlayout containing both autocompletetextviews.

the first time tried way:

<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">          <!-- set layouttransition on 1 -->         <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> 

the toolbar contains linearlayout set layouttransition in code. 1 handled appearing pretty well: toolbar expands , second autocompletetextview fades in.

the problem on disappearing: toolbar collapses instantly, while still see second autocompletetextview on white background of recyclerview, after time autocompletetextview fades out , toolbar expands , collapses once fast.

the second time tried this:

<!-- set layouttransition on 1 --> <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 disappearing handled well: autocompletetextview fades out , toolbar collapses.

this time, the problem on appearing: autocompletetextview fades in on white background of recyclerview , after time toolbar expands.

both times appearing/disappearing of second autocompletetextview handled code setting visibility visible or gone.

i tried using 2 toolbars autocompletetextview each, sliding in/out second one, think looks ugly-ish in situations.

instead of trying layouttransition want do, can use android-transition library, , add following code:

    final animation animautocomplete = viewtransitionbuilder.transit(chooser).alpha(1f, 0f).range(0f, 0.7f).buildanimation();     //delayheight(0) required since calculation requires current height, it's still 0 when oncreate(bundle) called     final animation animautocomplete2 = viewtransitionbuilder.transit(chooser).delayheight(0).range(0.7f, 1f).buildanimation();     final animationmanager = new animationmanager();     am.addanimation(animautocomplete2);     am.addanimation(animautocomplete);      //change suit 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 have either download whole project or fork it, of code above aren't in gradle-importable releases.


Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -