Add cover image and backdrop integration

This commit is contained in:
Antonio Cappiello 2020-11-26 16:05:58 +01:00
parent 6c26c6d889
commit a0f417fa94
50 changed files with 385 additions and 204 deletions

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/cardColor" />
<corners android:radius="4dp" />
<corners android:radius="0dp" />
</shape>

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#00000000"
android:endColor="#FF000000"
android:angle="180"
android:dither="true" />
</shape>

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#00000000"
android:endColor="#FF000000"
android:angle="270"
android:dither="true" />
</shape>

View file

@ -12,6 +12,7 @@
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_graph" />

View file

@ -28,12 +28,26 @@
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/album_back_cover_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradient_background_image" />
<TextView
android:id="@+id/album_title_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/open_sans_font_family"
android:textColor="@color/titleTextColor"
android:textColor="@android:color/white"
android:textSize="40sp"
android:textStyle="bold"
android:textAlignment="center"

View file

@ -28,12 +28,26 @@
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/artist_backdrop_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradient_background_image" />
<TextView
android:id="@+id/artist_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/open_sans_font_family"
android:textColor="@color/titleTextColor"
android:textColor="@android:color/white"
android:textSize="40sp"
android:textStyle="bold"
android:textAlignment="center"

View file

@ -3,7 +3,8 @@
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="match_parent"
android:paddingTop="20dp">
<ProgressBar
android:id="@+id/loading_progress_bar"

View file

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="match_parent"
android:paddingTop="20dp">
<ProgressBar
android:id="@+id/loading_progress_bar"

View file

@ -3,7 +3,8 @@
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior">
app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
android:paddingTop="20dp">
<LinearLayout
android:layout_width="match_parent"

View file

@ -4,7 +4,8 @@
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior">
app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
android:paddingTop="20dp">
<LinearLayout
android:layout_width="match_parent"
@ -166,7 +167,7 @@
android:paddingStart="8dp"
android:paddingTop="12dp"
android:paddingEnd="8dp"
android:text="My Genres"
android:text="Music By Genre"
android:textColor="@color/titleTextColor"
android:textSize="22sp"
android:textStyle="bold" />

View file

@ -5,7 +5,8 @@
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
android:orientation="vertical"
android:paddingTop="20dp">
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

View file

@ -2,7 +2,8 @@
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="match_parent"
android:paddingTop="20dp">
<com.paulrybitskyi.persistentsearchview.PersistentSearchView
android:id="@+id/persistentSearchView"

View file

@ -2,5 +2,6 @@
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="match_parent"
android:paddingTop="20dp">
</RelativeLayout>

View file

@ -2,7 +2,8 @@
<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_height="wrap_content"
android:paddingTop="20dp">
<LinearLayout
android:layout_width="match_parent"

View file

@ -2,7 +2,8 @@
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="match_parent"
android:paddingTop="20dp">
<ProgressBar
android:id="@+id/loading_progress_bar"

View file

@ -7,25 +7,32 @@
<androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="256dp"
android:layout_height="256dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:backgroundTint="@color/cardColor"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true" />
card_view:cardUseCompatPadding="true">
<ImageView
android:id="@+id/artist_page_album_cover_image_view"
android:layout_width="256dp"
android:layout_height="256dp" />
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/album_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/open_sans_font_family"
android:maxWidth="172dp"
android:maxLines="2"
android:paddingStart="2dp"
android:paddingTop="8dp"
android:singleLine="false"
android:text="@string/label_placeholder"
android:textColor="@color/titleTextColor"
android:textSize="16sp"
android:textStyle="bold" />

View file

