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));
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’sandroid:color/transparent
), the transition system will treat theViewGroup
as a single view and ignore its children. Thus, any transitions will only run on theViewGroup
, 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 theViewGroup
, 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 aOnClickListener
.
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 java
code for all transitionSet
targets which is time consuming.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With