1

Important information:

These are my animations:

R.anim.fragment_animation_in:

<!-- The info window in animation -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />        

</set>

R.anim.fragment_animation_out:

<?xml version="1.0" encoding="utf-8"?>
<!-- The info window in animation -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

</set>

I'm using both of them to changing my fragments smoothly:

/**
 * Show a new fragment
 * @param fragmentTransaction the fragment transaction, if null the a new {@link FragmentTransaction} will recevie from {@link FragmentManager}
 * @param fragment the new fragment to show
 * @param addToBackStack true if you wish to add the fragment to the back stack, false otherwise
 * @param toCommit true if you with to run the commit() method at the end of the transaction, false otherwise
 */
public void showFragment(FragmentTransaction fragmentTransaction,Fragment fragment, boolean addToBackStack, boolean toCommit)
{
    if (fragmentTransaction == null)
        fragmentTransaction = getSupportFragmentManager().beginTransaction();
    //set fragment changing animation
    fragmentTransaction.setCustomAnimations(R.anim.fragment_animation_in, R.anim.fragment_animation_out);
    //add the first fragment        
    fragmentTransaction.replace(MainActivity.APPLICATION_LAYOUT_ID, fragment);
    //if needed add to back stack
    if (addToBackStack)
        fragmentTransaction.addToBackStack(null);
    if (toCommit)
        //commit transaction
        fragmentTransaction.commit();
}

This is my first layout:

<?xml version="1.0" encoding="utf-8"?>
<!-- Start fragment of the application -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.coapps.pico"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center_vertical"
    android:gravity="center"
    android:orientation="vertical" >

    <!-- logo -->

    <ImageView
        android:id="@+id/fragment_start_pico_logo"
        android:layout_width="wrap_content"
        android:layout_height="230dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/pico_logo" />

    <!-- start now button -->

    <LinearLayout
        android:id="@+id/fragment_start_linearlayout_start_now"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/fragment_start_pico_logo"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="60dp"
        android:background="@drawable/button_orange"
        android:clickable="true"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="15dp" >

        <!-- facebook logo -->

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            android:src="@drawable/facebook_logo" />

        <!-- button text -->

        <com.coapps.pico.NillanTextView
            style="@style/text_shadow_black"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="20dp"
            android:gravity="center"
            android:text="@string/button_start_now"
            android:textColor="@android:color/white"
            android:textSize="30sp"
            app:isBold="true" />
    </LinearLayout>

</RelativeLayout>

This is my second layout:

<?xml version="1.0" encoding="utf-8"?>
<!-- Home fragment layout -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.coapps.pico"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <!-- title layout -->

    <RelativeLayout
        android:id="@+id/fragment_home_relativelayout_title"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/fragment_home_linearlayout_statistics"
        android:background="@drawable/background_fragment_title"
        android:paddingBottom="5dp" >

        <!-- profile picture -->

        <ImageView
            android:id="@+id/fragment_home_imageview_profile_picture"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/background_profile_picture"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            android:src="@drawable/test_pic" />

        <!-- user name -->

        <com.coapps.pico.NillanTextView
            android:id="@+id/fragment_home_textview_user_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/fragment_home_imageview_profile_picture"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/fragment_home_imageview_profile_picture"
            android:gravity="top"
            android:text="Roi Mozer"
            android:textColor="@android:color/white"
            android:textSize="30sp"
            app:isBold="true" />

        <!-- picash icon -->

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignBottom="@+id/fragment_home_textview_picash"
            android:layout_marginLeft="10dp"
            android:layout_toLeftOf="@+id/fragment_home_textview_picash"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            android:src="@drawable/icon_picash" />

        <!-- picash textview -->

        <com.coapps.pico.NillanTextView
            android:id="@+id/fragment_home_textview_picash"
            style="@style/text_shadow_black"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:gravity="top"
            android:text="10"
            android:textColor="@color/orange"
            android:textSize="20sp"
            app:isBold="true" />
    </RelativeLayout>

    <!-- event statistics layout -->

    <LinearLayout
        android:id="@+id/fragment_home_linearlayout_statistics"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_above="@+id/fragment_home_view_orange_delimiter"
        android:background="@android:color/white"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <!-- Created Events Statistics Layout -->

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1" >

            <!-- created name -->

            <com.coapps.pico.NillanTextView
                android:id="@+id/fragment_home_textview_created_events_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="@string/labal_created_events"
                android:textColor="@color/text_grey_blue"
                android:textSize="15sp"
                app:isBold="true" />

            <!-- created number -->

            <com.coapps.pico.NillanTextView
                android:id="@+id/fragment_home_textview_created_events_number"
                style="@style/text_shadow_black"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="6"
                android:textColor="@color/orange"
                android:textSize="60sp"
                app:isBold="true" />
        </RelativeLayout>
        <!-- Invited Events Statistics Layout -->

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1" >

            <!-- invited name -->

            <com.coapps.pico.NillanTextView
                android:id="@+id/fragment_home_textview_invited_events_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="@string/labal_invited_events"
                android:textColor="@color/text_grey_blue"
                android:textSize="15sp"
                app:isBold="true" />

            <!-- invited number -->

            <com.coapps.pico.NillanTextView
                android:id="@+id/fragment_home_textview_invited_events_number"
                style="@style/text_shadow_black"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="6"
                android:textColor="@color/orange"
                android:textSize="60sp"
                app:isBold="true" />
        </RelativeLayout>
        <!-- Attending Events Statistics Layout -->

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1" >

            <!-- attending name -->

            <com.coapps.pico.NillanTextView
                android:id="@+id/fragment_home_textview_attending_events_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="@string/labal_attending_events"
                android:textColor="@color/text_grey_blue"
                android:textSize="15sp"
                app:isBold="true" />

            <!-- attending number -->

            <com.coapps.pico.NillanTextView
                android:id="@+id/fragment_home_textview_attending_events_number"
                style="@style/text_shadow_black"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:gravity="center"
                android:text="6"
                android:textColor="@color/orange"
                android:textSize="60sp"
                app:isBold="true" />
        </RelativeLayout>
    </LinearLayout>

    <!-- orange delimiter -->

    <View
        android:id="@+id/fragment_home_view_orange_delimiter"
        android:layout_width="fill_parent"
        android:layout_height="2dp"
        android:layout_above="@+id/fragment_home_relativelayout_tutorial"
        android:background="@color/orange" />

    <!-- tutorial video layout -->

    <RelativeLayout
        android:id="@+id/fragment_home_relativelayout_tutorial"
        android:layout_width="fill_parent"
        android:layout_height="170dp"
        android:layout_above="@+id/fragment_home_textview_logout"
        android:layout_margin="5dp" >

        <!-- tutorial video -->

        <VideoView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

        <!-- Triangle shape -->

        <ImageView
            android:layout_width="100dp"
            android:layout_height="96dp"
            android:layout_centerInParent="true"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            android:src="@drawable/shape_triangle" />
        <!-- tutorial video textview -->

        <com.coapps.pico.NillanTextView
            style="@style/text_shadow_black"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/labal_tutorial_video"
            android:textColor="@android:color/white"
            android:textSize="25sp"
            app:isBold="true" />
    </RelativeLayout>

    <!-- logout -->

    <com.coapps.pico.NillanTextView
        android:id="@+id/fragment_home_textview_logout"
        style="@style/text_shadow_black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="10dp"
        android:layout_marginTop="10dp"
        android:clickable="true"
        android:text="@string/button_logout"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        app:isBold="true" />

