Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android transition doesn't care about targetId in transitionSet

I'm confused about how transitionSet is used. This is my definition:

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android" android:transitionOrdering="sequential">
    <slide android:slideEdge="bottom" android:startDelay="0">
        <targets>
            <target android:targetId="@id/action_save" />
        </targets>
    </slide>
    <slide android:slideEdge="top">
        <targets>
            <target android:targetId="@id/image_album_background" />
        </targets>
    </slide>
    <slide
        android:duration="500"
        android:slideEdge="bottom">
        <targets>
            <target android:targetId="@id/fields_container" />
        </targets>
    </slide>
</transitionSet>

This way, all views will slide from bottom edge. But if I change the order into this:

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android" android:transitionOrdering="sequential">
    <slide android:slideEdge="top">
        <targets>
            <target android:targetId="@id/image_album_background" />
        </targets>
    </slide>
    <slide android:slideEdge="bottom" android:startDelay="0">
        <targets>
            <target android:targetId="@id/action_save" />
        </targets>
    </slide>
    <slide
        android:duration="500"
        android:slideEdge="bottom">
        <targets>
            <target android:targetId="@id/fields_container" />
        </targets>
    </slide>
</transitionSet>

Then, all will slide from top edge.

It seems that Android only cares about the first transition.

Update: This is the layout:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <!-- Picture -->
                <RelativeLayout
                    android:id="@+id/image_album_background"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#ff000000">

                    <ImageView
                        android:id="@+id/image_album"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:adjustViewBounds="true"
                        android:contentDescription="No art"
                        android:maxHeight="320dp"
                        android:maxWidth="320dp"
                        android:src="@drawable/ic_noart"
                        android:transitionName="transition_album_cover"
                        tools:ignore="HardcodedText" />

                    <Button
                        android:id="@+id/btn_img_marker"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_alignEnd="@+id/image_album"
                        android:layout_alignParentBottom="true"
                        android:layout_alignRight="@+id/image_album"
                        android:background="#ff56bb21" />
                </RelativeLayout>

                <LinearLayout
                    android:id="@+id/fields_container"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/image_album_background"
                    android:background="#ffffffff"
                    android:orientation="vertical"
                    android:padding="@dimen/frame_margin">

                    <CheckBox
                        android:id="@+id/cb_embed_art"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="@string/label_embed_art" />

                    <TextView
                        android:id="@+id/text_filepath"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_horizontal"
                        android:text="/mnt/data/path/to/file/audio.mp3" />
                </LinearLayout>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/fields_container"
                    android:background="#ffffffff"
                    android:padding="24dp">
                    <!-- Title -->
                    <LinearLayout
                        android:id="@+id/title_row"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">

                        <TextView
                            style="@style/label"
                            android:layout_width="100dp"
                            android:layout_height="wrap_content"
                            android:text="@string/label_title" />

                        <EditText
                            android:id="@+id/edit_title"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:inputType="text" />
                    </LinearLayout>

                    <!-- Artist -->
                    <LinearLayout
                        android:id="@+id/artist_row"
                        style="@style/input_row"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/title_row"
                        android:orientation="horizontal">

                        <TextView
                            style="@style/label"
                            android:layout_width="100dp"
                            android:layout_height="wrap_content"
                            android:text="@string/label_artist" />

                        <AutoCompleteTextView
                            android:id="@+id/edit_artist"
                            style="?android:editTextStyle"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:inputType="text" />
                    </LinearLayout>

                    <!-- Album artist -->
                    <LinearLayout
                        android:id="@+id/album_artist_row"
                        style="@style/input_row"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/artist_row"
                        android:orientation="horizontal">

                        <TextView
                            style="@style/label"
                            android:layout_width="100dp"
                            android:layout_height="wrap_content"
                            android:text="@string/label_album_artist" />

                        <AutoCompleteTextView
                            android:id="@+id/edit_album_artist"
                            style="?android:editTextStyle"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:inputType="text" />
                    </LinearLayout>

                    <!-- Album -->
                    <LinearLayout
                        android:id="@+id/album_row"
                        style="@style/input_row"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/album_artist_row"
                        android:orientation="horizontal">

                        <TextView
                            style="@style/label"
                            android:layout_width="100dp"
                            android:layout_height="wrap_content"
                            android:text="@string/label_album" />

                        <AutoCompleteTextView
                            android:id="@+id/edit_album"
                            style="?android:editTextStyle"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:inputType="text" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/two_column_row1"
                        style="@style/input_row"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/album_row"
                        android:baselineAligned="false"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="2"
                            android:orientation="vertical">

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">

                                <TextView
                                    style="@style/label"
                                    android:layout_width="100dp"
                                    android:layout_height="wrap_content"
                                    android:text="@string/label_genre" />

                                <AutoCompleteTextView
                                    android:id="@+id/edit_genre"
                                    style="?android:editTextStyle"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:inputType="text" />
                            </LinearLayout>

                            <LinearLayout
                                style="@style/input_row"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">

                                <TextView
                                    style="@style/label"
                                    android:layout_width="100dp"
                                    android:layout_height="wrap_content"
                                    android:text="@string/label_year" />

                                <EditText
                                    android:id="@+id/edit_year"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:inputType="number" />
                            </LinearLayout>
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="24dp"
                            android:layout_weight="3"
                            android:orientation="vertical">

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">

                                <TextView
                                    style="@style/label"
                                    android:layout_width="100dp"
                                    android:layout_height="wrap_content"
                                    android:text="@string/label_track_no" />

                                <EditText
                                    android:id="@+id/edit_track_no"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:inputType="number" />
                            </LinearLayout>

                            <LinearLayout
                                style="@style/input_row"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">

                                <TextView
                                    style="@style/label"
                                    android:layout_width="100dp"
                                    android:layout_height="wrap_content"
                                    android:text="@string/label_track_total" />

                                <EditText
                                    android:id="@+id/edit_track_total"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:inputType="number" />
                            </LinearLayout>
                        </LinearLayout>
                    </LinearLayout>

                    <LinearLayout
                        style="@style/input_row"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/two_column_row1"
                        android:orientation="horizontal">

                        <TextView
                            style="@style/label"
                            android:layout_width="100dp"
                            android:layout_height="wrap_content"
                            android:text="@string/label_comment" />

                        <EditText
                            android:id="@+id/edit_comment"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="top"
                            android:inputType="textMultiLine"
                            android:minLines="5" />
                    </LinearLayout>
                </RelativeLayout>

            </RelativeLayout>

        </ScrollView>

        <com.melnykov.fab.FloatingActionButton
            android:id="@+id/action_save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="16dp"
            android:src="@drawable/ic_action_save"
            fab:fab_colorNormal="@color/accent_shade"
            fab:fab_colorRipple="#66FF9800" />

    </FrameLayout>