@ -3,12 +3,22 @@
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="@color/cardColor"
app:cardCornerRadius="4dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp">
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:backgroundTint="@color/cardColor"
app:cardCornerRadius="4dp">
<ImageView
android:id="@+id/discover_song_cover_image_view"
android:layout_width="match_parent"
android:layout_height="172dp" />
<View
android:layout_width="match_parent"
android:layout_height="172dp"
android:background="@drawable/discover_background_image" />
<RelativeLayout
android:layout_width="match_parent"
@ -21,8 +31,9 @@
android:layout_marginLeft="16dp"
android:layout_marginTop="18dp"
android:layout_marginRight="16dp"
android:text="@string/label_placeholder"
android:textColor="@color/titleTextColor"
android:ellipsize="end"
android:maxLines="2"
android:textColor="@color/gradientTitleColor"
android:textSize="20sp" />
<TextView
@ -34,9 +45,8 @@
android:layout_marginRight="16dp"
android:drawablePadding="10dp"
android:ellipsize="end"
android:maxLines="3"
android:text="@string/label_placeholder"
android:textColor="@color/subtitleTextColor"
android:maxLines="1"
android:textColor="@color/gradientSubtitleColor"
android:textSize="14sp" />
</RelativeLayout>

View file

@ -7,21 +7,29 @@
<androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="172dp"
android:layout_height="172dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:backgroundTint="@color/cardColor"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true" />
card_view:cardUseCompatPadding="true">
<ImageView
android:id="@+id/track_cover_image_view"
android:layout_width="172dp"
android:layout_height="172dp" />
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/title_track_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/open_sans_font_family"
android:maxWidth="172dp"
android:maxLines="2"
android:paddingStart="2dp"
android:paddingTop="8dp"
android:singleLine="false"
@ -33,7 +41,9 @@
android:id="@+id/album_track_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/open_sans_font_family"
android:maxLines="1"
android:paddingStart="2dp"
android:textColor="@color/titleTextColor"
android:textSize="12sp" />

View file

@ -7,25 +7,32 @@
<androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="172dp"
android:layout_height="172dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:backgroundTint="@color/cardColor"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true" />
card_view:cardUseCompatPadding="true">
<ImageView
android:id="@+id/album_cover_image_view"
android:layout_width="172dp"
android:layout_height="172dp" />
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/album_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/open_sans_font_family"
android:maxWidth="172dp"
android:maxLines="2"
android:paddingStart="2dp"
android:paddingTop="8dp"
android:singleLine="false"
android:text="@string/label_placeholder"
android:textColor="@color/titleTextColor"
android:textSize="14sp"
android:textStyle="bold" />
@ -34,11 +41,12 @@
android:id="@+id/artist_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/open_sans_font_family"
android:maxWidth="172dp"
android:maxLines="1"
android:paddingStart="2dp"
android:singleLine="false"
android:text="@string/label_placeholder"
android:textColor="@color/titleTextColor"
android:textSize="12sp" />
</LinearLayout>

View file

@ -1,31 +1,39 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingEnd="8dp">
<androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
<androidx.cardview.widget.CardView
android:id="@+id/card_view"
android:layout_width="172dp"
android:layout_height="172dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:backgroundTint="@color/cardColor"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true" />
card_view:cardUseCompatPadding="true">
<ImageView
android:id="@+id/artist_cover_image_view"
android:layout_width="172dp"
android:layout_height="172dp" />
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/artist_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/open_sans_font_family"
android:maxWidth="172dp"
android:maxLines="1"
android:paddingStart="2dp"
android:paddingTop="8dp"
android:singleLine="false"
android:text="@string/label_placeholder"
android:textColor="@color/titleTextColor"
android:textSize="14sp"
android:textStyle="bold" />

View file

@ -17,17 +17,24 @@
card_view:cardCornerRadius="4dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true" />
card_view:cardUseCompatPadding="true">
<ImageView
android:id="@+id/album_catalogue_cover_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/album_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/open_sans_font_family"
android:maxWidth="172dp"
android:maxLines="2"
android:paddingStart="2dp"
android:singleLine="false"
android:text="@string/label_placeholder"
android:textColor="@color/titleTextColor"
android:textSize="14sp"
android:textStyle="bold"
@ -38,12 +45,13 @@
android:id="@+id/artist_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/open_sans_font_family"
android:maxWidth="172dp"
android:maxLines="1"
android:paddingStart="2dp"
android:paddingBottom="16dp"
android:singleLine="false"
android:text="@string/label_placeholder"
android:textColor="@color/subtitleTextColor"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"

