ui: become more material

Give up and add more material elements such as neutral toolbar colors
and rounded corners. This is largely for stylistic cohesion. I will
keep rounded corners to a minimum though, rounding album covers is a
crime against humanitity.
This commit is contained in:
OxygenCobalt 2021-09-24 19:46:42 -06:00
parent b2ebd92d2a
commit 68b8ff0798
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
10 changed files with 30 additions and 36 deletions

View file

@ -50,6 +50,13 @@ import org.oxycblt.auxio.util.makeScrollingViewFade
/** /**
* The main "Launching Point" fragment of Auxio, allowing navigation to the detail * The main "Launching Point" fragment of Auxio, allowing navigation to the detail
* views for each respective fragment. * views for each respective fragment.
* FIXME: More UI glitches:
* - AppBar will just...expand. For no reason. If you navigate away while it's partially
* collapsed. No, I don't know why. Guess I have to save the state myself.
* - Edge-to-edge is borked still, unsure how to really fix this aside from making some
* magic layout like Material Files, but even then it might not work since the scrolling
* views are not laid side-by-side to the layout itself.
* So excited to have enough time to get to these in like...november.
* @author OxygenCobalt * @author OxygenCobalt
*/ */
class HomeFragment : Fragment() { class HomeFragment : Fragment() {

View file

@ -33,6 +33,7 @@ import org.oxycblt.auxio.util.logD
/** /**
* Object that manages the AudioFocus state. * Object that manages the AudioFocus state.
* Adapted from NewPipe (https://github.com/TeamNewPipe/NewPipe) * Adapted from NewPipe (https://github.com/TeamNewPipe/NewPipe)
* FIXME: remove the janky audio fadeout code, it just does not work.
* @author OxygenCobalt * @author OxygenCobalt
*/ */
class AudioReactor( class AudioReactor(

View file

@ -2,8 +2,9 @@
<ripple xmlns:android="http://schemas.android.com/apk/res/android" <ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/mtrl_btn_ripple_color"> android:color="@color/mtrl_btn_ripple_color">
<item> <item>
<shape android:shape="oval" <shape android:shape="rectangle"
android:tint="@color/sel_accented"> android:tint="@color/sel_accented">
<corners android:radius="@dimen/spacing_small" />
<solid android:color="@android:color/white" /> <solid android:color="@android:color/white" />
</shape> </shape>
</item> </item>

View file

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="?attr/colorSurface" />
</shape>
</item>
<item>
<shape>
<solid android:color="@color/overlay_popup" />
</shape>
</item>
</layer-list>

View file

@ -24,6 +24,8 @@
android:id="@+id/detail_name" android:id="@+id/detail_name"
style="@style/Widget.Auxio.TextView.Detail" style="@style/Widget.Auxio.TextView.Detail"
android:layout_width="0dp" android:layout_width="0dp"
android:maxLines="2"
android:ellipsize="end"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium" android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_medium" android:layout_marginEnd="@dimen/spacing_medium"

View file

@ -24,6 +24,8 @@
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium" android:layout_marginStart="@dimen/spacing_medium"
android:maxLines="4"
android:ellipsize="end"
app:layout_constraintBottom_toTopOf="@+id/detail_subhead" app:layout_constraintBottom_toTopOf="@+id/detail_subhead"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5" app:layout_constraintHorizontal_bias="0.5"

View file

@ -26,6 +26,7 @@
android:id="@+id/detail_recycler" android:id="@+id/detail_recycler"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:clipToPadding="false"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
tools:listitem="@layout/item_detail" /> tools:listitem="@layout/item_detail" />

View file

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Auxio.DayNight" parent="Theme.Auxio.V31">
<!--
Use the accent color as the elevation overlay color on dark mode. It's just more visually
appealing then a grey-ish color that sticks out like a sore thumb. Technically this is
actually a part of Material3, but that is still unstable, so I just copied this element
for now.
-->
<item name="elevationOverlayColor">?attr/colorAccent</item>
</style>
</resources>

View file

@ -6,14 +6,9 @@
<style name="Theme.Auxio.V27" parent="Theme.Auxio" /> <style name="Theme.Auxio.V27" parent="Theme.Auxio" />
<!-- Android 12 Splashscreen config --> <!-- Android 12 Splashscreen config -->
<style name="Theme.Auxio.V31" parent="Theme.Auxio.V27" /> <style name="Theme.Auxio.V31" parent="Theme.Auxio.V27" />
<!-- Dark-mode-specific stuff -->
<style name="Theme.Auxio.DayNight" parent="Theme.Auxio.V31">
<!-- Light theme, don't use an elevation overlay. -->
<item name="elevationOverlayColor">@android:color/transparent</item>
</style>
<!-- Base theme --> <!-- Base theme -->
<style name="Theme.Auxio.App" parent="Theme.Auxio.DayNight"> <style name="Theme.Auxio.App" parent="Theme.Auxio.V31">
<!-- Colors --> <!-- Colors -->
<item name="colorSurface">@color/surface</item> <item name="colorSurface">@color/surface</item>
<item name="colorAccent">@color/blue</item> <item name="colorAccent">@color/blue</item>
@ -28,6 +23,14 @@
<item name="colorControlHighlight">@color/overlay_selection</item> <item name="colorControlHighlight">@color/overlay_selection</item>
<item name="colorControlActivated">?attr/colorAccent</item> <item name="colorControlActivated">?attr/colorAccent</item>
<!--
Use the accent color as the elevation overlay color on dark mode. It's just more visually
appealing then a grey-ish color that sticks out like a sore thumb. Technically this is
actually a part of Material3, but that is still unstable, so I just copied this element
for now.
-->
<item name="elevationOverlayColor">?attr/colorPrimary</item>
<!-- Appearance --> <!-- Appearance -->
<item name="android:windowBackground">?attr/colorSurface</item> <item name="android:windowBackground">?attr/colorSurface</item>
<item name="android:colorBackground">?attr/colorSurface</item> <item name="android:colorBackground">?attr/colorSurface</item>
@ -39,7 +42,6 @@
<!-- System-specific magic --> <!-- System-specific magic -->
<item name="android:scrollbars">none</item> <item name="android:scrollbars">none</item>
<item name="android:windowIsFloating">false</item> <item name="android:windowIsFloating">false</item>
<item name="popupMenuBackground">@drawable/ui_popup_bg</item>
<!-- Material stuff --> <!-- Material stuff -->
<item name="textInputStyle">@null</item> <item name="textInputStyle">@null</item>

View file

@ -10,7 +10,6 @@
<item name="android:layout_height">?android:attr/actionBarSize</item> <item name="android:layout_height">?android:attr/actionBarSize</item>
<item name="titleTextAppearance">@style/TextAppearance.ToolbarTitle</item> <item name="titleTextAppearance">@style/TextAppearance.ToolbarTitle</item>
<item name="titleTextColor">?attr/colorAccent</item>
<item name="contentInsetStartWithNavigation">0dp</item> <item name="contentInsetStartWithNavigation">0dp</item>
</style> </style>
@ -182,9 +181,11 @@
<item name="android:backgroundTint">?attr/colorPrimary</item> <item name="android:backgroundTint">?attr/colorPrimary</item>
<item name="android:textSize">@dimen/text_size_small</item> <item name="android:textSize">@dimen/text_size_small</item>
<item name="android:textColor">?attr/colorSurface</item> <item name="android:textColor">?attr/colorSurface</item>
<item name="android:insetTop">4dp</item>
<item name="android:insetBottom">4dp</item>
<item name="rippleColor">@color/mtrl_btn_ripple_color</item> <item name="rippleColor">@color/mtrl_btn_ripple_color</item>
<item name="fontFamily">@font/inter_semibold</item> <item name="fontFamily">@font/inter_semibold</item>
<item name="cornerRadius">0dp</item> <item name="cornerRadius">24dp</item>
</style> </style>
<style name="Widget.Auxio.Button.Secondary" parent="Widget.MaterialComponents.Button.OutlinedButton"> <style name="Widget.Auxio.Button.Secondary" parent="Widget.MaterialComponents.Button.OutlinedButton">
@ -192,7 +193,9 @@
<item name="android:textAllCaps">false</item> <item name="android:textAllCaps">false</item>
<item name="android:textSize">@dimen/text_size_small</item> <item name="android:textSize">@dimen/text_size_small</item>
<item name="fontFamily">@font/inter_semibold</item> <item name="fontFamily">@font/inter_semibold</item>
<item name="cornerRadius">0dp</item> <item name="android:insetTop">4dp</item>
<item name="android:insetBottom">4dp</item>
<item name="cornerRadius">24dp</item>
</style> </style>
<style name="Widget.Auxio.Button.Circular" parent=""> <style name="Widget.Auxio.Button.Circular" parent="">