Redesigned album detail page
This commit is contained in:
Karim Abou Zeid
parent
d3928d9249
commit
698fec921f
5 changed files with 246 additions and 94 deletions
|
|
@ -2,6 +2,8 @@ package com.kabouzeid.gramophone.ui.activities;
|
|||
|
||||
import android.content.Context;
|
||||
import android.content.Intent;
|
||||
import android.graphics.Color;
|
||||
import android.graphics.PorterDuff;
|
||||
import android.os.Build;
|
||||
import android.os.Bundle;
|
||||
import android.support.annotation.NonNull;
|
||||
|
|
@ -13,6 +15,7 @@ import android.support.v7.widget.RecyclerView;
|
|||
import android.support.v7.widget.Toolbar;
|
||||
import android.text.Html;
|
||||
import android.text.Spanned;
|
||||
import android.util.Log;
|
||||
import android.view.Menu;
|
||||
import android.view.MenuItem;
|
||||
import android.view.View;
|
||||
|
|
@ -27,6 +30,8 @@ import com.bumptech.glide.Glide;
|
|||
import com.bumptech.glide.request.RequestListener;
|
||||
import com.bumptech.glide.request.target.Target;
|
||||
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.MaterialValueHelper;
|
||||
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.tageditor.AbsTagEditorActivity;
|
||||
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.PhonographColorUtil;
|
||||
import com.kabouzeid.gramophone.util.Util;
|
||||
|
|
@ -84,19 +90,33 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
|
|||
ImageView albumArtImageView;
|
||||
@BindView(R.id.toolbar)
|
||||
Toolbar toolbar;
|
||||
@BindView(R.id.title)
|
||||
TextView albumTitleView;
|
||||
@BindView(R.id.list_background)
|
||||
View songsBackgroundView;
|
||||
@BindView(R.id.header)
|
||||
View headerView;
|
||||
@BindView(R.id.header_overlay)
|
||||
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 MaterialCab cab;
|
||||
private int headerOffset;
|
||||
private int titleViewHeight;
|
||||
private int albumArtViewHeight;
|
||||
private int headerViewHeight;
|
||||
private int toolbarColor;
|
||||
private float toolbarAlpha;
|
||||
|
||||
@Nullable
|
||||
private Spanned wiki;
|
||||
|
|
@ -128,38 +148,21 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
|
|||
private final SimpleObservableScrollViewCallbacks observableScrollViewCallbacks = new SimpleObservableScrollViewCallbacks() {
|
||||
@Override
|
||||
public void onScrollChanged(int scrollY, boolean b, boolean b2) {
|
||||
scrollY += albumArtViewHeight + titleViewHeight;
|
||||
float flexibleRange = albumArtViewHeight - headerOffset;
|
||||
|
||||
// Translate album cover
|
||||
albumArtImageView.setTranslationY(Math.max(-albumArtViewHeight, -scrollY / 2));
|
||||
|
||||
// Translate list background
|
||||
songsBackgroundView.setTranslationY(Math.max(0, -scrollY + albumArtViewHeight));
|
||||
scrollY += headerViewHeight;
|
||||
|
||||
// Change alpha of overlay
|
||||
toolbarAlpha = Math.max(0, Math.min(1, (float) scrollY / flexibleRange));
|
||||
toolbar.setBackgroundColor(ColorUtil.withAlpha(toolbarColor, toolbarAlpha));
|
||||
setStatusbarColor(ColorUtil.withAlpha(toolbarColor, cab != null && cab.isActive() ? 1 : toolbarAlpha));
|
||||
float headerAlpha = Math.max(0, Math.min(1, (float) 2*scrollY/headerViewHeight));
|
||||
headerOverlay.setBackgroundColor(ColorUtil.withAlpha(toolbarColor, headerAlpha));
|
||||
|
||||
// Translate name text
|
||||
int maxTitleTranslationY = albumArtViewHeight;
|
||||
int titleTranslationY = maxTitleTranslationY - scrollY;
|
||||
titleTranslationY = Math.max(headerOffset, titleTranslationY);
|
||||
|
||||
albumTitleView.setTranslationY(titleTranslationY);
|
||||
headerView.setTranslationY(Math.max(-scrollY, -headerViewHeight));
|
||||
headerOverlay.setTranslationY(Math.max(-scrollY, -headerViewHeight));
|
||||
}
|
||||
};
|
||||
|
||||
private void setUpObservableListViewParams() {
|
||||
albumArtViewHeight = getResources().getDimensionPixelSize(R.dimen.header_image_height);
|
||||
toolbarColor = DialogUtils.resolveColor(this, R.attr.defaultFooterColor);
|
||||
int toolbarHeight = Util.getActionBarSize(this);
|
||||
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);
|
||||
}
|
||||
headerViewHeight = getResources().getDimensionPixelSize(R.dimen.title_view_height);
|
||||
}
|
||||
|
||||
private void setUpViews() {
|
||||
|
|
@ -195,11 +198,23 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
|
|||
|
||||
private void setColors(int color) {
|
||||
toolbarColor = color;
|
||||
albumTitleView.setBackgroundColor(color);
|
||||
albumTitleView.setTextColor(MaterialValueHelper.getPrimaryTextColor(this, ColorUtil.isColorLight(color)));
|
||||
headerView.setBackgroundColor(color);
|
||||
|
||||
setNavigationbarColor(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
|
||||
|
|
@ -212,8 +227,7 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
|
|||
recyclerView.setScrollViewCallbacks(observableScrollViewCallbacks);
|
||||
final View contentView = getWindow().getDecorView().findViewById(android.R.id.content);
|
||||
contentView.post(() -> {
|
||||
songsBackgroundView.getLayoutParams().height = contentView.getHeight();
|
||||
observableScrollViewCallbacks.onScrollChanged(-(albumArtViewHeight + titleViewHeight), false, false);
|
||||
observableScrollViewCallbacks.onScrollChanged(-(headerViewHeight), false, false);
|
||||
// necessary to fix a bug
|
||||
recyclerView.scrollBy(0, 1);
|
||||
recyclerView.scrollBy(0, -1);
|
||||
|
|
@ -221,7 +235,7 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
|
|||
}
|
||||
|
||||
private void setUpRecyclerViewPadding() {
|
||||
recyclerView.setPadding(0, albumArtViewHeight + titleViewHeight, 0, 0);
|
||||
recyclerView.setPadding(0, headerViewHeight, 0, 0);
|
||||
}
|
||||
|
||||
private void setUpToolBar() {
|
||||
|
|
@ -377,7 +391,6 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
|
|||
.start(new MaterialCab.Callback() {
|
||||
@Override
|
||||
public boolean onCabCreated(MaterialCab materialCab, Menu menu) {
|
||||
setStatusbarColor(ColorUtil.stripAlpha(toolbarColor));
|
||||
return callback.onCabCreated(materialCab, menu);
|
||||
}
|
||||
|
||||
|
|
@ -388,7 +401,6 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
|
|||
|
||||
@Override
|
||||
public boolean onCabFinished(MaterialCab materialCab) {
|
||||
setStatusbarColor(ColorUtil.withAlpha(toolbarColor, toolbarAlpha));
|
||||
return callback.onCabFinished(materialCab);
|
||||
}
|
||||
});
|
||||
|
|
@ -424,7 +436,12 @@ public class AlbumDetailActivity extends AbsSlidingMusicPanelActivity implements
|
|||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -126,13 +126,16 @@ public class MusicUtil {
|
|||
public static String getPlaylistInfoString(@NonNull final Context context, @NonNull List<Song> songs) {
|
||||
final int songCount = songs.size();
|
||||
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;
|
||||
for (int i = 0; i < songs.size(); i++) {
|
||||
duration += songs.get(i).duration;
|
||||
}
|
||||
|
||||
return songCount + " " + songString + " • " + MusicUtil.getReadableDurationString(duration);
|
||||
return duration;
|
||||
}
|
||||
|
||||
public static String getReadableDurationString(long songDurationMillis) {
|
||||
|
|
|
|||
|
|
@ -1,60 +1,10 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<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"
|
||||
android:layout_width="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" />
|
||||
|
||||
<LinearLayout
|
||||
|
|
@ -82,6 +32,188 @@
|
|||
|
||||
</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>
|
||||
|
||||
</FrameLayout>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<resources>
|
||||
<dimen name="title_view_height">56dp</dimen>
|
||||
<dimen name="title_view_height">0dp</dimen>
|
||||
|
||||
<dimen name="header_image_height">180dp</dimen>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<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="card_elevation">2dp</dimen>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue