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:
parent
b2ebd92d2a
commit
68b8ff0798
10 changed files with 30 additions and 36 deletions
|
@ -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() {
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
||||||
|
|
|
@ -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="">
|
||||||
|
|
Loading…
Reference in a new issue