This is how to open the layout:

String transitionName = "transition_album_cover";
if (AnimationViews.albumCover != null) {
    fragmentTx.addSharedElement(AnimationViews.albumCover, transitionName);
}

TransitionInflater inflater = TransitionInflater.from(this);
editorFragment.setEnterTransition(inflater.inflateTransition(R.transition.editor_fragment_enter));
like image 323
sancho21 Avatar asked Feb 01 '15 06:02

sancho21


2 Answers

It is tricky to be able to make work all transitions which are child views. Because it depends on ViewGroup (parent view) of that child views.

Quoting from jimulabs:

  • If the background of a ViewGroup is set (even if it’s android:color/transparent), the transition system will treat the ViewGroup as a single view and ignore its children. Thus, any transitions will only run on the ViewGroup, instead of its children individually; if a transition has its target set to one of the children only, the transition will not run at all.
  • Conversely, if a ViewGroup does not have a background (or it’s @null), transitions will run for all its individual children; if a transition has its target set to the ViewGroup, the transition will not run at all.
  • This does NOT happen if you run beginDelayedTransition() in normal cases such as setting the visibility of views in a OnClickListener.

You can also read about this from here on section Transitioning Views & Transition Groups.

However, you should be able to make it work through method ViewGroup#setTransitionGroup(boolean) which i could not make it work. I have tried using this method on parent layout of screen. So i had to stick with javacode for all transitionSet targets which is time consuming.

like image 134
Jemshit Iskenderov Avatar answered Oct 21 '22 00:10

Jemshit Iskenderov


I just tried this and it works fine for me, so I have to think that it has to do with your specific targets. My guess is that image_album_background contains both action_save and fields_container. If so, those two Views are still going to slide within their container.

The easy way around this is to move the image_album_background into a sibling of other two instead of parent. If you don't already have a container that is capable of that (e.g. LinearLayout), one extra level will do it:

<FrameLayout ...>
    <ImageView android:id="@+id/image_album_background"/>
    <other views.../>
</FrameLayout>
like image 32
George Mount Avatar answered Oct 20 '22 23:10

George Mount