ui: completely migrate to material

Drop the Bridge theme and completely migrate to material. This is for
two reasons:

- To make Material You less painful
- Improve coloring [Dark mode, other colors, etc].

Most of the previous UI elements were kept [no rounded corners], but
did come at the cost of removing the hint tagline from the search bar
since there was simply no good way to integrate it. There are also
some other miscellanious issues [Weird selection menus, dividers are
not migrated still], but those will be fixed in future commits.
This commit is contained in:
OxygenCobalt 2021-09-03 20:37:32 -06:00
parent 74d55ba59e
commit 23e3c0241d
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
15 changed files with 44 additions and 22 deletions

View file

@ -51,7 +51,6 @@ import org.oxycblt.auxio.util.makeScrollingViewFade
* TODO: Re-add sorting (but new and improved)
* It will require a new SortMode to be made simply for compat. Migrate the old SortMode
* eventually.
* TODO: Add lift-on-scroll eventually [when I can file a bug report or hack it into working]
* @author OxygenCobalt
*/
class HomeFragment : Fragment() {

View file

@ -34,6 +34,7 @@ import org.oxycblt.auxio.ui.DisplayMode
/**
* The [ViewModel] for the search functionality
* TODO: Try to find adjacent characters [e.g accented o == o]
* @author OxygenCobalt
*/
class SearchViewModel : ViewModel() {

View file

@ -26,8 +26,6 @@ import android.view.ViewTreeObserver
import androidx.annotation.StyleRes
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.content.res.ResourcesCompat
import androidx.core.view.children
import androidx.recyclerview.widget.RecyclerView
import com.google.android.material.appbar.AppBarLayout
import org.oxycblt.auxio.util.logE

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/colorOnSurface" />
</selector>

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.0" android:color="?attr/colorOnSurface" />
</selector>

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorOnSurface" android:alpha="0.16" />
</selector>

View file

@ -0,0 +1,13 @@
<?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/color_popup_overlay" />
</shape>
</item>
</layer-list>

View file

@ -3,7 +3,7 @@
android:color="?attr/colorControlHighlight">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="?attr/colorControlHighlight" />
<solid android:color="@android:color/white" />
</shape>
</item>
</ripple>

View file

@ -36,7 +36,6 @@
app:tabContentStart="@dimen/spacing_medium"
app:tabIndicatorColor="?attr/colorAccent"
app:tabMode="scrollable"
app:tabRippleColor="?attr/colorControlHighlight"
app:tabTextAppearance="@style/TextAppearance.TabLayout.Label"
app:tabTextColor="?android:attr/textColorPrimary"
app:tabUnboundedRipple="true" />

View file

@ -26,6 +26,7 @@
android:id="@+id/search_text_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="false"
app:boxBackgroundMode="filled"
app:boxStrokeColor="?attr/colorAccent"
app:boxStrokeWidth="0dp"
@ -42,9 +43,9 @@
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:hint="@string/hint_search_library"
android:padding="@dimen/spacing_medium"
android:imeOptions="actionSearch|flagNoExtractUi"
android:inputType="textFilter"
android:padding="@dimen/spacing_medium"
android:textCursorDrawable="@drawable/ui_cursor" />
</com.google.android.material.textfield.TextInputLayout>

View file

@ -2,7 +2,7 @@
<resources>
<color name="surface">@color/surface_night</color>
<color name="divider">#3b3c3f</color>
<color name="selection">#484848</color>
<color name="selection">#686868</color>
<color name="inactive">#404040</color>
<color name="control">#ffffff</color>
<color name="nav_bar">#01151515</color>

View file

@ -5,7 +5,7 @@
<color name="surface_black">@android:color/black</color>
<color name="surface">@color/surface_day</color>
<color name="selection">#cbcbcb</color>
<color name="selection">#ababab</color>
<color name="control">#202020</color>
<color name="divider">#cbcbcb</color>
<color name="inactive">#c4c4c4</color>

View file

@ -3,8 +3,8 @@
<!-- ANDROID COMPONENT-SPECIFIC STYLES. MOSTLY HACKS -->
<!-- Custom popup menu theme -->
<style name="Widget.CustomPopup" parent="Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">?attr/colorSurface</item>
<style name="Widget.CustomPopup" parent="Widget.MaterialComponents.PopupMenu.ContextMenu">
<item name="android:popupBackground">@drawable/ui_popup_bg</item>
<item name="colorControlHighlight">?attr/colorControlHighlight</item>
<item name="cornerRadius">0dp</item>
</style>

View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Master parent theme based off of Theme.MaterialComponents.DayNight.NoActionBar.Bridge -->
<style name="Theme.Master" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge" />
<style name="Theme.Master" parent="Theme.MaterialComponents.DayNight.NoActionBar" />
<!-- Template theme that handles edge-to-edge on other styles variants -->
<style name="Theme.Edge" parent="Theme.Master" />
<!-- Android 12 Splashscreen config -->
@ -14,9 +14,13 @@
<item name="colorAccent">@color/design_default_color_primary</item>
<item name="colorPrimary">?attr/colorAccent</item>
<item name="colorOnPrimary">?attr/colorSurface</item>
<item name="colorSecondary">?attr/colorAccent</item>
<item name="colorOnSecondary">?attr/colorSurface</item>
<item name="colorControlNormal">@color/control</item>
<item name="colorControlHighlight">@color/selection</item>
<item name="colorControlHighlight">@color/color_selection</item>
<item name="colorControlActivated">?attr/colorAccent</item>
<!-- Appearance -->
@ -30,17 +34,11 @@
<!-- System-specific magic -->
<item name="android:scrollbars">none</item>
<item name="android:windowIsFloating">false</item>
<item name="popupMenuStyle">@style/Widget.CustomPopup</item>
<item name="popupMenuBackground">@drawable/ui_popup_bg</item>
<!--
These exact flags, in this exact order, in this exact formatting somehow make
the dialogs use the nicer material style. Please do not touch this or format it.
-->
<!-- @formatter:off -->
<item name="viewInflaterClass">com.google.android.material.theme.MaterialComponentsViewInflater</item>
<item name="alertDialogTheme">@style/ThemeOverlay.MaterialComponents.Dialog.Alert</item>
<!-- Material stuff -->
<item name="textInputStyle">@null</item>
<item name="materialAlertDialogTheme">@style/Theme.CustomDialog</item>
<!-- @formatter:on -->
</style>
<!-- The basic black theme derived in all black accents. -->

View file

@ -202,7 +202,6 @@
<item name="android:layout_height">wrap_content</item>
<item name="android:clickable">true</item>
<item name="android:focusable">true</item>
<item name="rippleColor">?attr/colorControlHighlight</item>
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:textSize">@dimen/text_size_small</item>
<item name="textAllCaps">false</item>
@ -212,10 +211,12 @@
<style name="Widget.Button.Vibrant.Primary" parent="@style/Widget.Button.Vibrant.Base">
<item name="android:textColor">?attr/colorSurface</item>
<item name="backgroundTint">?attr/colorAccent</item>
<item name="rippleColor">@color/mtrl_btn_ripple_color</item>
</style>
<style name="Widget.Button.Vibrant.Secondary" parent="@style/Widget.Button.Vibrant.Base">
<item name="strokeColor">@color/divider</item>
<item name="strokeWidth">@dimen/size_stroke_small</item>
<item name="rippleColor">?attr/colorControlHighlight</item>
</style>
</resources>