Android lollipop shared elements transition blink / flash
Hurray! I've managed to solve this problem.
Blinking screen is common problem described here: Blinking screen on image transition between activities (thx @AlexLockwood)
Blinking shared element was caused by DrawerLayout. I was starting new Activity to soon. When I've moved ActivityCompat.startActivity
to DrawerLayout.DrawerListener
's onDrawerClosed
method everything started working like a charm.
Related videos on Youtube
radzio
Updated on November 30, 2020Comments
-
radzio over 3 years
I see strange thing in my shared element transition on Lollipop. Shared elements are flickering just before they are starting to animate (please see video https://www.youtube.com/watch?v=DCoyyC_S-9A)
I've no idea why it is happening. However when I add
<item name="android:windowSharedElementsUseOverlay">false</item>
to my theme I don't see flickering but the transition is not looking good (they look like only half of it is animating second half of animation 'hidden').Other transition settings:
<item name="android:windowActivityTransitions">true</item> <item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item> <item name="android:windowSharedElementEnterTransition">@android:transition/move</item> <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
I am starting activity using ActivityCompat & ActivityOptionsCompat:
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(ActivityMain.this, new Pair<View, String>(playButton, getString(R.string.translation_control_button)), new Pair<View, String>(findViewById(R.id.playerImage), getString(R.string.translation_artwork))); ActivityCompat.startActivity(this, pendingIntent, options.toBundle());
1st activity:
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:id="@+id/main_container"> <include layout="@layout/toolbar"/> <FrameLayout android:id="@+id/activity_main_fragment_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"></FrameLayout> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="45dp" android:padding="7dp" android:stretchColumns="*" android:id="@+id/player_toolboxTable" android:background="?colorPrimary"> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/player_toolbox"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:id="@+id/player_fav" android:src="@drawable/rating_not_important" android:onClick="playerFav" android:background="@drawable/button_selector_semi_white" /> <ImageView android:src="@drawable/av_pause_over_video" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:id="@+id/player_play" android:onClick="playerPlay" android:background="@drawable/button_selector_semi_white" android:transitionName="@string/translation_control_button" /> <ImageView android:src="@drawable/social_share" android:layout_width="wrap_content" android:clickable="true" android:id="@+id/player_share" android:background="@drawable/button_selector_semi_white" android:layout_height="wrap_content" android:onClick="playerShare" /> <ImageView android:src="@drawable/content_save" android:layout_width="wrap_content" android:clickable="true" android:id="@+id/player_record" android:background="@drawable/button_selector_semi_white" android:layout_height="wrap_content" android:onClick="playerRecord" /> </TableRow> </TableLayout> </LinearLayout> </com.heinrichreimersoftware.materialdrawer.DrawerFrameLayout>
Second activity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".activities.CommunityActivity"> <include layout="@layout/toolbar"/> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="vertical"> <Button android:id="@+id/community_google_plus_group" android:text="@string/community_google_plus" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/ic_action_gplus" android:gravity="left|center_vertical" style="@style/MaterialButton" /> <Button android:id="@+id/community_google_fb" android:text="@string/community_facebook" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/ic_action_facebook" android:gravity="left|center_vertical" style="@style/MaterialButton" /> <Button android:id="@+id/community_mail" android:text="@string/community_mail" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/ic_action_gmail" android:gravity="left|center_vertical" style="@style/MaterialButton" /> </LinearLayout> <include layout="@layout/include_mini_player"/> </LinearLayout>
include_mini_player.xml
<fragment xmlns:tools="http://schemas.android.com/tools" android:id="@+id/mini_player_fragment" xmlns:android="http://schemas.android.com/apk/res/android" android:name=".fragments.MiniPlayerFragment" android:layout_width="fill_parent" android:layout_height="72dp" tools:layout="@layout/fragment_mini_player"/>
fragment_mini_player:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:background="?colorPrimary" > <ImageView android:id="@+id/player_artwork" android:layout_width="52dp" android:scaleType="centerCrop" android:layout_height="52dp" android:src="@drawable/music_icon" android:layout_margin="5dp" android:layout_gravity="center_vertical" android:transitionName="@string/translation_artwork" /> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" android:layout_marginLeft="5dp" android:layout_gravity="center_vertical"> <TextView android:textColor="@android:color/white" android:text=" " android:textSize="8pt" android:id="@+id/player_song_title" android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:textColor="@android:color/white" android:text=" " android:textSize="7pt" android:id="@+id/player_song_artist" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <ImageView android:id="@+id/player_play_button" android:layout_gravity="center_vertical" android:layout_width="42dp" android:layout_height="42dp" android:layout_marginRight="5dp" android:src="@drawable/av_pause_over_video" android:background="@drawable/button_selector_semi_white" android:transitionName="@string/translation_control_button" /> </LinearLayout>
Do you have any ideas why it is happening?
-
Alex Lockwood over 9 yearsWhat code are you using to start the transition? What does your layout hierarchy look like?
-
radzio over 9 years@AlexLockwood I've added more code. Besides shared element blinking I see whole window blinking (described here: stackoverflow.com/questions/28364106/… )
-
Alex Lockwood over 9 yearsThis post might be related: stackoverflow.com/q/26600263/844882
-
Prachi over 8 yearsFor us, we were using alpha build of 24. Switching back to 23.x was the trick.
-
-
David almost 5 yearsA better solution would be to use the code Google uses to start Activities from the drawer: mHandler.postDelayed(new Runnable() { @Override public void run() { ... } }, 250);