View file

@ -17,18 +17,25 @@
card_view:cardCornerRadius="4dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true" />
card_view:cardUseCompatPadding="true">
<ImageView
android:id="@+id/artist_catalogue_cover_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/artist_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/open_sans_font_family"
android:maxWidth="172dp"
android:maxLines="2"
android:paddingStart="2dp"
android:paddingBottom="16dp"
android:singleLine="false"
android:text="@string/label_placeholder"
android:textColor="@color/titleTextColor"
android:textSize="14sp"
android:textStyle="bold"

View file

@ -1,68 +0,0 @@
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
android:orientation="horizontal"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingEnd="4dp">
<androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/imageView"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_gravity="center"
android:backgroundTint="@color/cardColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="@color/subtitleTextColor"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="false"/>
<TextView
android:id="@+id/song_title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/open_sans_font_family"
android:paddingStart="12dp"
android:paddingTop="4dp"
android:text="@string/label_placeholder"
android:textColor="@color/titleTextColor"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/song_album_text_view"/>
<TextView
android:id="@+id/song_album_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/open_sans_font_family"
android:paddingStart="12dp"
android:paddingBottom="4dp"
android:text="@string/label_placeholder"
android:textColor="@color/subtitleTextColor"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/song_title_text_view" />
<TextView
android:id="@+id/song_duration_text_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fontFamily="@font/open_sans_font_family"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:text="@string/label_placeholder"
android:textColor="@color/subtitleTextColor"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -1,5 +1,6 @@
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
@ -7,10 +8,10 @@
android:paddingEnd="4dp"
android:paddingBottom="2dp">
<androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
<androidx.cardview.widget.CardView
android:id="@+id/imageView"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="2dp"
android:backgroundTint="@color/cardColor"
@ -21,7 +22,13 @@
card_view:cardCornerRadius="4dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="false" />
card_view:cardUseCompatPadding="false">
<ImageView
android:id="@+id/song_cover_image_view"
android:layout_width="48dp"
android:layout_height="48dp" />
</androidx.cardview.widget.CardView>
<LinearLayout
android:layout_width="wrap_content"

View file

@ -6,7 +6,7 @@
<item name="colorAccent">@color/colorAccent</item>
<item name="colorControlNormal">@color/colorPrimary</item>
<item name="android:statusBarColor">@color/colorPrimary</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">@color/colorPrimary</item>
<item name="android:windowLightStatusBar">false</item>

View file

@ -5,7 +5,7 @@
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:statusBarColor">@color/colorPrimary</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>

View file

@ -6,7 +6,7 @@
<item name="colorAccent">@color/colorAccent</item>
<item name="colorControlNormal">@color/colorPrimary</item>
<item name="android:statusBarColor">@color/colorPrimary</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">@color/colorPrimary</item>
<item name="android:windowLightStatusBar">true</item>

View file

@ -5,12 +5,14 @@
<color name="colorAccent">#3700B3</color>
<color name="colorAccentLight">#733ae6</color>
<color name="gradientTitleColor">#FFFFFF</color>
<color name="gradientSubtitleColor">#BFBFBF</color>
<!-- Ui color -->
<color name="statusBarColor">#FFFFFF</color>
<color name="navigationBarColor">#FFFFFF</color>
<color name="navigationDrawerColor">#FFFFFF</color>
<color name="cardColor">#FFFFFF</color>
<color name="titleTextColor">#252525</color>

View file

@ -5,14 +5,11 @@
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:statusBarColor">@color/colorPrimary</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">false</item>
<!-- <item name="android:dialogTheme">@style/AppTheme.Dialog</item>-->
<!-- <item name="android:alertDialogTheme">@style/AppTheme.Dialog</item>-->
<item name="dialogTheme">@style/AppTheme.Dialog</item>
<item name="alertDialogTheme">@style/AppTheme.Dialog</item>
</style>