improved ui for lyrics screen

app/src/main/java/code/name/monkey/retromusic/ui/activities/LyricsActivity.java

@@ -3,6 +3,7 @@ package code.name.monkey.retromusic.ui.activities;
 import android.annotation.SuppressLint;
 import android.content.res.ColorStateList;
 import android.graphics.Color;
+import android.graphics.PorterDuff;
 import android.os.AsyncTask;
 import android.os.Bundle;
 import android.text.InputType;
@@ -17,6 +18,8 @@ import android.widget.TextView;
 import com.afollestad.materialdialogs.DialogAction;
 import com.afollestad.materialdialogs.MaterialDialog;
 import com.bumptech.glide.Glide;
+import com.google.android.material.bottomappbar.BottomAppBar;
+import com.google.android.material.floatingactionbutton.FloatingActionButton;
 
 import org.jaudiotagger.tag.FieldKey;
 
@@ -24,6 +27,7 @@ import java.io.File;
 import java.util.ArrayList;
 import java.util.EnumMap;
 import java.util.Map;
+import java.util.Objects;
 
 import androidx.annotation.NonNull;
 import androidx.core.content.ContextCompat;
@@ -31,6 +35,7 @@ import butterknife.BindView;
 import butterknife.ButterKnife;
 import butterknife.OnClick;
 import code.name.monkey.appthemehelper.ThemeStore;
+import code.name.monkey.appthemehelper.util.TintHelper;
 import code.name.monkey.retromusic.R;
 import code.name.monkey.retromusic.glide.RetroMusicColoredTarget;
 import code.name.monkey.retromusic.glide.SongGlideRequest;
@@ -44,17 +49,15 @@ import code.name.monkey.retromusic.util.LyricUtil;
 import code.name.monkey.retromusic.util.MusicUtil;
 import code.name.monkey.retromusic.util.PreferenceUtil;
 import code.name.monkey.retromusic.util.RetroUtil;
+import code.name.monkey.retromusic.views.FitSystemWindowsLayout;
 import code.name.monkey.retromusic.views.LyricView;
 import io.reactivex.disposables.CompositeDisposable;
 
 public class LyricsActivity extends AbsMusicServiceActivity implements
         MusicProgressViewUpdateHelper.Callback {
 
-    @BindView(R.id.title)
+    @BindView(R.id.bottom_app_bar)
-    TextView songTitle;
+    BottomAppBar bottomAppBar;
-
-    @BindView(R.id.text)
-    TextView songText;
 
     @BindView(R.id.lyrics_view)
     LyricView lyricView;
@@ -65,8 +68,12 @@ public class LyricsActivity extends AbsMusicServiceActivity implements
     @BindView(R.id.actions)
     RadioGroup actionsLayout;
 
-    @BindView(R.id.gradient_background)
+
-    View background;
+    @BindView(R.id.fab)
+    FloatingActionButton actionButton;
+
+    @BindView(R.id.container)
+    FitSystemWindowsLayout fitSystemWindowsLayout;
 
     private MusicProgressViewUpdateHelper updateHelper;
     private AsyncTask updateLyricsAsyncTask;
@@ -76,14 +83,24 @@ public class LyricsActivity extends AbsMusicServiceActivity implements
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
+        setDrawUnderStatusBar();
+        setDrawUnderNavigationBar();
         super.onCreate(savedInstanceState);
+
         setContentView(R.layout.activity_lyrics);
         ButterKnife.bind(this);
 
-        setStatusbarColorAuto();
-        setNavigationbarColorAuto();
         setTaskDescriptionColorAuto();
-        setLightNavigationBar(true);
+        setNavigationbarColorAuto();
+
+        fitSystemWindowsLayout.setFit(true);
+
+        setSupportActionBar(bottomAppBar);
+        Objects.requireNonNull(bottomAppBar.getNavigationIcon())
+                .setColorFilter(ThemeStore.textColorPrimary(this), PorterDuff.Mode.SRC_IN);
+        bottomAppBar.setBackgroundTint(ColorStateList.valueOf(ThemeStore.primaryColor(this)));
+
+        TintHelper.setTintAuto(actionButton, ThemeStore.accentColor(this), true);
 
         updateHelper = new MusicProgressViewUpdateHelper(this, 500, 1000);
 
@@ -99,8 +116,8 @@ public class LyricsActivity extends AbsMusicServiceActivity implements
         PreferenceUtil.getInstance().setLastLyricsType(group);
         RadioButton radioButton = actionsLayout.findViewById(group);
         if (radioButton != null) {
-            radioButton.setBackgroundTintList(ColorStateList.valueOf(ThemeStore.accentColor(this)));
+            radioButton.setBackgroundTintList(ColorStateList.valueOf(Color.WHITE));
-            radioButton.setTextColor(ThemeStore.textColorPrimary(this));
+            //radioButton.setTextColor(ThemeStore.textColorPrimary(this));
         }
 
         offlineLyrics.setVisibility(View.GONE);
@@ -189,8 +206,8 @@ public class LyricsActivity extends AbsMusicServiceActivity implements
 
     private void loadLrcFile() {
         song = MusicPlayerRemote.getCurrentSong();
-        songTitle.setText(song.title);
+        bottomAppBar.setTitle(song.title);
-        songText.setText(song.artistName);
+        bottomAppBar.setSubtitle(song.artistName);
         SongGlideRequest.Builder.from(Glide.with(this), song)
                 .checkIgnoreMediaStore(this)
                 .generatePalette(this)
@@ -199,7 +216,7 @@ public class LyricsActivity extends AbsMusicServiceActivity implements
                     @Override
                     public void onColorReady(int color) {
                         if (PreferenceUtil.getInstance().getAdaptiveColor()) {
-                            background.setBackgroundColor(color);
+                            //background.setBackgroundColor(color);
                         }
                     }
                 });
