Styling außerhalb der Box

Hier haben wir eine Bewerbung. Ernst, groß, erwachsen. Praktisch keine Stile, aber keine Unordnung; Wir verwenden Widgets von AppCompat für uns selbst, haben jedoch das Thema von Material Design Components (MDC) bereits verschärft und denken über eine vollständige Migration nach.

Und plötzlich gibt es eine Aufgabe für eine komplette Neugestaltung. Und das neue Design hat die gleiche Geschäftslogik wie das alte. Die Komponenten sind neu, die Schriftarten sind nicht standardisiert, die Farben (mit Ausnahme der Unternehmensschriften) sind unterschiedlich. Im Allgemeinen stellt sich heraus, dass es Zeit ist, zu MDC zu wechseln.

Aber nicht alles ist so einfach:

• Redesign soll Stück für Stück sein. Das heißt, die Anwendung enthält beide Bildschirme mit dem alten und dem neuen Erscheinungsbild.

  
  
  
  
  

• Die Farben und die Typografie im neuen Design unterscheiden sich von den Empfehlungen des MDC. Obwohl die Namensprinzipien ähnlich sind

  
  
  
  
  

• Die Präsentationsschicht ist in separate UI-Module unterteilt. Und einige von ihnen werden von einer anderen Anwendung verwendet. In Anbetracht der Tatsache, dass wir auf Stile verzichten, sind beim Stylen in solchen Modulen einige Eigenschaften hinter Attributen verborgen: Farben, Textstile, Zeichenfolgen und vieles mehr.

  
  
  
  
  

• Es gibt ein etabliertes Schema für die Arbeit mit den oben genannten UI-Modulen. Insbesondere mit Attributen. Dies bedeutet auch mit Farben, Textstilen, Zeichenfolgen und mehr. Und mit MDC möchte ich Stile verwenden

  
  
  
  
  

Außerdem teile ich meine Erfahrungen mit dem Umgang mit diesen Schwierigkeiten: Wie man beim Wechsel zu MDC eine Android-Anwendung mit unabhängigen UI-Modulen teilweise stilisiert, vom Systemdesign abstrahiert und nichts kaputt macht. Bonus - Beratung und Analyse der Schwierigkeiten, auf die ich gestoßen bin.

Über UI-Module

Es gibt UI-Module. Sie sind projektunabhängig. Liege getrennt von ihm.

In jedem der Projekte befindet sich ein Root-Modul. Nennen wir es Kernpräsentation . Dies hängt von den in dieser Anwendung verwendeten UI-Modulen ab. Module werden als reguläre Gradle-Abhängigkeit verbunden.

Die Frage stellt sich. Wie kann man etwas stilisieren? Kurz gesagt, mit Attributen. Innerhalb jedes solchen UI-Moduls werden die verwendeten Attribute definiert, die vom Anwendungsthema implementiert werden müssen:

<resources>
	<!-- src -->
	<attr name = "someUiModuleBackgroundSrc" format = "reference" />
	<!-- string -->
	<attr name = "someUiModuleTitleString" format = "reference" />
	<attr name = "someUiModuleErrorString" format = "reference" />
	<!-- textAppearance -->
	<attr name = "someUiModuleTextAppearance1" format = "reference" />
	<attr name = "someUiModuleTextAppearance2" format = "reference" />
	<attr name = "someUiModuleTextAppearance3" format = "reference" />
	<attr name = "someUiModuleTextAppearance4" format = "reference" />
	<attr name = "someUiModuleTextAppearance5" format = "reference" />
	<attr name = "someUiModuleTextAppearance6" format = "reference" />
	<attr name = "someUiModuleTextAppearance7" format = "reference" />
	<attr name = "someUiModuleTextAppearance8" format = "reference" />
	<!-- color -->
	<attr name = "someUiModuleColor1" format = "reference" />
	<attr name = "someUiModuleColor2" format = "reference" />
</resources>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

<androidx.appcompat.widget.AppCompatTextView
	android:background = "?someUiModuleBackgroundSrc"
	android:text = "?someUiModuleErrorString"
	android:textAppearance = "?someUiModuleTextAppearance5"
	...
	/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

"" ()

. , . , , , .

, :

• MDC , MDC. AppCompat'a. framework MDC, :

  
  
  
  
  

  <TextView
  	...
  	/><!-- Bad -->
  
  <androidx.appcompat.widget.AppCompatTextView
  	...
  	/><!-- Bad -->
  
  <com.google.android.material.textview.MaterialTextView
  	...
  	/><!-- Good -->
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
      

