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 autocompletetextview
s.
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 toolbar
s 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
Post a Comment