@@ -213,13 +230,13 @@ public class LyricsActivity extends AbsMusicServiceActivity implements
         }
     }
 
-    @OnClick({R.id.edit_lyrics, R.id.back})
+    @OnClick({R.id.fab})
     public void onViewClicked(View view) {
         switch (view.getId()) {
             case R.id.back:
                 onBackPressed();
                 break;
-            case R.id.edit_lyrics:
+            case R.id.fab:
                 switch (actionsLayout.getCheckedRadioButtonId()) {
                     case R.id.synced_lyrics:
                         showSyncedLyrics();

app/src/main/res/layout/activity_lyrics.xml

@@ -1,106 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout 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"
-  android:id="@+id/root"
-  android:layout_width="match_parent"
-  android:layout_height="match_parent"
-  android:orientation="vertical">
-
-  <LinearLayout
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:gravity="center_vertical">
-
-    <code.name.monkey.retromusic.views.IconImageView
-      android:id="@+id/back"
-      android:layout_width="wrap_content"
-      android:layout_height="wrap_content"
-      android:layout_weight="0"
-      android:padding="12dp"
-      android:src="@drawable/ic_keyboard_backspace_black_24dp"/>
-
-    <LinearLayout
-      android:layout_width="match_parent"
-      android:layout_height="wrap_content"
-      android:layout_weight="1"
-      android:paddingStart="12dp"
-      android:paddingEnd="0dp"
-      android:orientation="vertical">
-
-      <code.name.monkey.appthemehelper.common.views.ATEPrimaryTextView
-        android:id="@+id/title"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:ellipsize="end"
-        android:maxLines="1"
-        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"/>
-
-      <code.name.monkey.appthemehelper.common.views.ATESecondaryTextView
-        android:id="@+id/text"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:ellipsize="end"
-        android:maxLines="1"
-        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
-    </LinearLayout>
-
-    <code.name.monkey.retromusic.views.IconImageView
-      android:id="@+id/edit_lyrics"
-      android:layout_width="wrap_content"
-      android:layout_height="wrap_content"
-      android:layout_weight="0"
-      android:padding="12dp"
-      android:background="?roundSelector"
-      app:srcCompat="@drawable/ic_edit_white_24dp"/>
-  </LinearLayout>
-
-  <RadioGroup
-    android:id="@+id/actions"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:layout_weight="0"
-    android:paddingStart="12dp"
-    android:paddingEnd="12dp"
-    android:orientation="horizontal">
-
-    <RadioButton
-      android:id="@+id/synced_lyrics"
-      android:layout_width="wrap_content"
-      android:layout_height="wrap_content"
-      android:layout_weight="1"
-      android:layout_margin="4dp"
-      android:padding="8dp"
-      android:background="@drawable/toggle_outline_buttons"
-      android:button="@null"
-      android:gravity="center"
-      android:text="@string/synced_lyrics"
-      android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption"/>
-
-    <RadioButton
-      android:id="@+id/normal_lyrics"
-      android:layout_width="wrap_content"
-      android:layout_height="wrap_content"
-      android:layout_weight="1"
-      android:layout_margin="4dp"
-      android:padding="8dp"
-      android:background="@drawable/toggle_outline_buttons"
-      android:button="@null"
-      android:gravity="center"
-      android:text="@string/normal_lyrics"
-      android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption"/>
-
-  </RadioGroup>
-
-  <com.google.android.material.card.MaterialCardView
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:layout_weight="1"
-    app:cardCornerRadius="8dp"
-    app:cardElevation="8dp"
-    app:cardUseCompatPadding="true">
-
-    <FrameLayout
-      android:id="@+id/gradient_background"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
@@ -108,13 +8,97 @@
         android:id="@+id/image"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:tint="#80000000"
+        android:scaleType="centerCrop"
-        android:scaleType="centerCrop"/>
+        android:tint="#80000000" />
+
+    <code.name.monkey.retromusic.views.FitSystemWindowsLayout
+        android:id="@+id/container"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+        <androidx.coordinatorlayout.widget.CoordinatorLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+
+
+            <com.google.android.material.bottomappbar.BottomAppBar
+                android:id="@+id/bottom_app_bar"
+                style="@style/Widget.MaterialComponents.BottomAppBar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_gravity="bottom"
+                android:elevation="8dp"
+                app:backgroundTint="@color/md_red_500"
+                app:contentInsetLeft="0dp"
+                app:fabAlignmentMode="end"
+                app:fabCradleRoundedCornerRadius="8dp"
+                app:navigationIcon="@drawable/ic_keyboard_backspace_black_24dp"
+                app:title="@string/lyrics"
+                app:titleMargin="0dp"
+                app:titleMarginStart="0dp" />
+
+            <com.google.android.material.floatingactionbutton.FloatingActionButton
+                android:id="@+id/fab"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/ic_edit_white_24dp"
+                app:layout_anchor="@id/bottom_app_bar" />
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:orientation="vertical"
+                android:paddingBottom="52dp"
+                app:layout_behavior="@string/appbar_scrolling_view_behavior">
+
+                <RadioGroup
+                    android:id="@+id/actions"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="0"
+                    android:orientation="horizontal"
+                    android:paddingStart="12dp"
+                    android:paddingEnd="12dp">
+
+                    <RadioButton
+                        android:id="@+id/synced_lyrics"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_margin="4dp"
+                        android:layout_weight="1"
+                        android:background="@drawable/toggle_outline_buttons"
+                        android:button="@null"
+                        android:gravity="center"
+                        android:padding="12dp"
+                        android:text="@string/synced_lyrics"
+                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption"
+                        android:textColor="@color/md_white_1000" />
+
+                    <RadioButton
+                        android:id="@+id/normal_lyrics"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_margin="4dp"
+                        android:layout_weight="1"
+                        android:background="@drawable/toggle_outline_buttons"
+                        android:button="@null"
+                        android:gravity="center"
+                        android:padding="12dp"
+                        android:text="@string/normal_lyrics"
+                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption"
+                        android:textColor="@color/md_white_1000" />
+
+                </RadioGroup>
+
+                <FrameLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:layout_weight="1">
 
                     <ScrollView
                         android:layout_width="match_parent"
                         android:layout_height="match_parent"
-        android:padding="16dp">
+                        android:fadingEdge="vertical">
 
                         <TextView
                             android:id="@+id/offline_lyrics"
@@ -122,6 +106,9 @@
                             android:layout_height="wrap_content"
                             android:gravity="start"
                             android:lineSpacingExtra="3dp"
+                            android:paddingStart="16dp"
+                            android:paddingEnd="16dp"
+                            android:paddingBottom="16dp"
                             android:text="@string/no_lyrics_found"
                             android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                             android:textColor="@color/md_white_1000"
@@ -140,5 +127,8 @@
                         app:textAlign="left"
                         app:textSize="18sp" />
                 </FrameLayout>
-  </com.google.android.material.card.MaterialCardView>
             </LinearLayout>
+
+        </androidx.coordinatorlayout.widget.CoordinatorLayout>
+    </code.name.monkey.retromusic.views.FitSystemWindowsLayout>
+</FrameLayout>