Motywy aktywności (theme activity)

Motyw (Theme) w systemie Android są podobnie zorganizowane jak style. Standardowo pliki XML motywów zapisywane są w lokalizacji res/values. Motyw jest zbiorem atrybutów, który jest zastosowany do całej aplikacji, hierarchii widoków. Motyw może nadać styl elementom takim jak pasek stanu, tło okna. Motyw często określa wygląd aplikacji w trybie dzień/ noc. Przypisanie motywu do aplikacji lub pojedynczej aktywności rozbudowanej aplikacji odbywa się w pliku manifestu.

Zastosowanie motywu do całej aplikacji wymaga poniżej konstrukcji w pliku manifestu

Wskazówka:


<?xml version="1.0" encoding="utf-8"?>
<manifest    >
   <application android:theme="@style/Theme.GlownyMotyw"   >
   </application>
</manifest>

Dla konkretnej pojedynczej aktywności w pliku manifestu składnia jest podobna, ale zastosowanie wymaga użycia jej w elemencie potomnym <activity> elementu <application>

Wskazówka:


<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.DrugiMotyw" ... >
        </activity>
    </application>
</manifest>

Zasoby kolorów

W pliku zasobów kolorów (colors.xml) dodamy kilka różnych kolorów przy pomocy, których zdefiniujemy dwa rożne motywy aplikacji

Wskazówka:


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="czerwony">#F80303</color>
    <color name="niebieski1">#00B0FF</color>
    <color name="niebieski2">#0356FB</color>
    <color name="niebieski3">#02076A</color>
    <color name="pomaranczowy">#FF9800</color>
    <color name="zielony">#89FF00</color>
    <color name="zolty1">#FFEB3B</color>
    <color name="zolty2">#FDBE01</color>
    <color name="zolty3">#FFEB3B</color>
</resources>

Definicja głównych elementów motywu (theme) aktywności

W naszej aplikacji będziemy motywem zmieniać wybrane atrybuty paska stanu, paska narzędziowego, obszaru okna, paska nawigacyjnego. Zmiany wykonamy poprzez przypisanie kolorów. W tym celu w pliku XML z zapisanym motywem należy odwołać się do poniższych atrybutów colorPrimaryDark, colorPrimary, android:textColorPrimary itp. Patrz poniższa ilustracja

Kotlin Theme Android Studio

Tworząc nowy motyw (Theme) widoku dobrze jest wskazać dziedziczenie po istniejących motywach zapisanych w bibliotece (Android Support Library). Te dziedziczenie ułatwi podgląd w edytorze tworzenia widoku. Każdy z tak zdefiniowanych motywów pojawi się na liście wyboru podglądu widoku aktywności.

nowy motyw Kotlin Theme Android Studio

Wybierz filtr motywów

filtr motywów Kotlin Theme Android Studio

Uwaga. Lista motywów zdefiniowanych w projekcie zależy od ich ilości, pod warunkiem że dziedziczą po dowolnym motywie (theme)

Tworzymy plik XML dla zasobów tworzonych motywów.

plik XML Kotlin Theme Android Studio

W pliku definiujemy nowe dwa motywy. Oba motywy będą dziedziczyć po Theme.AppCompat. Poniżej przykładowa zawartość

Wskazówka:


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Motyw.Niebieski" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/niebieski1</item>
        <item name="colorPrimaryDark">@color/pomaranczowy</item>
        <item name="android:textColorPrimary">@color/zielony</item>
        <item name="android:windowBackground">@color/niebieski3</item>
        <item name="android:navigationBarColor">@color/czerwony</item>
    </style>
    <style name="Motyw.Zolty" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/zolty1</item>
        <item name="colorPrimaryDark">@color/czerwony</item>
        <item name="android:textColorPrimary">@color/niebieski3</item>
        <item name="android:windowBackground">@color/zolty3</item>
        <item name="android:navigationBarColor">@color/zielony</item>
        <item name="android:textColor">@color/czerwony</item>
    </style>
</resources>

Przechodzimy do pliku manifestu aplikacji i, jako główny motyw ustawiamy jeden z utworzonych. Patrz linijka kodu android:theme="@style/Motyw.Niebieski"

Zawartość pliku manifestu

Wskazówka:


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

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Motyw.Niebieski"
        tools:targetApi="31">
        <activity
            android:name=".OknoGlowne"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

W edytorze podglądu widoku okna aktywność nie zaobserwujesz zmian pasków. Po skompilowaniu aplikacji na wirtualne urządzenie zmiany będą widoczne.

nowy motyw Kotlin Theme Android Studio

Dynamiczna zmiana motywu aplikacji

