Databinding+livedata can easily realize skin changing without restart

author ：ezy

Recent projects need to use the dynamic skin changing function without restart , I was going to use github On star The most Android-skin-support

But a closer look shows that it's too complicated and 2 No maintenance in + A lot of issues It's not solved , Finally give up

After exploration , Find out Databinding+LiveData It can realize skin change without restart at low cost

• Dynamic skin changing without restart ( Unwanted recreate())
• No need to make a skin bag
• No extra dependence (Databinding+LiveData It is almost necessary to develop itself )
• Low invasive
• AppCompat and Material Default component support ( A small number of attributes require additional support or adaptation )
• Customize View/ The third party View The adaptation process is simple ( Just write a binding adapter )
• No need to use LayoutInflater.Factory

Define skin

The following code defines three skins Default,Day,Night, By calling AppTheme.update(theme) You can complete the dynamic skin change

The skin here only supports ColorStateList, Because most scenes just ColorStateList That's enough

If you want to ,Drawable/String And other resources can support

data class Theme(
    val content: Int,
    val background: Int,
)

object Themes {
    
    val Default = Theme(Color.RED, Color.GRAY)
    val Day = Theme(Color.BLACK, Color.WHITE)
    val Night = Theme(Color.MAGENTA, Color.BLACK)
}

object AppTheme {
    
    val background = MutableLiveData<ColorStateList>()
    val content = MutableLiveData<ColorStateList>()

    init {
    
        update(Themes.Default)
    }

    fun update(theme: Theme) {
    
        background.value = ColorStateList.valueOf(theme.background)
        content.value = ColorStateList.valueOf(theme.content)
    }
}   

Use skins in layout files

Directly introducing AppTheme Single case ,livedata Will be associated with the lifecycle , Don't worry about resource release

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools">

    <data>

        <import type="ezy.demo.theme.AppTheme" />
    </data>

    <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:background="#EEEEEE">

        <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" app:background="@{AppTheme.INSTANCE.background}" android:gravity="center" android:orientation="vertical">

            <SeekBar android:layout_width="300dp" android:layout_height="wrap_content" android:max="100" android:progress="50" android:progressBackgroundTint="@{AppTheme.INSTANCE.background}" android:progressTint="@{AppTheme.INSTANCE.content}" android:thumb="@android:drawable/ic_btn_speak_now" android:thumbTint="@{AppTheme.INSTANCE.content}" />

            <TextView android:layout_width="100dp" android:layout_height="100dp" android:layout_margin="10dp" android:gravity="center" android:text="Hello World!" android:textColor="@{AppTheme.INSTANCE.content}" app:drawableTint="@{AppTheme.INSTANCE.content}" app:drawableTopCompat="@android:drawable/ic_media_pause" />

            <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal">

                <TextView android:id="@+id/btn_default" android:layout_width="100dp" android:layout_height="40dp" android:gravity="center" android:text="Default" android:textColor="@{AppTheme.INSTANCE.content}" />

                <TextView android:id="@+id/btn_day" android:layout_width="100dp" android:layout_height="40dp" android:gravity="center" android:text="Day" android:textColor="@{AppTheme.INSTANCE.content}" />

                <TextView android:id="@+id/btn_night" android:layout_width="100dp" android:layout_height="40dp" android:gravity="center" android:text="Night" android:textColor="@{AppTheme.INSTANCE.content}" />
            </LinearLayout>
        </LinearLayout>

    </FrameLayout>

</layout>

Associated lifecycle

actually Databinding+ObserverableField It can also realize skin change without restart , but ObserverableField Cannot associate lifecycle , Resource release is more troublesome

class MainActivity : AppCompatActivity() {
    

    override fun onCreate(savedInstanceState: Bundle?) {
    
        super.onCreate(savedInstanceState)

        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)

        //  Associated lifecycle 
        binding.lifecycleOwner = this

        binding.btnDefault.setOnClickListener {
     AppTheme.update(Themes.Default) }
        binding.btnDay.setOnClickListener {
     AppTheme.update(Themes.Day) }
        binding.btnNight.setOnClickListener {
     AppTheme.update(Themes.Night) }

    }
}

Extend supported skin properties

DataBinding It already supports a large number of properties , Some are not supported , You have to implement it yourself

Actually, it's just writing Binder Adapter , It's almost the same to support third-party controls or custom controls , It's simple

Here are some examples

@SuppressLint("RestrictedApi")
@BindingMethods(
    BindingMethod(type = ImageView::class, attribute = "tint", method = "setImageTintList")
)
object ThemeAdapter {
    
    @BindingAdapter("background")
    @JvmStatic
    fun adaptBackground(view: View, value: ColorStateList?) {
    
        view.setBackgroundColor(Color.WHITE)
        view.backgroundTintList = value 
    }
    @BindingAdapter("drawableTint")
    @JvmStatic
    fun adaptDrawableTint(view: TextView, value: ColorStateList?) {
    
        if (view is AppCompatTextView) {
    
            view.supportCompoundDrawablesTintList = value
        }
    } 
    @BindingAdapter("android:progressBackgroundTint")
    @JvmStatic
    fun adaptProgressBackgroundTint(view: SeekBar, value: ColorStateList?) {
    
        view.progressBackgroundTintList = value 
    }
}

Demo

github.com/czy1121/The…