</RelativeLayout>

This is my third layout:

<?xml version="1.0" encoding="utf-8"?>
<!-- enter code fragment of the application -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.coapps.pico"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background_start"
    android:gravity="center" >

    <!-- event code -->

    <EditText
        android:id="@+id/fragment_event_code_edittext_event_code"
        style="@style/text_shadow_black"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/background_edittext_grey"
        android:ellipsize="end"
        android:gravity="center"
        android:hint="@string/hint_enter_code"
        android:inputType="number"
        android:padding="15dp"
        android:singleLine="true"
        android:textColor="@android:color/white"
        android:textColorHint="@android:color/white"
        android:textSize="25sp" />

    <!-- Load Event -->

    <com.coapps.pico.NillanTextView
        android:id="@+id/fragment_event_code_textview_load_event"
        style="@style/text_shadow_black"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/fragment_event_code_edittext_event_code"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/button_orange"
        android:clickable="true"
        android:gravity="center"
        android:padding="15dp"
        android:text="@string/button_load_event"
        android:textColor="@android:color/white"
        android:textSize="25sp"
        app:isBold="true" />

</RelativeLayout>

Question:

When i'm trying to change from first layout to second layout the animation is not smooth, The first layout animate itself out nicely, but second layout has some kind of blink before starting the animation.

When i'm trying to change from first layout to third layout, it works nice and smoothly.

If i'm changing from first to second (there is a blink) and then from the second to third- it works nicely, and even if i'm getting back from third to second - it works nicely.

Its like that the first time it loads the second layout - it must blink before animating, but when it is already created - it animate in and out smoothly..

Any ideas ?

Asaf Nevo
  • 11,338
  • 23
  • 79
  • 154
  • Have You tried to profile during the animation? I believe there should be some long sync task. If it's an inflation, then You might need to add some view programmatically to the layout after animation end. – sandrstar Oct 26 '13 at 07:06
  • I've actually found the problem: the VideoView caused the delay.. might be because i didn't set any video in it.. Anyhow, I removed it and it now works great ! :) – Asaf Nevo Oct 26 '13 at 11:35

2 Answers2

0

I've actually found the problem: the VideoView caused the delay.. might be because i didn't set any video in it.. Anyhow, I removed it and it now works great ! :)

Asaf Nevo
  • 11,338
  • 23
  • 79
  • 154
0

I've had similar problems with fragment transactions. I use a slide-left, slide-right animation and the top of the screen glitched when this occurred. I originally thought it had to do with the ActionBar, as that was where the glitching took place.

Upon further review, the solution was to set the SurfaceView's background to transparent like so:

android:background="@android:color/transparent"

Credit to Asaf Nevo and Riasat for leading me to this solution.

Community
  • 1
  • 1
welshk91
  • 1,613
  • 18
  • 16