I have a wearable drawer layout in my Android app. The behavior was that the peek view would display the peek fragment and when the user swiped up, the peek fragment would fade to the content fragment.
I recently attempted to update my android wear project from wearable 2.0.3 to wearable 2.0.5. A lot of components need to be changed from wearable.view to wear.widget.
After the update, both fragments display weather the drawer is open or closed. I tried fading these in and out manually, but there didn’t seem a way to do this smoothly or easily. Is the previous behavior possible anymore?
A side note: Using a view within the activity instead of a fragment for the peek view will work as before, but remove the chevron symbol. Another workaround is to add the symbol yourself, but the animation doesn’t work as before.
Previous Drawer Layout:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <android.support.wearable.view.drawer.WearableActionDrawer android:id="@+id/bottom_action_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:background="?android:attr/colorPrimary" app:drawer_content="@+id/nowPlayingFragment"> <!-- Peek View --> <fragment android:id="@+id/peekFragment" android:name="com.turndapage.navmusic.ui.fragment.PeekFragment" android:layout_width="match_parent" android:layout_height="wrap_content" /> <fragment android:id="@+id/nowPlayingFragment" android:name="com.turndapage.navmusic.ui.fragment.NowPlayingFragment" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </android.support.wearable.view.drawer.WearableActionDrawer> |
New Drawer Layout:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <android.support.wear.widget.drawer.WearableActionDrawerView android:id="@+id/bottom_action_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:background="?android:attr/colorPrimary" app:drawer_content="@+id/nowPlayingFragment" app:peekView="@+id/peek_view"> <fragment android:id="@+id/nowPlayingFragment" android:name="com.turndapage.navmusic.ui.fragment.NowPlayingFragment" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <!-- Peek View --> <fragment android:id="@+id/peekFragment" android:name="com.turndapage.navmusic.ui.fragment.PeekFragment" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.wear.widget.drawer.WearableActionDrawerView> |
My manual solution was this code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | wearableDrawerLayout.setDrawerStateCallback(new WearableDrawerLayout.DrawerStateCallback() { @Override public void onDrawerStateChanged(WearableDrawerLayout layout, int newState) { super.onDrawerStateChanged(layout, newState); if(nowPlayingUtil != null) { // If the drawer is settling into position and it was opened all the way. if (wearableActionDrawer.getDrawerState() == WearableDrawerView.STATE_SETTLING && nowPlayingUtil != null) { // Transitioning from peek view if (drawerState == "drawerPeeking") nowPlayingUtil.fadeToOpen(); // Transitioning from open view else if (drawerState == "drawerOpen") nowPlayingUtil.fadeToPeek(); else if (drawerState == "drawerClosed") nowPlayingUtil.fadeToPeek(); } if (wearableActionDrawer.getDrawerState() == WearableDrawerView.STATE_IDLE) { // update the previous State if (wearableActionDrawer.isOpened()) { drawerState = "drawerOpen"; nowPlayingUtil.fadeToOpen(); } else if (wearableActionDrawer.isPeeking()) { drawerState = "drawerPeeking"; nowPlayingUtil.fadeToPeek(); } else if (wearableActionDrawer.isClosed()) { drawerState = "drawerClosed"; nowPlayingUtil.fadeToPeek(); } } } } }); |
In my example, the fadeToPeek and fadeToOpen animate the opacity of the two views to create the desired effect. Hopefully there will be a better solution in the future, but I am satisfied with this one.