• (, , ) ui - (, v2)

  
  
  
  
  

• - View. , View ( style
  
  
  
  xml, defStyleAttr
  
  
  
  ), . :

  
  
  
  
  

  <!-- Good -->
  <com.google.android.material.appbar.MaterialToolbar
  	style = "?toolbarStyleV2"
  	/>
  
  <!-- Bad -->
  <com.google.android.material.appbar.MaterialToolbar
  	android:background = "?primaryColorV2"
  	/>
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
      

• . . :

  
  
  
  
  

  <item name = "filledTextInputStyleV2">@style/V2.Widget.MyFancyApp.TextInputLayout.Filled</item> <!-- Bad -->
  <item name = "searchTextInputStyleV2">@style/V2.Widget.MyFancyApp.TextInputLayout.Search</item> <!-- Good -->
  <item name = "blackOutlinedButtonStyleV2">@style/V2.Widget.MyFancyApp.Button.BlackOutlined</item> <!-- Bad -->
  <item name = "primaryButtonStyleV2">@style/V2.Widget.MyFancyApp.Button.Primary</item> <!-- Good -->
  <item name = "secondaryButtonStyleV2">@style/V2.Widget.MyFancyApp.Button.Secondary</item> <!-- Good -->
  <item name = "textButtonStyleV2">@style/V2.Widget.MyFancyApp.Button.Text</item> <!-- Ok. Based on Figma component name -->
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
      

• , , core-presentation

  
  
  
  
  

:

• . ,

  
  
  
  
  

• UI

  
  
  
  
  

• ui -

  
  
  
  
  

---

: ; . ?

. , TextView



. ? . . , . TextView



. , MDC , - :

While TextAppearance does support android:textColor, MDC tends to separate concerns by specifying this separately in the main widget styles

:

<item name = "v2TextStyleGiftItemPrice">@style/V2.Widget.MyFancyApp.TextView.GiftItemPrice</item>
<item name = "v2TextStyleGiftItemName">@style/V2.Widget.MyFancyApp.TextView.GiftItemName</item>

...

<style name = "V2.Widget.MyFancyApp.TextView.GiftItemPrice">
    <item name = "android:textAppearance">?v2TextAppearanceCaption1</item>
    <item name = "android:textColor">?v2ColorOnPrimary</item>
</style>
<style name = "V2.Widget.MyFancyApp.TextView.GiftItemName">
    <item name = "android:textAppearance">?v2TextAppearanceCaption1</item>
    <item name = "android:textColor">?v2ColorOnPrimary</item>
    <item name = "textAllCaps">true</item>
    <item name = "android:background">?v2ColorPrimary</item>
</style>

...

<com.google.android.material.textview.MaterialTextView
	style = "?v2TextStyleGiftItemPrice"
	...
	/>

<com.google.android.material.textview.MaterialTextView
	style = "?v2TextStyleGiftItemName"
	...
	/>


      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , v2 (, primaryButtonStyleV2



), - (v2TextStyleGiftItemName



). , IDE.

---

, ui :

<resources>
	<!--   -->
	<attr name = "cardStyleV2" format = "reference" />
	<attr name = "appBarStyleV2" format = "reference" />
	<attr name = "toolbarStyleV2" format = "reference" />
	<attr name = "primaryButtonStyleV2" format = "reference" />

	...

	<!--   TextView -->
	<attr name = "v2TextStyleGiftCategoryTitle" format = "reference" />
	<attr name = "v2TextStyleGiftItemPrice" format = "reference" />
	<attr name = "v2TextStyleSearchSuggestion" format = "reference" />
	<attr name = "v2TextStyleNoResultsTitle" format = "reference" />

	...

	<!--  -->
	<attr name = "ic16CreditV2" format = "reference" />
	<attr name = "ic24CloseV2" format = "reference" />
	<attr name = "ic48GiftSentV2" format = "reference" />

	...

	<!--  -->
	<attr name = "shopTitleStringV2" format = "reference" />
	<attr name = "shopSearchHintStringV2" format = "reference" />
	<attr name = "noResultsStringV2" format = "reference" />

	...

	<!-- styleable  View -->
	<declare-styleable name = "ShopPriceSlider">
		<attr name = "maxPrice" format = "integer" />
	</declare-styleable>

</resources>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. . , .

, TextView



, , ( ).

, , , . .

android:background



, - ? -. . - .

---

:

<style name = "V2.Widget.MyFancyApp.TextView.GiftItemName">
    <item name = "android:textAppearance">?v2TextAppearanceCaption1</item>
    <item name = "android:textColor">?v2ColorOnPrimary</item>
</style>


<style name = "V2.Widget.MyFancyApp.Button.Primary" parent = "Widget.MaterialComponents.Button">
	...
</style>

<style name = "V2.Widget.MyFancyApp.Button.Primary.Price">
	...
	<item name = "icon">?ic16CreditV2</item>
</style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, (android:textAppearance



) . . core-presentation, , , ( @color/



, @style/



, @drawable/



). ?

: . . :

• ( , ) .

  
  
  
  
  

• "" (Halloween, Christmas, Easter ). . , , -

  
  
  
  
  

, ,

MaterialThemeOverlay

android:theme



View, . . , . .

, . android:theme



materialThemeOverlay



, MaterialThemeOverlay.wrap(...)



.

- xml:

<item name = "achievementLevelBarStyleV2">@style/V2.Widget.MyFancyApp.AchievementLevelBar</item>
		
<style name = "V2.Widget.MyFancyApp.AchievementLevelBar" parent = "">
	<item name = "materialThemeOverlay">@style/V2.ThemeOverlay.MyFancyApp.AchievementLevelBar</item>
</style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

View:

