Graphic changes to the playlist page

This commit is contained in:
CappielloAntonio 2021-08-12 10:37:05 +02:00
parent b1e2cbe68f
commit 42731aef75
5 changed files with 194 additions and 135 deletions

1
.idea/misc.xml generated
View file

@ -28,6 +28,7 @@
<entry key="app/src/main/res/layout/fragment_home.xml" value="0.2212962962962963" /> <entry key="app/src/main/res/layout/fragment_home.xml" value="0.2212962962962963" />
<entry key="app/src/main/res/layout/fragment_login.xml" value="0.3166496424923391" /> <entry key="app/src/main/res/layout/fragment_login.xml" value="0.3166496424923391" />
<entry key="app/src/main/res/layout/fragment_playlist_catalogue.xml" value="0.3229166666666667" /> <entry key="app/src/main/res/layout/fragment_playlist_catalogue.xml" value="0.3229166666666667" />
<entry key="app/src/main/res/layout/fragment_playlist_page.xml" value="0.3229166666666667" />
<entry key="app/src/main/res/layout/item_home_discover_song.xml" value="0.3166496424923391" /> <entry key="app/src/main/res/layout/item_home_discover_song.xml" value="0.3166496424923391" />
<entry key="app/src/main/res/layout/item_horizontal_album.xml" value="0.3166496424923391" /> <entry key="app/src/main/res/layout/item_horizontal_album.xml" value="0.3166496424923391" />
<entry key="app/src/main/res/layout/item_horizontal_track.xml" value="4.0" /> <entry key="app/src/main/res/layout/item_horizontal_track.xml" value="4.0" />

View file

@ -4,12 +4,12 @@ import android.os.Parcel;
import android.os.Parcelable; import android.os.Parcelable;
public class Playlist implements Parcelable { public class Playlist implements Parcelable {
public String id; private String id;
public String name; private String name;
public String primary; private String primary;
public String blurHash; private String blurHash;
public int songCount; private int songCount;
public int duration; private long duration;
public Playlist(com.cappielloantonio.play.subsonic.models.Playlist playlist) { public Playlist(com.cappielloantonio.play.subsonic.models.Playlist playlist) {
this.id = playlist.getId(); this.id = playlist.getId();
@ -40,7 +40,7 @@ public class Playlist implements Parcelable {
return songCount; return songCount;
} }
public int getDuration() { public long getDuration() {
return duration; return duration;
} }

View file

@ -16,6 +16,7 @@ import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider; import androidx.lifecycle.ViewModelProvider;
import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.LinearLayoutManager;
import com.bumptech.glide.load.resource.bitmap.RoundedCorners;
import com.cappielloantonio.play.App; import com.cappielloantonio.play.App;
import com.cappielloantonio.play.R; import com.cappielloantonio.play.R;
import com.cappielloantonio.play.adapter.SongHorizontalAdapter; import com.cappielloantonio.play.adapter.SongHorizontalAdapter;
@ -25,6 +26,7 @@ import com.cappielloantonio.play.repository.QueueRepository;
import com.cappielloantonio.play.service.MusicPlayerRemote; import com.cappielloantonio.play.service.MusicPlayerRemote;
import com.cappielloantonio.play.ui.activity.MainActivity; import com.cappielloantonio.play.ui.activity.MainActivity;
import com.cappielloantonio.play.util.DownloadUtil; import com.cappielloantonio.play.util.DownloadUtil;
import com.cappielloantonio.play.util.MusicUtil;
import com.cappielloantonio.play.viewmodel.PlaylistPageViewModel; import com.cappielloantonio.play.viewmodel.PlaylistPageViewModel;
import java.util.Collections; import java.util.Collections;
@ -59,8 +61,8 @@ public class PlaylistPageFragment extends Fragment {
init(); init();
initAppBar(); initAppBar();
initBackCover();
initMusicButton(); initMusicButton();
initBackCover();
initSongsView(); initSongsView();
return view; return view;
@ -97,20 +99,19 @@ public class PlaylistPageFragment extends Fragment {
private void initAppBar() { private void initAppBar() {
activity.setSupportActionBar(bind.animToolbar); activity.setSupportActionBar(bind.animToolbar);
if (activity.getSupportActionBar() != null)
if (activity.getSupportActionBar() != null) {
activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true); activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
activity.getSupportActionBar().setDisplayShowHomeEnabled(true);
}
bind.animToolbar.setTitle(MusicUtil.getReadableString(playlistPageViewModel.getPlaylist().getName()));
bind.playlistNameLabel.setText(playlistPageViewModel.getPlaylist().getName());
bind.playlistSongCountLabel.setText("Song count: " + playlistPageViewModel.getPlaylist().getSongCount());
bind.playlistDurationLabel.setText("Playlist duration: " + MusicUtil.getReadableDurationString(playlistPageViewModel.getPlaylist().getDuration(), false));
bind.collapsingToolbar.setTitle(playlistPageViewModel.getPlaylist().getName());
bind.animToolbar.setNavigationOnClickListener(v -> activity.navController.navigateUp()); bind.animToolbar.setNavigationOnClickListener(v -> activity.navController.navigateUp());
bind.collapsingToolbar.setCollapsedTitleTextColor(getResources().getColor(R.color.titleTextColor, null));
bind.appbar.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
if ((bind.collapsingToolbar.getHeight() + verticalOffset) < (2 * ViewCompat.getMinimumHeight(bind.collapsingToolbar))) {
bind.animToolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.titleTextColor, null), PorterDuff.Mode.SRC_ATOP);
} else {
bind.animToolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.white, null), PorterDuff.Mode.SRC_ATOP);
}
});
} }
private void initMusicButton() { private void initMusicButton() {
@ -143,17 +144,19 @@ public class PlaylistPageFragment extends Fragment {
private void initBackCover() { private void initBackCover() {
CustomGlideRequest.Builder CustomGlideRequest.Builder
.from(requireContext(), playlistPageViewModel.getPlaylist().getPrimary(), CustomGlideRequest.ALBUM_PIC, null) .from(requireContext(), playlistPageViewModel.getPlaylist().getPrimary(), CustomGlideRequest.PLAYLIST_PIC, null)
.build() .build()
.into(bind.albumBackCoverImageView); .transform(new RoundedCorners(CustomGlideRequest.CORNER_RADIUS))
.into(bind.playlistCoverImageView);
} }
private void initSongsView() { private void initSongsView() {
bind.playlistRecyclerView.setLayoutManager(new LinearLayoutManager(requireContext())); bind.songRecyclerView.setLayoutManager(new LinearLayoutManager(requireContext()));
bind.playlistRecyclerView.setHasFixedSize(true); bind.songRecyclerView.setHasFixedSize(true);
songHorizontalAdapter = new SongHorizontalAdapter(activity, requireContext(), getChildFragmentManager()); songHorizontalAdapter = new SongHorizontalAdapter(activity, requireContext(), getChildFragmentManager());
bind.playlistRecyclerView.setAdapter(songHorizontalAdapter); bind.songRecyclerView.setAdapter(songHorizontalAdapter);
playlistPageViewModel.getPlaylistSongLiveList().observe(requireActivity(), songs -> { playlistPageViewModel.getPlaylistSongLiveList().observe(requireActivity(), songs -> {
songHorizontalAdapter.setItems(songs); songHorizontalAdapter.setItems(songs);
}); });

View file

@ -34,13 +34,13 @@
android:id="@+id/album_cover_image_view" android:id="@+id/album_cover_image_view"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="0dp" android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
android:layout_marginLeft="64dp" android:layout_marginLeft="64dp"
android:layout_marginRight="64dp"
android:layout_marginTop="8dp" android:layout_marginTop="8dp"
android:layout_marginRight="64dp"
android:layout_marginBottom="8dp" android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /> app:layout_constraintTop_toTopOf="parent" />
<TextView <TextView
@ -50,14 +50,14 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="18dp" android:layout_marginStart="18dp"
android:layout_marginEnd="18dp" android:layout_marginEnd="18dp"
android:paddingTop="8dp"
android:ellipsize="end" android:ellipsize="end"
android:maxLines="2" android:maxLines="2"
android:paddingTop="8dp"
android:singleLine="false" android:singleLine="false"
android:textAlignment="center"
android:text="@string/label_placeholder" android:text="@string/label_placeholder"
app:layout_constraintStart_toStartOf="parent" android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/album_cover_image_view" /> app:layout_constraintTop_toBottomOf="@+id/album_cover_image_view" />
<TextView <TextView
@ -69,10 +69,10 @@
android:layout_marginEnd="18dp" android:layout_marginEnd="18dp"
android:ellipsize="end" android:ellipsize="end"
android:maxLines="1" android:maxLines="1"
android:textAlignment="center"
android:text="@string/label_placeholder" android:text="@string/label_placeholder"
app:layout_constraintStart_toStartOf="parent" android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/album_name_label" /> app:layout_constraintTop_toBottomOf="@+id/album_name_label" />
<TextView <TextView
@ -82,10 +82,10 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="18dp" android:layout_marginStart="18dp"
android:layout_marginEnd="18dp" android:layout_marginEnd="18dp"
android:textAlignment="center"
android:text="@string/label_placeholder" android:text="@string/label_placeholder"
app:layout_constraintStart_toStartOf="parent" android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/album_artist_label" /> app:layout_constraintTop_toBottomOf="@+id/album_artist_label" />
<View <View
@ -151,11 +151,11 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="18dp" android:layout_marginStart="18dp"
android:layout_marginEnd="18dp" android:layout_marginEnd="18dp"
android:textAlignment="center"
android:text="@string/label_placeholder" android:text="@string/label_placeholder"
android:textAlignment="center"
android:visibility="gone" android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/album_page_button_layout" /> app:layout_constraintTop_toBottomOf="@+id/album_page_button_layout" />
<View <View

View file

@ -1,128 +1,183 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent"> android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout <androidx.appcompat.widget.Toolbar
android:id="@+id/appbar" android:id="@+id/anim_toolbar"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="@dimen/appbar_header_height" android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true" app:layout_collapseMode="pin"
android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"> app:navigationIcon="@drawable/ic_arrow_back"
app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"
<com.google.android.material.appbar.CollapsingToolbarLayout app:titleTextColor="@color/titleTextColor" />
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="@dimen/activity_margin_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="@+id/album_back_cover_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="@dimen/appbar_header_height"
android:layout_gravity="top"
android:background="@drawable/gradient_backdrop_background_image"
android:fitsSystemWindows="true" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"
app:titleTextColor="@color/titleTextColor" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView <androidx.core.widget.NestedScrollView
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content">
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout <LinearLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:clipToPadding="false" android:orientation="vertical">
android:orientation="vertical"
android:paddingTop="18dp"
android:paddingBottom="@dimen/global_padding_bottom">
<View <androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/upper_button_divider" android:id="@+id/playlist_info_sector"
style="@style/Divider"
android:layout_marginStart="18dp"
android:layout_marginEnd="18dp"/>
<LinearLayout
android:id="@+id/playlist_page_button_layout"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="horizontal" android:clipChildren="false"
android:paddingTop="4dp" android:paddingTop="8dp">
android:paddingBottom="4dp">
<Button <ImageView
android:id="@+id/playlist_page_play_button" android:id="@+id/playlist_cover_image_view"
style="@style/MainButton" android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="64dp"
android:layout_marginTop="8dp"
android:layout_marginRight="64dp"
android:layout_marginBottom="8dp"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/playlist_name_label"
style="@style/ShowcaseTitleTextView"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="16dp" android:layout_marginStart="18dp"
android:layout_marginEnd="4dp" android:layout_marginEnd="18dp"
android:layout_weight="1" android:ellipsize="end"
android:backgroundTint="@color/buttonBackgroundColor" android:maxLines="2"
android:padding="10dp" android:paddingTop="8dp"
android:text="Play" android:singleLine="false"
android:textAllCaps="false" android:text="@string/label_placeholder"
app:icon="@drawable/ic_play" android:textAlignment="center"
app:iconGravity="textStart" app:layout_constraintEnd_toEndOf="parent"
app:iconPadding="18dp" app:layout_constraintStart_toStartOf="parent"
app:iconTint="@color/darkIconColor" /> app:layout_constraintTop_toBottomOf="@+id/playlist_cover_image_view" />
<Button <TextView
android:id="@+id/playlist_page_shuffle_button" android:id="@+id/playlist_song_count_label"
style="@style/MainButton" style="@style/ShowcaseSubtitleTextView"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="4dp" android:layout_marginStart="18dp"
android:layout_marginEnd="16dp" android:layout_marginEnd="18dp"
android:layout_weight="1" android:ellipsize="end"
android:backgroundTint="@color/buttonBackgroundColor" android:maxLines="1"
android:padding="10dp" android:text="@string/label_placeholder"
android:text="Shuffle" android:textAlignment="center"
android:textAllCaps="false" app:layout_constraintEnd_toEndOf="parent"
app:icon="@drawable/ic_shuffle" app:layout_constraintStart_toStartOf="parent"
app:iconGravity="textStart" app:layout_constraintTop_toBottomOf="@+id/playlist_name_label" />
app:iconPadding="18dp"
app:iconTint="@color/darkIconColor" />
</LinearLayout>
<View <TextView
android:id="@+id/bottom_button_divider" android:id="@+id/playlist_duration_label"
style="@style/Divider" style="@style/ShowcaseExtraTextView"
android:layout_marginStart="18dp" android:layout_width="0dp"
android:layout_marginEnd="18dp" android:layout_height="wrap_content"
android:layout_marginBottom="12dp"/> android:layout_marginStart="18dp"
android:layout_marginEnd="18dp"
android:text="@string/label_placeholder"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playlist_song_count_label" />
<View
android:id="@+id/upper_button_divider"
style="@style/Divider"
android:layout_marginStart="18dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="18dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playlist_duration_label" />
<LinearLayout
android:id="@+id/playlist_page_button_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="4dp"
android:paddingBottom="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/upper_button_divider">
<Button
android:id="@+id/playlist_page_play_button"
style="@style/MainButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="4dp"
android:layout_weight="1"
android:backgroundTint="@color/buttonBackgroundColor"
android:padding="10dp"
android:text="Play"
android:textAllCaps="false"
app:icon="@drawable/ic_play"
app:iconGravity="textStart"
app:iconPadding="18dp"
app:iconTint="@color/darkIconColor" />
<Button
android:id="@+id/playlist_page_shuffle_button"
style="@style/MainButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginEnd="16dp"
android:layout_weight="1"
android:backgroundTint="@color/buttonBackgroundColor"
android:padding="10dp"
android:text="Shuffle"
android:textAllCaps="false"
app:icon="@drawable/ic_shuffle"
app:iconGravity="textStart"
app:iconPadding="18dp"
app:iconTint="@color/darkIconColor" />
</LinearLayout>
<TextView
android:id="@+id/album_bio_label"
style="@style/ShowcaseExtraTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginEnd="18dp"
android:text="@string/label_placeholder"
android:textAlignment="center"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playlist_page_button_layout" />
<View
android:id="@+id/bottom_button_divider"
style="@style/Divider"
android:layout_marginStart="18dp"
android:layout_marginEnd="18dp"
android:layout_marginBottom="18dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/playlist_page_button_layout" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView <androidx.recyclerview.widget.RecyclerView
android:id="@+id/playlist_recycler_view" android:id="@+id/song_recycler_view"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="wrap_content"
android:clipToPadding="false" android:clipToPadding="false"
android:nestedScrollingEnabled="false" android:nestedScrollingEnabled="false"
android:paddingBottom="@dimen/global_padding_bottom" android:paddingTop="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior" /> android:paddingBottom="@dimen/global_padding_bottom"/>
</LinearLayout> </LinearLayout>
</androidx.core.widget.NestedScrollView> </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout> </LinearLayout>