Motyw (Theme) aplikacji może również zmienić dynamicznie , czyli w czasie jej działania na przykład po kliknięciu w przycisk. Do widoku aktywności damy dwa komponenty typu Button

dynamiczna zmiana Kotlin Theme Android Studio

Przy zmianie motywu wykorzystamy jedną z metod cyklu życia aplikacji- onReasume(). Metoda ta jest odpowiedzialna z wznowienie aktywności bieżącej aplikacji na przykład po odebraniu połączenia telefonicznego lub innej interakcji z użytkownikiem. W tym przypadki interakcją będzie każdorazowe kliknięcie w przycisk.

W pliku głównej klasy aktywności zdefiniujemy dwie zmienne typu Int do przechowywania stanu wyboru motywu

Wskazówka:


import androidx.appcompat.app.AppCompatActivity

private var idMotyw: Int=0
private var idMotywAktywny:Int=0

class OknoGlowne : AppCompatActivity() {

Dodamy funkcję zmieniającą motyw. Parametrem funkcji będzie identyfikator wybranej opcji
fun UstawMotyw(id:Int){
    when(id){
        0->setTheme(R.style.Motyw_Niebieski)
        else->setTheme(R.style.Motyw_Zolty)
    }
}

Obsługę klikania w przyciski wykonamy przez słuchacza kliknięć. Do metody onCreate() wprowadzimy poniższy kod

Wskazówka:


override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    UstawMotyw(idMotywAktywny)
    setContentView(R.layout.activity_okno_glowne)
    val bt1=findViewById<Button>(R.id.button1)
    bt1.setOnClickListener{
        idMotyw=0//R.style.Motyw_Niebieski
        //wywołaj stan wznowienia
        recreate()
    }
    val bt2=findViewById<Button>(R.id.button2)
    bt2.setOnClickListener{
        idMotyw=1//R.style.Motyw_Zolty
        //wywołaj stan wznowienia
        recreate()
    }
}

Zauważ, że po każdorazowym kliknięciu jest wywoływana metoda recreate(). Jest to wbudowana funkcja wywołując odtwarzanie aktywności poprzez cykl życia aplikacji onReasume().

Nadpisujemy metodę onReasume()

Wskazówka:


override fun onResume() {
    super.onResume()
    if(idMotywAktywny != idMotyw) {
        //ustaw id aktywnego motywu
        idMotywAktywny= idMotyw
        recreate()
    }
}

I to tyle w kodowaniu. Pełny kod po zmianach wygląda jak poniżej

Wskazówka:


import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

private var idMotyw: Int=0
private var idMotywAktywny:Int=0

class OknoGlowne : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		UstawMotyw(idMotywAktywny)
		setContentView(R.layout.activity_okno_glowne)
		val bt1=findViewById<Button>(R.id.button1)
		bt1.setOnClickListener{
			idMotyw=0//R.style.Motyw_Niebieski
			//wywołaj stan wznowienia
			recreate()
		}
		val bt2=findViewById<Button>(R.id.button2)
		bt2.setOnClickListener{
			idMotyw=1//R.style.Motyw_Zolty
			//wywołaj stan wznowienia
			recreate()
		}
	}

	fun UstawMotyw(id:Int){
		when(id){
			0->setTheme(R.style.Motyw_Niebieski)
			else->setTheme(R.style.Motyw_Zolty)
		}
	}
    //nadpisz stan wznowienia
	override fun onResume() {
		super.onResume()
		if(idMotywAktywny != idMotyw) {
			//ustaw id aktywnego motywu
			idMotywAktywny= idMotyw
			recreate()
		}
	}
}

Po uruchomieniu aplikacji na wirtualnym emulatorze, dynamiczne zmiany motywu prezentują się jak poniżej

zmiana Theme Kotlin Android Studio

Raczej nie są to motywy zbyt estetyczne, ważne że dynamiczna zmiana motywu działa. Kolorystykę, kształty przycisków itp. można dopracować i otrzymać bardzo estetyczny niepowtarzalny graficzny styl tworzonej aplikacji.

Układ okresowy- kod qr
Układ okresowy

Układ okresowy pierwiastków- darmowa aplikacja na Androida

Pobierz ze sklepu Google Play
Alkomat- wirtualny test kod qr
Alkomat- wirtualny test

Alkomat- darmowa aplikacja na Androida

Pobierz ze sklepu Google Play
Taklarz- olinowanie stałe kod qr
Olinowanie stałe- kalkulator średnic

Olinowanie stałe- darmowa aplikacja na Androida

Pobierz ze sklepu Google Play
przepis na gogfry

Przepis na gofry

zobacz
przepis na bitą śmietanę

Przepis na bitą śmietanę

zobacz