Android lollipop shared elements transition blink / flash

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?

Answers


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.


Need Your Help

Adding icons to JQuery accordion

jquery html css

I have built the following super simple JQuery accordion:

Logging Application Block - Logging the caller

c# logging enterprise-library application-blocks

When logging with Log4Net it's very easy to put class that called the log into the log file. I've found in the past that this makes it very easy to trace through the code and see the flow through ...