From 829a65e51509162cad8be4f7b0ba463ca80fa3c1 Mon Sep 17 00:00:00 2001
From: arkon <eugcheung94@gmail.com>
Date: Sat, 13 Feb 2021 17:00:00 -0500
Subject: [PATCH] Adjust reader seekbar design
- Revert back to old prev/next chapter icons
- Make views taller for easier actions
- Use more consistent spacing
- Add ripples to prev/next chapter buttons
---
.../main/res/drawable/ic_skip_next_24dp.xml | 9 ++++++
.../res/drawable/ic_skip_previous_24dp.xml | 9 ++++++
.../drawable/reader_seekbar_background.xml | 2 +-
.../res/drawable/reader_seekbar_button.xml | 7 +++++
.../res/drawable/reader_seekbar_ripple.xml | 10 ++++++
app/src/main/res/layout/reader_activity.xml | 31 ++++++++-----------
6 files changed, 49 insertions(+), 19 deletions(-)
create mode 100644 app/src/main/res/drawable/ic_skip_next_24dp.xml
create mode 100644 app/src/main/res/drawable/ic_skip_previous_24dp.xml
create mode 100644 app/src/main/res/drawable/reader_seekbar_button.xml
create mode 100644 app/src/main/res/drawable/reader_seekbar_ripple.xml
diff --git a/app/src/main/res/drawable/ic_skip_next_24dp.xml b/app/src/main/res/drawable/ic_skip_next_24dp.xml
new file mode 100644
index 000000000..78ae4da4f
--- /dev/null
+++ b/app/src/main/res/drawable/ic_skip_next_24dp.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
+ <path
+ android:fillColor="@android:color/black"
+ android:pathData="M6,18l8.5,-6L6,6v12zM16,6v12h2V6h-2z" />
+</vector>
diff --git a/app/src/main/res/drawable/ic_skip_previous_24dp.xml b/app/src/main/res/drawable/ic_skip_previous_24dp.xml
new file mode 100644
index 000000000..2dad0ad04
--- /dev/null
+++ b/app/src/main/res/drawable/ic_skip_previous_24dp.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
+ <path
+ android:fillColor="@android:color/black"
+ android:pathData="M6,6h2v12L6,18zM9.5,12l8.5,6L18,6z" />
+</vector>
diff --git a/app/src/main/res/drawable/reader_seekbar_background.xml b/app/src/main/res/drawable/reader_seekbar_background.xml
index 0e6908eca..e4f49ad60 100644
--- a/app/src/main/res/drawable/reader_seekbar_background.xml
+++ b/app/src/main/res/drawable/reader_seekbar_background.xml
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
- <corners android:radius="15dp" />
+ <corners android:radius="48dp" />
<solid android:color="?attr/colorPrimary" />
</shape>
diff --git a/app/src/main/res/drawable/reader_seekbar_button.xml b/app/src/main/res/drawable/reader_seekbar_button.xml
new file mode 100644
index 000000000..cbe9ef163
--- /dev/null
+++ b/app/src/main/res/drawable/reader_seekbar_button.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+ <item android:drawable="@drawable/reader_seekbar_ripple" android:state_pressed="true" />
+ <item android:drawable="@drawable/reader_seekbar_ripple" android:state_focused="true" />
+ <item android:drawable="@drawable/reader_seekbar_ripple" android:state_selected="true" />
+ <item android:drawable="@drawable/reader_seekbar_background" />
+</selector>
diff --git a/app/src/main/res/drawable/reader_seekbar_ripple.xml b/app/src/main/res/drawable/reader_seekbar_ripple.xml
new file mode 100644
index 000000000..2ee27919b
--- /dev/null
+++ b/app/src/main/res/drawable/reader_seekbar_ripple.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+ android:color="?attr/colorOnPrimary">
+ <item android:id="@android:id/mask">
+ <shape android:shape="rectangle">
+ <solid android:color="@android:color/white" />
+ <corners android:radius="48dp" />
+ </shape>
+ </item>
+</ripple>
diff --git a/app/src/main/res/layout/reader_activity.xml b/app/src/main/res/layout/reader_activity.xml
index 05773506c..38ba1d354 100644
--- a/app/src/main/res/layout/reader_activity.xml
+++ b/app/src/main/res/layout/reader_activity.xml
@@ -68,33 +68,31 @@
android:id="@+id/reader_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
- android:layout_gravity="bottom"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="16dp"
- android:gravity="center"
+ android:layoutDirection="ltr"
android:orientation="horizontal">
<ImageButton
android:id="@+id/left_chapter"
- android:layout_width="40dp"
- android:layout_height="40dp"
- android:layout_gravity="center"
- android:layout_marginStart="50dp"
+ android:layout_width="48dp"
+ android:layout_height="48dp"
android:layout_marginEnd="8dp"
android:background="@drawable/reader_seekbar_background"
android:contentDescription="@string/action_previous_chapter"
android:padding="@dimen/material_layout_keylines_screen_edge_margin"
- app:srcCompat="@drawable/ic_arrow_back_24dp"
+ app:srcCompat="@drawable/ic_skip_previous_24dp"
app:tint="?attr/colorOnPrimary" />
<LinearLayout
android:id="@+id/reader_seekbar"
- android:layout_width="match_parent"
+ android:layout_width="0dp"
android:layout_height="match_parent"
- android:background="@drawable/reader_seekbar_background"
- android:paddingStart="10dp"
- android:paddingEnd="10dp">
+ android:layout_weight="1"
+ android:background="@drawable/reader_seekbar_button"
+ android:paddingStart="8dp"
+ android:paddingEnd="8dp">
<TextView
android:id="@+id/left_page_text"
@@ -128,18 +126,15 @@
</LinearLayout>
- <!-- android:background="?selectableItemBackgroundBorderless"-->
<ImageButton
android:id="@+id/right_chapter"
- android:layout_width="40dp"
- android:layout_height="40dp"
- android:layout_gravity="center"
+ android:layout_width="48dp"
+ android:layout_height="48dp"
android:layout_marginStart="8dp"
- android:layout_marginEnd="50dp"
- android:background="@drawable/reader_seekbar_background"
+ android:background="@drawable/reader_seekbar_button"
android:contentDescription="@string/action_next_chapter"
android:padding="@dimen/material_layout_keylines_screen_edge_margin"
- app:srcCompat="@drawable/ic_arrow_forward_24dp"
+ app:srcCompat="@drawable/ic_skip_next_24dp"
app:tint="?attr/colorOnPrimary" />
</LinearLayout>