Skip to content

Commit 151be9b

Browse files
afohrmanwcshi
afohrman
authored and
wcshi
committed
[Motion] Added basic music player and container transform to hero music player demo app.
Added a music player to the hero music player demo app, and a container transition from the FAB to the music player. The music player has a progress indicator and rewind, play, fast forward and volume controls; at this point, they all do nothing. The transition uses a View to View container transform transition to transition from the FAB to the music player. As of now, the transition does not touch the album view - it just jumps to underneath the music player for now. PiperOrigin-RevId: 342915096
1 parent c4f7de1 commit 151be9b

16 files changed

+455
-135
lines changed

‎catalog/java/io/material/catalog/transition/hero/TransitionMusicAlbumDemoFragment.java‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818

1919
import io.material.catalog.R;
2020

21+
import android.graphics.Color;
2122
import android.os.Bundle;
2223
import androidx.core.view.ViewCompat;
2324
import androidx.recyclerview.widget.ListAdapter;
@@ -31,6 +32,7 @@
3132
import android.widget.TextView;
3233
import androidx.annotation.NonNull;
3334
import androidx.annotation.Nullable;
35+
import androidx.transition.TransitionManager;
3436
import com.google.android.material.appbar.AppBarLayout;
3537
import com.google.android.material.floatingactionbutton.FloatingActionButton;
3638
import com.google.android.material.transition.MaterialArcMotion;
@@ -47,6 +49,8 @@ public class TransitionMusicAlbumDemoFragment extends DaggerFragment {
4749
public static final String TAG = "TransitionMusicAlbumDemoFragment";
4850
private static final String ALBUM_ID_KEY = "album_id_key";
4951

52+
private ViewGroup container;
53+
5054
@Inject ContainerTransformConfiguration containerTransformConfiguration;
5155

5256
public static TransitionMusicAlbumDemoFragment newInstance(long albumId) {
@@ -74,7 +78,7 @@ public View onCreateView(
7478

7579
@Override
7680
public void onViewCreated(@NonNull View view, @Nullable Bundle bundle) {
77-
View container = view.findViewById(R.id.container);
81+
container = view.findViewById(R.id.container);
7882
Toolbar toolbar = view.findViewById(R.id.toolbar);
7983
AppBarLayout appBarLayout = view.findViewById(R.id.app_bar_layout);
8084
FloatingActionButton fab = view.findViewById(R.id.fab);
@@ -83,6 +87,8 @@ public void onViewCreated(@NonNull View view, @Nullable Bundle bundle) {
8387
TextView albumArtist = view.findViewById(R.id.album_artist);
8488
RecyclerView songRecyclerView = view.findViewById(R.id.song_recycler_view);
8589

90+
View musicPlayerContainer = view.findViewById(R.id.music_player_container);
91+
8692
long albumId = getArguments().getLong(ALBUM_ID_KEY, 0L);
8793
Album album = MusicData.getAlbumById(albumId);
8894

@@ -96,7 +102,9 @@ public void onViewCreated(@NonNull View view, @Nullable Bundle bundle) {
96102
(float) Math.abs(verticalOffset) / (float) appBarLayout1.getTotalScrollRange();
97103
if (verticalOffsetPercentage > 0.2F && fab.isOrWillBeShown()) {
98104
fab.hide();
99-
} else if (verticalOffsetPercentage <= 0.2F && fab.isOrWillBeHidden()) {
105+
} else if (verticalOffsetPercentage <= 0.2F
106+
&& fab.isOrWillBeHidden()
107+
&& musicPlayerContainer.getVisibility() != View.VISIBLE) {
100108
fab.show();
101109
}
102110
});
@@ -115,6 +123,38 @@ public void onViewCreated(@NonNull View view, @Nullable Bundle bundle) {
115123
TrackAdapter adapter = new TrackAdapter();
116124
songRecyclerView.setAdapter(adapter);
117125
adapter.submitList(album.tracks);
126+
127+
// Set up music player transitions
128+
MaterialContainerTransform musicPlayerEnterTransform =
129+
createMusicPlayerTransform(fab, musicPlayerContainer);
130+
131+
fab.setOnClickListener(
132+
v -> {
133+
TransitionManager.beginDelayedTransition(container, musicPlayerEnterTransform);
134+
fab.setVisibility(View.GONE);
135+
musicPlayerContainer.setVisibility(View.VISIBLE);
136+
});
137+
138+
MaterialContainerTransform musicPlayerExitTransform =
139+
createMusicPlayerTransform(musicPlayerContainer, fab);
140+
141+
musicPlayerContainer.setOnClickListener(
142+
v -> {
143+
TransitionManager.beginDelayedTransition(container, musicPlayerExitTransform);
144+
musicPlayerContainer.setVisibility(View.GONE);
145+
fab.setVisibility(View.VISIBLE);
146+
});
147+
}
148+
149+
private static MaterialContainerTransform createMusicPlayerTransform(
150+
View startView, View endView) {
151+
MaterialContainerTransform musicPlayerTransform = new MaterialContainerTransform();
152+
musicPlayerTransform.setPathMotion(new MaterialArcMotion());
153+
musicPlayerTransform.setScrimColor(Color.TRANSPARENT);
154+
musicPlayerTransform.setStartView(startView);
155+
musicPlayerTransform.setEndView(endView);
156+
musicPlayerTransform.addTarget(endView);
157+
return musicPlayerTransform;
118158
}
119159

120160
private void setUpTransitions() {

‎catalog/java/io/material/catalog/transition/hero/res/drawable/ic_arrow_back_black_24dp.xml‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,14 @@
1515
-->
1616

1717
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18-
android:width="24dp"
19-
android:height="24dp"
20-
android:viewportWidth="24.0"
21-
android:viewportHeight="24.0"
22-
android:tint="?attr/colorControlNormal">
23-
<path
24-
android:fillColor="#FF000000"
25-
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
18+
xmlns:tools="http://schemas.android.com/tools"
19+
android:width="24dp"
20+
android:height="24dp"
21+
android:tint="?attr/colorControlNormal"
22+
android:viewportHeight="24.0"
23+
android:viewportWidth="24.0"
24+
tools:ignore="NewApi">
25+
<path
26+
android:fillColor="#FF000000"
27+
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
2628
</vector>

‎catalog/java/io/material/catalog/transition/hero/res/drawable/ic_fast_forward_white_24dp.xml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18+
xmlns:tools="http://schemas.android.com/tools"
19+
android:width="24dp"
20+
android:height="24dp"
21+
android:viewportWidth="24"
22+
android:viewportHeight="24"
23+
tools:ignore="NewApi">
24+
<path
25+
android:fillColor="@android:color/white"
26+
android:pathData="M4,18l8.5,-6L4,6v12zM13,6v12l8.5,-6L13,6z"/>
27+
</vector>

‎catalog/java/io/material/catalog/transition/hero/res/drawable/ic_fast_rewind_24dp.xml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18+
xmlns:tools="http://schemas.android.com/tools"
19+
android:width="24dp"
20+
android:height="24dp"
21+
android:viewportWidth="24.0"
22+
android:viewportHeight="24.0"
23+
tools:ignore="NewApi">
24+
<path
25+
android:fillColor="@android:color/white"
26+
android:pathData="M11,18L11,6l-8.5,6 8.5,6zM11.5,12l8.5,6L20,6l-8.5,6z"/>
27+
</vector>

‎catalog/java/io/material/catalog/transition/hero/res/drawable/ic_play_arrow_black_24dp.xml‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@
1515
-->
1616

1717
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18-
android:width="24dp"
19-
android:height="24dp"
20-
android:viewportWidth="24.0"
21-
android:viewportHeight="24.0">
22-
<path
23-
android:fillColor="#FF000000"
24-
android:pathData="M8,5v14l11,-7z"/>
18+
xmlns:tools="http://schemas.android.com/tools"
19+
android:width="24dp"
20+
android:height="24dp"
21+
android:viewportHeight="24.0"
22+
android:viewportWidth="24.0"
23+
tools:ignore="NewApi">
24+
<path
25+
android:fillColor="#FF000000"
26+
android:pathData="M8,5v14l11,-7z" />
2527
</vector>

‎catalog/java/io/material/catalog/transition/hero/res/drawable/ic_play_arrow_white_24dp.xml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18+
xmlns:tools="http://schemas.android.com/tools"
19+
android:width="24dp"
20+
android:height="24dp"
21+
android:viewportHeight="24.0"
22+
android:viewportWidth="24.0"
23+
tools:ignore="NewApi">
24+
<path
25+
android:fillColor="@android:color/white"
26+
android:pathData="M8,5v14l11,-7z" />
27+
</vector>

‎catalog/java/io/material/catalog/transition/hero/res/drawable/ic_sort_by_alpha_black_24dp.xml‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@
1515
-->
1616

1717
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18-
android:width="24dp"
19-
android:height="24dp"
20-
android:tint="?attr/colorControlNormal"
21-
android:viewportWidth="24.0"
22-
android:viewportHeight="24.0">
18+
xmlns:tools="http://schemas.android.com/tools"
19+
android:width="24dp"
20+
android:height="24dp"
21+
android:tint="?attr/colorControlNormal"
22+
android:viewportHeight="24.0"
23+
android:viewportWidth="24.0"
24+
tools:ignore="NewApi">
2325
<path
24-
android:fillColor="#FF000000"
25-
android:pathData="M14.94,4.66h-4.72l2.36,-2.36zM10.25,19.37h4.66l-2.33,2.33zM6.1,6.27L1.6,17.73h1.84l0.92,-2.45h5.11l0.92,2.45h1.84L7.74,6.27L6.1,6.27zM4.97,13.64l1.94,-5.18 1.94,5.18L4.97,13.64zM15.73,16.14h6.12v1.59h-8.53v-1.29l5.92,-8.56h-5.88v-1.6h8.3v1.26l-5.93,8.6z" />
26+
android:fillColor="#FF000000"
27+
android:pathData="M14.94,4.66h-4.72l2.36,-2.36zM10.25,19.37h4.66l-2.33,2.33zM6.1,6.27L1.6,17.73h1.84l0.92,-2.45h5.11l0.92,2.45h1.84L7.74,6.27L6.1,6.27zM4.97,13.64l1.94,-5.18 1.94,5.18L4.97,13.64zM15.73,16.14h6.12v1.59h-8.53v-1.29l5.92,-8.56h-5.88v-1.6h8.3v1.26l-5.93,8.6z" />
2628
</vector>
27-

‎catalog/java/io/material/catalog/transition/hero/res/drawable/ic_view_list_black_24dp.xml‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,14 @@
1515
-->
1616

1717
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18-
android:width="24dp"
19-
android:height="24dp"
20-
android:tint="?attr/colorControlNormal"
21-
android:viewportWidth="24.0"
22-
android:viewportHeight="24.0">
18+
xmlns:tools="http://schemas.android.com/tools"
19+
android:width="24dp"
20+
android:height="24dp"
21+
android:tint="?attr/colorControlNormal"
22+
android:viewportHeight="24.0"
23+
android:viewportWidth="24.0"
24+
tools:ignore="NewApi">
2325
<path
24-
android:fillColor="#FF000000"
25-
android:pathData="M4,14h4v-4L4,10v4zM4,19h4v-4L4,15v4zM4,9h4L8,5L4,5v4zM9,14h12v-4L9,10v4zM9,19h12v-4L9,15v4zM9,5v4h12L21,5L9,5z" />
26+
android:fillColor="#FF000000"
27+
android:pathData="M4,14h4v-4L4,10v4zM4,19h4v-4L4,15v4zM4,9h4L8,5L4,5v4zM9,14h12v-4L9,10v4zM9,19h12v-4L9,15v4zM9,5v4h12L21,5L9,5z" />
2628
</vector>

‎catalog/java/io/material/catalog/transition/hero/res/drawable/ic_volume_down_white_24dp.xml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
17+
xmlns:tools="http://schemas.android.com/tools"
18+
android:width="24dp"
19+
android:height="24dp"
20+
android:viewportWidth="24.0"
21+
android:viewportHeight="24.0"
22+
tools:ignore="NewApi">
23+
<path
24+
android:fillColor="@android:color/white"
25+
android:pathData="M18.5,12c0,-1.77 -1.02,-3.29 -2.5,-4.03v8.05c1.48,-0.73 2.5,-2.25 2.5,-4.02zM5,9v6h4l5,5V4L9,9H5z"/>
26+
</vector>

‎catalog/java/io/material/catalog/transition/hero/res/drawable/ic_volume_up_black_24dp.xml‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@
1313
~ See the License for the specific language governing permissions and
1414
~ limitations under the License.
1515
-->
16-
1716
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18-
android:width="24dp"
19-
android:height="24dp"
20-
android:viewportWidth="24.0"
21-
android:viewportHeight="24.0">
22-
<path
23-
android:fillColor="#FF000000"
24-
android:pathData="M3,9v6h4l5,5L12,4L7,9L3,9zM16.5,12c0,-1.77 -1.02,-3.29 -2.5,-4.03v8.05c1.48,-0.73 2.5,-2.25 2.5,-4.02zM14,3.23v2.06c2.89,0.86 5,3.54 5,6.71s-2.11,5.85 -5,6.71v2.06c4.01,-0.91 7,-4.49 7,-8.77s-2.99,-7.86 -7,-8.77z"/>
17+
xmlns:tools="http://schemas.android.com/tools"
18+
android:width="24dp"
19+
android:height="24dp"
20+
android:viewportHeight="24.0"
21+
android:viewportWidth="24.0"
22+
tools:ignore="NewApi">
23+
<path
24+
android:fillColor="#FF000000"
25+
android:pathData="M3,9v6h4l5,5L12,4L7,9L3,9zM16.5,12c0,-1.77 -1.02,-3.29 -2.5,-4.03v8.05c1.48,-0.73 2.5,-2.25 2.5,-4.02zM14,3.23v2.06c2.89,0.86 5,3.54 5,6.71s-2.11,5.85 -5,6.71v2.06c4.01,-0.91 7,-4.49 7,-8.77s-2.99,-7.86 -7,-8.77z" />
2526
</vector>

0 commit comments

Comments
 (0)