TransitionManager scene animation behavior with root layout

Question

I'm testing out the Android Kit Kat transition feature. When the transition happens, the margins of the root layout are getting padded. I find this behavior strange.

The source

public class MainActivity extends ActionBarActivity {

    Button btn;
    TextView txt;

    @TargetApi(Build.VERSION_CODES.KITKAT)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        txt = (TextView)findViewById(R.id.text);
        btn = (Button)findViewById(R.id.btn);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ViewGroup root = (ViewGroup)findViewById(R.id.root);
                Scene scene = Scene.getSceneForLayout(root, R.layout.activity_main2, MainActivity.this);
                TransitionManager.go(scene);
            }
        });

    }
...
}

activity_main.xml

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/root"
    tools:context="com.sebouh00.test.scenes.MainActivity">

        <Button android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Click me"
            android:layout_marginBottom="12dp"/>

        <TextView
            android:id="@+id/text"
            android:layout_below="@id/btn"
            android:text="@string/hello_world"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="18dp"/>

</RelativeLayout>

activity_main2.xml

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/root"
    tools:context="com.sebouh00.test.scenes.MainActivity">

        <Button android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Click me"
            android:layout_marginBottom="12dp"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/btn"
            android:id="@+id/img"
            android:src="@drawable/flag"
            android:layout_marginBottom="12dp"/>

        <TextView
            android:id="@+id/text"
            android:layout_below="@id/img"
            android:text="@string/hello_world"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="18dp"/>
</RelativeLayout>

Results in this unless I remove the paddings from activity_main2.xml

Any ideas why?

Answer 1

It's because the View produced by inflating activity_main2 gets inserted into the Scene's root, i.e. your R.id.root RelativeLayout, so the padding from R.id.root is still applied.