Redesigned album detail page

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

View file

@ -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>

View file

@ -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>

View file

@ -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>