Themes and styles in Android without magic. And how to cook them with SwitchCompat

Content

Introduction

• Create your own style for SwitchCompat.
• Somehow set this style to SwitchCompat.

• Specify for each view in the layout of screens through the style attribute.
• Create a theme with the switchStyle attribute overridden and assign this theme in the manifest for the entire application or a specific activation. This will change the appearance of the view for the entire application / activity.
• The theme can also be installed programmatically, in the activation code. If necessary, it can be changed "on the fly."

New style for SwitchCompat

<style name="MySwitchStyle" parent = "Widget.AppCompat.CompoundButton.Switch"> </style> 

• android: thumb - a resource for the movable part of SwitchCompat
• track - resource for the fixed part of SwitchCompat
• thumbTint - allows you to paint the moving part in the desired color depending on the state of SwitchCompat
• trackTint - allows you to paint a fixed part in the desired color depending on the state of SwitchCompat

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color = "@android:color/holo_orange_dark"/> <item android:color="@android:color/holo_green_light"/> </selector> 

 <style name="MySwitchStyle" parent = "Widget.AppCompat.CompoundButton.Switch"> <item name="thumbTint">@color/selector_switch_thumb</item> </style> 

Style in layout

• The style is applied when inflate resource layout.
• We cannot programmatically affect it.
• Specifying each time in the layout is inconvenient. And we can forget.

 <androidx.appcompat.widget.SwitchCompat android:text="Themed switch" style="@style/MySwitchStyle" android:layout_width="wrap_content" android:layout_height="wrap_content"/> 

Style in the subject. The topic is assigned via Manifest

 <resources> <style name="CustomTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!--    switchStyle --> <item name="switchStyle">@style/MySwitchStyle</item> </style> </resources> 

 <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/CustomTheme"><!--     --> </application> 

 <activity android:name=".MainActivity" android:theme="@style/CustomTheme"><!--    --> </activity> 

• Pros - We can change the appearance for the entire application at once.
• Cons - on the fly change will not work.

Style in the subject. The topic is assigned programmatically.

 class MainActivity : AppCompatActivity() { private const val KEY_CUSTOM_THEME_CHECKED = "KEY_CUSTOM_THEME_CHECKED" class MainActivity : AppCompatActivity() { private val preference by lazy { PreferenceManager.getDefaultSharedPreferences(this) } override fun onCreate(savedInstanceState: Bundle?) { val isCustomThemeChecked = preference.getBoolean( KEY_CUSTOM_THEME_CHECKED, true ) if (isCustomThemeChecked) { setTheme(R.style.CustomTheme) } else { setTheme(R.style.StandardTheme) } super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) customThemeCheckbox.isChecked = isCustomThemeChecked customThemeCheckbox.setOnCheckedChangeListener { _, isChecked -> preference.edit() .putBoolean(KEY_CUSTOM_THEME_CHECKED, isChecked) .apply() recreate() } } } 

1. Set the theme programmatically by calling setTheme. The method must be called before super.onCreate (savedInstanceState). In onCreate, we have the initialization of fragments (when they are).
2. Set the initial state of the Switch depending on the topic.
3. Set the listener, which, when the Switch changes, changes the theme in the settings and restarts activations via the activate method recreate ().

 <resources> <style name="CustomTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="switchStyle">@style/MySwitchStyle</item> </style> <style name="StandardTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="MySwitchStyle" parent="Widget.AppCompat.CompoundButton.Switch"> <item name="thumbTint">@color/selector_switch_thumb</item> </style> </resources> 

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp" android:orientation="vertical"> <CheckBox android:text="CustomTheme" android:layout_width="match_parent" android:layout_height="wrap_content" android:saveEnabled="false" android:id="@+id/customThemeCheckbox"/> <androidx.appcompat.widget.SwitchCompat android:text="Themed switch" android:layout_marginTop="56dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/themedSwitch"/> </LinearLayout> 

Other View

• editTextStyle
• checkboxStyle
• radioButtonStyle

 <item name="editTextStyle">@style/Widget.AppCompat.EditText</item> <item name="checkboxStyle">@style/Widget.AppCompat.CompoundButton.CheckBox</item> <item name="radioButtonStyle"> @style/Widget.AppCompat.CompoundButton.RadioButton </item> <item name="buttonStyle">@style/Widget.AppCompat.Button</item> 

Resources