class AchievementLevelBar @JvmOverloads constructor(
	context: Context,
	attrs: AttributeSet? = null,
	defStyleAttr: Int = R.attr.achievementLevelBarStyleV2
) : LinearLayoutCompat(MaterialThemeOverlay.wrap(context, attrs, defStyleAttr, 0), attrs, defStyleAttr) {
	init {
		View.inflate(context, R.layout.achievement_level_bar, this)
		...
	}

	...
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. - , init {}



context



, . : context



. , materialThemeOverlay



, context



getContext()



. MaterialButton



:

  public MaterialButton(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(wrap(context, attrs, defStyleAttr, DEF_STYLE_RES), attrs, defStyleAttr);
    // Ensure we are using the correctly themed context rather than the context that was passed in.
    context = getContext();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

( Kotlin, Lint name shadowing. )

Light status bar

status bar StatusBarView



. , ( edge-to-edge), . , .

, status bar translucent. : - overlay ( ), - . status bar (light): background .

, light status bar translucent StatusBarView



. :

• light status bar 23 SDK ( ). , , translucent status bar ( )

  
  
  
  
  

• Translucent status bar FLAG_TRANSLUCENT_STATUS
  
  
  
  ; overlay ( light) - FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS
  
  
  
  

  
  
  
  
  

• , :

  
  
  
  
  

fun setLightStatusBar() {
	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
		var flags = window.decorView.systemUiVisibility
		flags = flags or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
		window.decorView.systemUiVisibility = flags
	}
}

fun clearLightStatusBar() {
	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
		var flags = window.decorView.systemUiVisibility
		flags = flags and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()
		window.decorView.systemUiVisibility = flags
	}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

• FLAG_TRANSLUCENT_STATUS



StatusBarView
  
  
  
  status bar. :

  
  
  
  
  

class StatusBarView @JvmOverloads constructor(
	context: Context,
	attrs: AttributeSet? = null,
	defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
	init {
		...
		systemUiVisibility = SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
	}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

• StatusBarView
  
  
  
  light status bar, statusBarColor
  
  
  
  

  
  
  
  
  

• , light / translucent status bar StatusBarView
  
  
  
  

  
  
  
  
  

Color State List (CSL)

MDC - CSL. , 23 SDK CSL . android:alpha



. , .

:

color/v2_on_background_20.xml

<selector xmlns:android = "http://schemas.android.com/apk/res/android">
	<item android:alpha = "0.20" android:color = "?v2ColorOnBackground" />
</selector>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , @color/



. , CSL - . v2ColorOnBackground



. CSL v2ColorOnBackground



20% :

<color name = "black">#000000</color> <!-- v2ColorOnBackground -->
<color name = "black_20">#33000000</color> <!-- v2ColorOnBackground 20% opacity -->
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, :

• , 23 SDK . , MDC 21 . , CSL (, View ), MaterialResources.getColorStateList(). Restricted API,

  
  
  
  
  

• CSL android:background
  
  
  
  . :

  
  
  
  
  

<style name = "V2.Widget.MyFancyApp.Divider" parent = "">
	<item name = "android:background">@drawable/v2_rect</item>
	<item name = "android:backgroundTint">@color/v2_on_background_15</item>
	...
</style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

android:background

. </shape>



xml. v2_rect.xml - . MDC . .

, ShapeableImageView



( MaterialCardView



)? . :

<com.google.android.material.imageview.ShapeableImageView
	style = "?shimmerStyleV2"
  ...
	/>

<item name = "shimmerStyleV2">@style/V2.Widget.MyFancyApp.Shimmer</item>

<style name = "V2.Widget.MyFancyApp.Shimmer">
	<item name = "srcCompat">@drawable/v2_rect</item>
	<item name = "tint">@color/v2_on_background_15</item>
	<item name = "shapeAppearance">@style/V2.ShapeAppearance.MyFancyApp.SmallComponent.Shimmer</item>
</style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

ViewGroup

:

<com.google.android.material.appbar.AppBarLayout
	style = "?appBarStyleV2"
	...
	>

	<my.magic.path.StatusBarView
		style = "?statusBarStyleV2"
		...
		/>

	<com.google.android.material.appbar.MaterialToolbar
		style = "?toolbarStyleV2"
		...
		/>
</com.google.android.material.appbar.AppBarLayout>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . , .

. . : ? - , AppBarLayout



( secondaryAppBarStyleV2



). ThemeOverlay:

<item name = "secondaryAppBarStyleV2">@style/V2.Widget.MyFancyApp.AppBarLayout.Secondary</item>

<style name = "V2.Widget.MyFancyApp.AppBarLayout.Secondary">
	<item name = "materialThemeOverlay">@style/V2.ThemeOverlay.MyFancyApp.AppBarLayout.Secondary</item>
	...
</style>

<style name = "V2.ThemeOverlay.MyFancyApp.AppBarLayout.Secondary" parent = "">
	<item name = "statusBarStyleV2">@style/V2.Widget.MyFancyApp.StatusBar.Secondary</item>
	<item name = "toolbarStyleV2">@style/V2.Widget.MyFancyApp.Toolbar.Secondary</item>
</style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, ViewGroup. , View. , - View ( ) ViewGroup, , ThemeOverlay ViewGroup.

MaterialToolbar Toolbar AppCompat

framework inflate MDC. MDC, ( ) framework AppCompat. :

<!--  -->
<Toolbar
...
/>

<!--  -->
<androidx.appcompat.widget.Toolbar
	...
	/>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- . : MaterialToolbar



, - Toolbar



AppCompat.

. MaterialToolbar



navigationIconTint



. Toolbar



AppCompat. , , navigationIcon Toolbar



- navigationIconTint



. MaterialToolbar



.

Material Design Guidelines, Dense text fields. TextInputLayout



40dp. (Widget.MaterialComponents.TextInputLayout.*.Dense



). ( Guidelines) ( ) ; , .

TextInputLayout



, Dense , start icon ... , Dense . , 40dp. , 0 padding



. .

design_text_input_start_icon.xml



, start icon 48dp. , TextInputLayout



40dp android:layout_height



, .

Vergessen wir nicht die Stile. Bei Dichte geht es um Stil. Daher muss es android:layout_height



in diesem Fall innerhalb des Stils liegen. Und das ist schlecht, weil Sie an jedem Verwendungsort TextInputLayout



mit einem solchen Stil android:layout_height



aus dem Markup herausschneiden müssen (die Antwort auf die Frage, warum dies so ist):

<item name = "searchTextInputStyleV2">@style/V2.Widget.MyFancyApp.TextInputLayout.Search</item>

<style name = "V2.Widget.MyFancyApp.TextInputLayout.Search" parent = "Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
	<item name = "android:layout_height">40dp</item>
	...
</style>


<!--   -->
<com.google.android.material.textfield.TextInputLayout
	style = "?searchTextInputStyleV2"
	android:layout_width = "match_parent"
	android:layout_height = "wrap_content"
	/>
  
<!--  -->
<com.google.android.material.textfield.TextInputLayout
	style = "?searchTextInputStyleV2"
	android:layout_width = "match_parent"
	/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Vielleicht ist dies nur ein Fehler und in Zukunft wird es möglich sein, eine solche Problemumgehung zu vermeiden.

---

Für mich war es eine gute Lösung. Es hat seine Nachteile, aber die Vorteile in Form einer Abstraktion vom Systemdesign in UI-Modulen und die Möglichkeit eines partiellen Stylings sind viel bedeutender.

Machen Sie das Beste aus Ihren Styling-Tools. Es ist nicht schwer. Danke fürs Lesen.