tenkuma/jamfish
tenkuma/jamfish
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesigned album detail page

Browse source
This commit is contained in:
Karim Abou Zeid 2018-04-27 23:10:19 +02:00
commit 698fec921f
5 changed files with 246 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

95
app/src/main/java/com/kabouzeid/gramophone/ui/activities/AlbumDetailActivity.java
View file

@ -2,6 +2,8 @@ package com.kabouzeid.gramophone.ui.activities;
import android.content.Context; import android.content.Context;
import android.content.Intent; import android.content.Intent;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.os.Build; import android.os.Build;
import android.os.Bundle; import android.os.Bundle;
import android.support.annotation.NonNull; import android.support.annotation.NonNull;
@ -13,6 +15,7 @@ import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar; import android.support.v7.widget.Toolbar;
import android.text.Html; import android.text.Html;
import android.text.Spanned; import android.text.Spanned;
import android.util.Log;
import android.view.Menu; import android.view.Menu;
import android.view.MenuItem; import android.view.MenuItem;
import android.view.View; import android.view.View;
@ -27,6 +30,8 @@ import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestListener; import com.bumptech.glide.request.RequestListener;
import com.bumptech.glide.request.target.Target; import com.bumptech.glide.request.target.Target;
import com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView; import com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView;
import com.kabouzeid.appthemehelper.ATH;
import com.kabouzeid.appthemehelper.util.ATHUtil;
import com.kabouzeid.appthemehelper.util.ColorUtil; import com.kabouzeid.appthemehelper.util.ColorUtil;
import com.kabouzeid.appthemehelper.util.MaterialValueHelper; import com.kabouzeid.appthemehelper.util.MaterialValueHelper;
import com.kabouzeid.gramophone.R; import com.kabouzeid.gramophone.R;
@ -51,6 +56,7 @@ import com.kabouzeid.gramophone.model.Song;
import com.kabouzeid.gramophone.ui.activities.base.AbsSlidingMusicPanelActivity; import com.kabouzeid.gramophone.ui.activities.base.AbsSlidingMusicPanelActivity;
import com.kabouzeid.gramophone.ui.activities.tageditor.AbsTagEditorActivity; import com.kabouzeid.gramophone.ui.activities.tageditor.AbsTagEditorActivity;
import com.kabouzeid.gramophone.ui.activities.tageditor.AlbumTagEditorActivity; import com.kabouzeid.gramophone.ui.activities.tageditor.AlbumTagEditorActivity;
import com.kabouzeid.gramophone.util.MusicUtil;
import com.kabouzeid.gramophone.util.NavigationUtil; import com.kabouzeid.gramophone.util.NavigationUtil;
import com.kabouzeid.gramophone.util.PhonographColorUtil; import com.kabouzeid.gramophone.util.PhonographColorUtil;
import com.kabouzeid.gramophone.util.Util; import com.kabouzeid.gramophone.util.Util;
@ -84,19 +90,33 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
ImageView albumArtImageView; ImageView albumArtImageView;
@BindView(R.id.toolbar) @BindView(R.id.toolbar)
Toolbar toolbar; Toolbar toolbar;
@BindView(R.id.title) @BindView(R.id.header)
TextView albumTitleView; View headerView;
@BindView(R.id.list_background) @BindView(R.id.header_overlay)
View songsBackgroundView; View headerOverlay;
@BindView(R.id.artist_icon)
ImageView artistIconImageView;
@BindView(R.id.duration_icon)
ImageView durationIconImageView;
@BindView(R.id.song_count_icon)
ImageView songCountIconImageView;
@BindView(R.id.album_year_icon)
ImageView albumYearIconImageView;
@BindView(R.id.artist_text)
TextView artistTextView;
@BindView(R.id.duration_text)
TextView durationTextView;
@BindView(R.id.song_count_text)
TextView songCountTextView;
@BindView(R.id.album_year_text)
TextView albumYearTextView;
private AlbumSongAdapter adapter; private AlbumSongAdapter adapter;
private MaterialCab cab; private MaterialCab cab;
private int headerOffset; private int headerViewHeight;
private int titleViewHeight;
private int albumArtViewHeight;
private int toolbarColor; private int toolbarColor;
private float toolbarAlpha;
@Nullable @Nullable
private Spanned wiki; private Spanned wiki;
@ -128,38 +148,21 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
private final SimpleObservableScrollViewCallbacks observableScrollViewCallbacks = new SimpleObservableScrollViewCallbacks() { private final SimpleObservableScrollViewCallbacks observableScrollViewCallbacks = new SimpleObservableScrollViewCallbacks() {
@Override @Override
public void onScrollChanged(int scrollY, boolean b, boolean b2) { public void onScrollChanged(int scrollY, boolean b, boolean b2) {
scrollY += albumArtViewHeight + titleViewHeight; scrollY += headerViewHeight;
float flexibleRange = albumArtViewHeight - headerOffset;
// Translate album cover
albumArtImageView.setTranslationY(Math.max(-albumArtViewHeight, -scrollY / 2));
// Translate list background
songsBackgroundView.setTranslationY(Math.max(0, -scrollY + albumArtViewHeight));
// Change alpha of overlay // Change alpha of overlay
toolbarAlpha = Math.max(0, Math.min(1, (float) scrollY / flexibleRange)); float headerAlpha = Math.max(0, Math.min(1, (float) 2*scrollY/headerViewHeight));
toolbar.setBackgroundColor(ColorUtil.withAlpha(toolbarColor, toolbarAlpha)); headerOverlay.setBackgroundColor(ColorUtil.withAlpha(toolbarColor, headerAlpha));
setStatusbarColor(ColorUtil.withAlpha(toolbarColor, cab != null && cab.isActive() ? 1 : toolbarAlpha));
// Translate name text // Translate name text
int maxTitleTranslationY = albumArtViewHeight; headerView.setTranslationY(Math.max(-scrollY, -headerViewHeight));
int titleTranslationY = maxTitleTranslationY - scrollY; headerOverlay.setTranslationY(Math.max(-scrollY, -headerViewHeight));
titleTranslationY = Math.max(headerOffset, titleTranslationY);
albumTitleView.setTranslationY(titleTranslationY);
} }
}; };
private void setUpObservableListViewParams() { private void setUpObservableListViewParams() {
albumArtViewHeight = getResources().getDimensionPixelSize(R.dimen.header_image_height);
toolbarColor = DialogUtils.resolveColor(this, R.attr.defaultFooterColor); toolbarColor = DialogUtils.resolveColor(this, R.attr.defaultFooterColor);
int toolbarHeight = Util.getActionBarSize(this); headerViewHeight = getResources().getDimensionPixelSize(R.dimen.title_view_height);
titleViewHeight = getResources().getDimensionPixelSize(R.dimen.title_view_height);
headerOffset = toolbarHeight;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
headerOffset += getResources().getDimensionPixelSize(R.dimen.status_bar_padding);
}
} }
private void setUpViews() { private void setUpViews() {
@ -195,11 +198,23 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
private void setColors(int color) { private void setColors(int color) {
toolbarColor = color; toolbarColor = color;
albumTitleView.setBackgroundColor(color); headerView.setBackgroundColor(color);
albumTitleView.setTextColor(MaterialValueHelper.getPrimaryTextColor(this, ColorUtil.isColorLight(color)));
setNavigationbarColor(color); setNavigationbarColor(color);
setTaskDescriptionColor(color); setTaskDescriptionColor(color);
toolbar.setBackgroundColor(color);
setStatusbarColor(color);
int secondaryTextColor = MaterialValueHelper.getSecondaryTextColor(this, ColorUtil.isColorLight(color));
artistIconImageView.setColorFilter(secondaryTextColor, PorterDuff.Mode.SRC_IN);
durationIconImageView.setColorFilter(secondaryTextColor, PorterDuff.Mode.SRC_IN);
songCountIconImageView.setColorFilter(secondaryTextColor, PorterDuff.Mode.SRC_IN);
albumYearIconImageView.setColorFilter(secondaryTextColor, PorterDuff.Mode.SRC_IN);
artistTextView.setTextColor(MaterialValueHelper.getPrimaryTextColor(this, ColorUtil.isColorLight(color)));
durationTextView.setTextColor(secondaryTextColor);
songCountTextView.setTextColor(secondaryTextColor);
albumYearTextView.setTextColor(secondaryTextColor);
} }
@Override @Override
@ -212,8 +227,7 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
recyclerView.setScrollViewCallbacks(observableScrollViewCallbacks); recyclerView.setScrollViewCallbacks(observableScrollViewCallbacks);
final View contentView = getWindow().getDecorView().findViewById(android.R.id.content); final View contentView = getWindow().getDecorView().findViewById(android.R.id.content);
contentView.post(() -> { contentView.post(() -> {
songsBackgroundView.getLayoutParams().height = contentView.getHeight(); observableScrollViewCallbacks.onScrollChanged(-(headerViewHeight), false, false);
observableScrollViewCallbacks.onScrollChanged(-(albumArtViewHeight + titleViewHeight), false, false);
// necessary to fix a bug // necessary to fix a bug
recyclerView.scrollBy(0, 1); recyclerView.scrollBy(0, 1);
recyclerView.scrollBy(0, -1); recyclerView.scrollBy(0, -1);
@ -221,7 +235,7 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
} }
private void setUpRecyclerViewPadding() { private void setUpRecyclerViewPadding() {
recyclerView.setPadding(0, albumArtViewHeight + titleViewHeight, 0, 0); recyclerView.setPadding(0, headerViewHeight, 0, 0);
} }
private void setUpToolBar() { private void setUpToolBar() {
@ -377,7 +391,6 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
.start(new MaterialCab.Callback() { .start(new MaterialCab.Callback() {
@Override @Override
public boolean onCabCreated(MaterialCab materialCab, Menu menu) { public boolean onCabCreated(MaterialCab materialCab, Menu menu) {
setStatusbarColor(ColorUtil.stripAlpha(toolbarColor));
return callback.onCabCreated(materialCab, menu); return callback.onCabCreated(materialCab, menu);
} }
@ -388,7 +401,6 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
@Override @Override
public boolean onCabFinished(MaterialCab materialCab) { public boolean onCabFinished(MaterialCab materialCab) {
setStatusbarColor(ColorUtil.withAlpha(toolbarColor, toolbarAlpha));
return callback.onCabFinished(materialCab); return callback.onCabFinished(materialCab);
} }
}); });
@ -424,7 +436,12 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
loadWiki(); loadWiki();
} }
albumTitleView.setText(album.getTitle()); getSupportActionBar().setTitle(album.getTitle());
artistTextView.setText(album.getArtistName());
durationTextView.setText(MusicUtil.getReadableDurationString(MusicUtil.getTotalDuration(this, album.songs)));
songCountTextView.setText(String.valueOf(album.getSongCount()));
albumYearTextView.setText(String.valueOf(album.getYear()));
adapter.swapDataSet(album.songs); adapter.swapDataSet(album.songs);
} }

7
app/src/main/java/com/kabouzeid/gramophone/util/MusicUtil.java
View file

@ -126,13 +126,16 @@ public class MusicUtil {
public static String getPlaylistInfoString(@NonNull final Context context, @NonNull List<Song> songs) { public static String getPlaylistInfoString(@NonNull final Context context, @NonNull List<Song> songs) {
final int songCount = songs.size(); final int songCount = songs.size();
final String songString = songCount == 1 ? context.getResources().getString(R.string.song) : context.getResources().getString(R.string.songs); final String songString = songCount == 1 ? context.getResources().getString(R.string.song) : context.getResources().getString(R.string.songs);
final long duration = getTotalDuration(context, songs);
return songCount + " " + songString + " • " + MusicUtil.getReadableDurationString(duration);
}
public static long getTotalDuration(@NonNull final Context context, @NonNull List<Song> songs) {
long duration = 0; long duration = 0;
for (int i = 0; i < songs.size(); i++) { for (int i = 0; i < songs.size(); i++) {
duration += songs.get(i).duration; duration += songs.get(i).duration;
} }
return duration;
return songCount + " " + songString + " • " + MusicUtil.getReadableDurationString(duration);
} }
public static String getReadableDurationString(long songDurationMillis) { public static String getReadableDurationString(long songDurationMillis) {

234
app/src/main/res/layout/activity_album_detail.xml
View file

@ -1,60 +1,10 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent"> android:layout_height="match_parent">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="@dimen/header_image_height"
android:scaleType="centerCrop"
android:src="@drawable/default_album_art"
android:transitionName="@string/transition_album_art"
tools:ignore="ContentDescription,UnusedAttribute" />
<View
android:id="@+id/list_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground" />
<com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:divider="@null"
android:dividerHeight="0dp"
android:scrollbars="none" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="@dimen/title_view_height"
android:height="@dimen/title_view_height"
android:background="?attr/defaultFooterColor"
android:elevation="@dimen/toolbar_elevation"
android:fontFamily="sans-serif-medium"
android:gravity="center_vertical"
android:paddingLeft="72dp"
android:paddingRight="72dp"
android:singleLine="true"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
tools:ignore="UnusedAttribute" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent" />
</LinearLayout>
<include layout="@layout/shadow_statusbar_toolbar" /> <include layout="@layout/shadow_statusbar_toolbar" />
<LinearLayout <LinearLayout
@ -82,6 +32,188 @@
</FrameLayout> </FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:divider="@null"
android:dividerHeight="0dp"
android:scrollbars="none" />
<View
android:id="@+id/header_overlay"
android:elevation="@dimen/toolbar_elevation"
android:layout_width="match_parent"
android:layout_height="@dimen/title_view_height" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="@dimen/title_view_height"
android:background="?attr/defaultFooterColor"
android:elevation="@dimen/toolbar_elevation"
android:orientation="horizontal"
tools:ignore="UnusedAttribute">
<ImageView
android:id="@+id/image"
android:layout_width="144dp"
android:layout_height="144dp"
android:layout_margin="16dp"
android:scaleType="centerCrop"
android:src="@drawable/default_album_art"
android:transitionName="@string/transition_album_art"
tools:ignore="ContentDescription,UnusedAttribute" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingEnd="16dp"
android:paddingLeft="0dp"
android:paddingRight="16dp"
android:paddingStart="0dp">
<ImageView
android:id="@+id/artist_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="8dp"
android:layout_marginStart="0dp"
app:srcCompat="@drawable/ic_person_white_24dp"
tools:ignore="ContentDescription,UnusedAttribute" />
<TextView
android:id="@+id/artist_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.AppCompat.Subhead" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingEnd="16dp"
android:paddingLeft="0dp"
android:paddingRight="16dp"
android:paddingStart="0dp">
<ImageView
android:id="@+id/duration_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="8dp"
android:layout_marginStart="0dp"
app:srcCompat="@drawable/ic_access_time_white_24dp"
tools:ignore="ContentDescription,UnusedAttribute" />
<TextView
android:id="@+id/duration_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingEnd="16dp"
android:paddingLeft="0dp"
android:paddingRight="16dp"
android:paddingStart="0dp">
<ImageView
android:id="@+id/song_count_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="8dp"
android:layout_marginStart="0dp"
app:srcCompat="@drawable/ic_music_note_white_24dp"
tools:ignore="ContentDescription,UnusedAttribute" />
<TextView
android:id="@+id/song_count_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingEnd="16dp"
android:paddingLeft="0dp"
android:paddingRight="16dp"
android:paddingStart="0dp">
<ImageView
android:id="@+id/album_year_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="8dp"
android:layout_marginStart="0dp"
app:srcCompat="@drawable/ic_event_white_24dp"
tools:ignore="ContentDescription,UnusedAttribute" />
<TextView
android:id="@+id/album_year_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent" />
</LinearLayout>
</FrameLayout>
</LinearLayout> </LinearLayout>
</FrameLayout> </FrameLayout>

2
app/src/main/res/values-land/dimens.xml
View file

@ -1,5 +1,5 @@
<resources> <resources>
<dimen name="title_view_height">56dp</dimen> <dimen name="title_view_height">0dp</dimen>
<dimen name="header_image_height">180dp</dimen> <dimen name="header_image_height">180dp</dimen>

2
app/src/main/res/values/dimens.xml
View file

@ -2,7 +2,7 @@
<dimen name="default_item_margin">16dp</dimen> <dimen name="default_item_margin">16dp</dimen>
<dimen name="title_view_height">72dp</dimen> <dimen name="title_view_height">176dp</dimen>
<dimen name="toolbar_elevation">4dp</dimen> <dimen name="toolbar_elevation">4dp</dimen>
<dimen name="card_elevation">2dp</dimen> <dimen name="card_elevation">2dp</dimen>