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
* 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
*/
class HomeFragment : Fragment() {

View file

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

View file

@ -2,8 +2,9 @@
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/mtrl_btn_ripple_color">
<item>
<shape android:shape="oval"
<shape android:shape="rectangle"
android:tint="@color/sel_accented">
<corners android:radius="@dimen/spacing_small" />
<solid android:color="@android:color/white" />
</shape>
</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"
style="@style/Widget.Auxio.TextView.Detail"
android:layout_width="0dp"
android:maxLines="2"
android:ellipsize="end"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginEnd="@dimen/spacing_medium"

View file

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

View file

@ -26,6 +26,7 @@
android:id="@+id/detail_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
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" />
<!-- Android 12 Splashscreen config -->
<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 -->
<style name="Theme.Auxio.App" parent="Theme.Auxio.DayNight">
<style name="Theme.Auxio.App" parent="Theme.Auxio.V31">
<!-- Colors -->
<item name="colorSurface">@color/surface</item>
<item name="colorAccent">@color/blue</item>
@ -28,6 +23,14 @@
<item name="colorControlHighlight">@color/overlay_selection</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 -->
<item name="android:windowBackground">?attr/colorSurface</item>
<item name="android:colorBackground">?attr/colorSurface</item>
@ -39,7 +42,6 @@
<!-- System-specific magic -->
<item name="android:scrollbars">none</item>
<item name="android:windowIsFloating">false</item>
<item name="popupMenuBackground">@drawable/ui_popup_bg</item>
<!-- Material stuff -->
<item name="textInputStyle">@null</item>

View file

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