Skip to content

Commit 501e967

Browse files
afohrmanhunterstich
afohrman
authored and
hunterstich
committed
Add view to view container transform demo to the catalog.
Add a container transform demo similar to the activity and fragment container transform demos, but for view to view transitions. PiperOrigin-RevId: 296048253
1 parent e664b98 commit 501e967

File tree

4 files changed

+212
-1
lines changed

4 files changed

+212
-1
lines changed

‎catalog/java/io/material/catalog/transition/TransitionContainerTransformViewDemoFragment.java‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/*
2+
* Copyright 2020 The Android Open Source Project
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
package io.material.catalog.transition;
18+
19+
import io.material.catalog.R;
20+
21+
import android.annotation.TargetApi;
22+
import android.os.Build.VERSION_CODES;
23+
import android.os.Bundle;
24+
import androidx.annotation.IdRes;
25+
import androidx.annotation.NonNull;
26+
import androidx.annotation.Nullable;
27+
import android.transition.TransitionManager;
28+
import android.view.LayoutInflater;
29+
import android.view.Menu;
30+
import android.view.MenuInflater;
31+
import android.view.MenuItem;
32+
import android.view.View;
33+
import android.view.ViewGroup;
34+
import android.widget.FrameLayout;
35+
import com.google.android.material.transition.MaterialContainerTransform;
36+
import io.material.catalog.feature.DemoFragment;
37+
import io.material.catalog.feature.OnBackPressedHandler;
38+
39+
/** A fragment that displays the main Transition demo for the Catalog app. */
40+
@TargetApi(VERSION_CODES.LOLLIPOP)
41+
public class TransitionContainerTransformViewDemoFragment extends DemoFragment
42+
implements OnBackPressedHandler {
43+
44+
@Nullable private View startView;
45+
@Nullable private View endCard;
46+
@Nullable private FrameLayout root;
47+
48+
@NonNull
49+
private final ContainerTransformConfigurationHelper configurationHelper =
50+
getContainerTransformConfigurationHelper();
51+
52+
@Override
53+
public View onCreateDemoView(
54+
LayoutInflater layoutInflater, @Nullable ViewGroup viewGroup, @Nullable Bundle bundle) {
55+
View view =
56+
layoutInflater.inflate(
57+
R.layout.cat_transition_container_transform_view_fragment, viewGroup, false);
58+
root = view.findViewById(R.id.root);
59+
endCard = view.findViewById(R.id.end_card);
60+
return view;
61+
}
62+
63+
@Override
64+
public void onViewCreated(@NonNull View view, @Nullable Bundle bundle) {
65+
addTransitionableTarget(view, R.id.start_fab);
66+
addTransitionableTarget(view, R.id.single_line_list_item);
67+
addTransitionableTarget(view, R.id.vertical_card_item);
68+
addTransitionableTarget(view, R.id.horizontal_card_item);
69+
addTransitionableTarget(view, R.id.grid_card_item);
70+
addTransitionableTarget(view, R.id.grid_tall_card_item);
71+
addTransitionableTarget(view, R.id.end_card);
72+
}
73+
74+
private void addTransitionableTarget(@NonNull View view, @IdRes int id) {
75+
View target = view.findViewById(id);
76+
if (target != null) {
77+
if (id == R.id.end_card) {
78+
target.setOnClickListener(v -> showStartView());
79+
} else {
80+
target.setOnClickListener(this::showEndView);
81+
}
82+
}
83+
}
84+
85+
private void showEndView(@Nullable View startView) {
86+
// Save a reference to the start view that triggered the transition in order to know which view
87+
// to transition into during the return transition.
88+
this.startView = startView;
89+
90+
// Construct a container transform transition between two views.
91+
MaterialContainerTransform transition = buildContainerTransform(true);
92+
transition.setStartView(startView);
93+
transition.setEndView(endCard);
94+
95+
// Trigger the container transform transition.
96+
TransitionManager.beginDelayedTransition(root, transition);
97+
if (startView != null) {
98+
startView.setVisibility(View.INVISIBLE);
99+
}
100+
if (endCard != null) {
101+
endCard.setVisibility(View.VISIBLE);
102+
}
103+
}
104+
105+
private void showStartView() {
106+
// Construct a container transform transition between two views.
107+
MaterialContainerTransform transition = buildContainerTransform(false);
108+
transition.setStartView(endCard);
109+
transition.setEndView(startView);
110+
111+
// Trigger the container transform transition.
112+
TransitionManager.beginDelayedTransition(root, transition);
113+
if (startView != null) {
114+
startView.setVisibility(View.VISIBLE);
115+
}
116+
if (endCard != null) {
117+
endCard.setVisibility(View.INVISIBLE);
118+
}
119+
}
120+
121+
@NonNull
122+
private MaterialContainerTransform buildContainerTransform(boolean entering) {
123+
MaterialContainerTransform transform = new MaterialContainerTransform(requireContext());
124+
configurationHelper.configure(transform, entering);
125+
return transform;
126+
}
127+
128+
@NonNull
129+
protected ContainerTransformConfigurationHelper getContainerTransformConfigurationHelper() {
130+
return new ContainerTransformConfigurationHelper();
131+
}
132+
133+
@Override
134+
public boolean onBackPressed() {
135+
if (endCard != null && endCard.getVisibility() == View.VISIBLE) {
136+
showStartView();
137+
return true;
138+
}
139+
return false;
140+
}
141+
142+
@Override
143+
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
144+
menuInflater.inflate(R.menu.configure_menu, menu);
145+
super.onCreateOptionsMenu(menu, menuInflater);
146+
}
147+
148+
@Override
149+
public boolean onOptionsItemSelected(MenuItem menuItem) {
150+
if (menuItem.getItemId() == R.id.configure) {
151+
configurationHelper.showConfigurationChooser(
152+
requireContext(), dialog -> buildContainerTransform(true));
153+
return true;
154+
}
155+
return super.onOptionsItemSelected(menuItem);
156+
}
157+
}

‎catalog/java/io/material/catalog/transition/TransitionFragment.java‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,12 @@ public Fragment createFragment() {
8383
return getTransitionContainerTransformDemoFragment();
8484
}
8585
},
86+
new Demo(R.string.cat_transition_container_transform_view_title) {
87+
@Override
88+
public Fragment createFragment() {
89+
return new TransitionContainerTransformViewDemoFragment();
90+
}
91+
},
8692
new Demo(R.string.cat_transition_shared_axis_title) {
8793
@Override
8894
public Fragment createFragment() {

‎catalog/java/io/material/catalog/transition/res/layout/cat_transition_container_transform_view_fragment.xml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright 2020 The Android Open Source Project
4+
~
5+
~ Licensed under the Apache License, Version 2.0 (the "License");
6+
~ you may not use this file except in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ https://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing, software
12+
~ distributed under the License is distributed on an "AS IS" BASIS,
13+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
~ See the License for the specific language governing permissions and
15+
~ limitations under the License.
16+
-->
17+
18+
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
19+
xmlns:app="http://schemas.android.com/apk/res-auto"
20+
xmlns:tools="http://schemas.android.com/tools"
21+
android:id="@+id/root"
22+
android:layout_width="match_parent"
23+
android:layout_height="match_parent"
24+
tools:targetApi="lollipop">
25+
26+
<include layout="@layout/cat_transition_list_fragment" />
27+
28+
<com.google.android.material.card.MaterialCardView
29+
android:id="@+id/end_card"
30+
android:layout_width="300dp"
31+
android:layout_height="400dp"
32+
android:backgroundTint="?attr/colorPrimary"
33+
android:layout_gravity="bottom|center_horizontal"
34+
android:padding="16dp"
35+
android:layout_margin="16dp"
36+
android:visibility="gone"/>
37+
38+
<com.google.android.material.floatingactionbutton.FloatingActionButton
39+
android:id="@+id/start_fab"
40+
android:layout_width="wrap_content"
41+
android:layout_height="wrap_content"
42+
android:layout_margin="16dp"
43+
android:layout_gravity="bottom|end"
44+
android:transitionName="shared_element_fab"
45+
app:srcCompat="@drawable/ic_add_24px" />
46+
</FrameLayout>

‎catalog/java/io/material/catalog/transition/res/values/strings.xml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
<b>Transitions are only supported on API level 21 and up.</b>\n\nTransition choreography is a coordinated sequence of motion that maintains user focus as the interface adapts.
2727
</string>
2828

29+
<string name="cat_transition_container_transform_activity_title">Container Transform (Activity)</string>
30+
2931
<string name="cat_transition_container_transform_fragment_title">Container Transform (Fragment)</string>
3032
<string name="cat_transition_card_title">Title</string>
3133
<string name="cat_transition_lorem_ipsum" translatable="false">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in scelerisque sem. Mauris volutpat, dolor id interdum ullamcorper, risus dolor egestas lectus, sit amet mattis purus dui nec risus. Maecenas non sodales nisi, vel dictum dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse blandit eleifend diam, vel rutrum tellus vulputate quis. Aliquam eget libero aliquet, imperdiet nisl a, ornare ex. Sed rhoncus est ut libero porta lobortis. Fusce in dictum tellus.\n\n
@@ -37,7 +39,7 @@ Phasellus in aliquet mi. Pellentesque habitant morbi tristique senectus et netus
3739
<string name="cat_transition_body_content_desc">Sample body text</string>
3840
<string name="cat_transition_image_content_desc">Sample header image</string>
3941

40-
<string name="cat_transition_container_transform_activity_title">Container Transform (Activity)</string>
42+
<string name="cat_transition_container_transform_view_title">Container Transform (View)</string>
4143

4244
<string name="cat_transition_config_menu_item_title">Configure transition</string>
4345
<string name="cat_transition_config_path_motion_title">Path motion</string>

0 commit comments

Comments
 (0)