![\"daynight-theme-android\"](\"http:\/\/blog.robotqa.com\/wp-content\/uploads\/2024\/06\/2024061109563124.png\")
\n<\/p>\nThe AppCompat DayNight theme is a part of the AndroidX library, enabling your app to automatically switch between light and dark themes based on the user’s device settings or preferences. This feature helps in creating a more dynamic and user-friendly UI, providing better readability in various lighting conditions. In this blog, we will walk through the steps to implement a simple Android UI using the AppCompat DayNight theme.\n
<\/p>\n
build.gradle<\/code> file.\n<\/p>\n
Step 1: Add Dependencies<\/strong><\/h4>\nOpen your build.gradle<\/code> file and add the AndroidX AppCompat dependency:\ndependencies {\n implementation 'androidx.appcompat:appcompat:1.3.1'\n implementation 'androidx.core:core-ktx:1.6.0'\n}\n<\/pre>\n<\/p>\n
Step 2: Define the Theme in styles.xml<\/strong><\/h4>\nOpen your res\/values\/styles.xml<\/code> file and define the AppCompat DayNight theme:\n<resources>\n <!-- Base application theme -->\n <style name=\"AppTheme\" parent=\"Theme.AppCompat.DayNight.DarkActionBar\">\n <!-- Customize your theme here -->\n <item name=\"colorPrimary\">@color\/purple_500<\/item>\n <item name=\"colorPrimaryDark\">@color\/purple_700<\/item>\n <item name=\"colorAccent\">@color\/teal_200<\/item>\n <\/style>\n<\/resources>\n<\/pre>\nThis setup ensures that your application uses the DayNight theme with a dark action bar by default.\n<\/p>\n
Example: Creating a Simple UI with Toggle for DayNight Theme<\/strong><\/h3>\nLet\u2019s create a simple UI that includes a toggle button to switch between day and night modes manually.\n<\/p>\n
Step 3: Define the Layout<\/strong><\/h4>\nCreate an XML layout file (activity_main.xml<\/code>) with the following content:\n<LinearLayout\n xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\"\n android:padding=\"16dp\"\n android:gravity=\"center\">\n\n <TextView\n android:id=\"@+id\/greetingTextView\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Hello, World!\"\n android:textSize=\"24sp\"\n android:layout_marginBottom=\"24dp\"\/>\n\n <Button\n android:id=\"@+id\/toggleThemeButton\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Toggle Theme\"\/>\n\n<\/LinearLayout>\n<\/pre>\n<\/p>\n
Step 4: Initialize in Activity<\/strong><\/h4>\nIn your MainActivity.java<\/code> or MainActivity.kt<\/code> file, initialize the views and add functionality to toggle the theme.\n\nJava\npackage com.example.daynighttheme;\n\nimport android.content.SharedPreferences;\nimport android.os.Bundle;\nimport android.widget.Button;\nimport android.widget.TextView;\nimport androidx.appcompat.app.AppCompatActivity;\nimport androidx.appcompat.app.AppCompatDelegate;\n\npublic class MainActivity extends AppCompatActivity {\n\n @Override\n protected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n setContentView(R.layout.activity_main);\n\n TextView greetingTextView = findViewById(R.id.greetingTextView);\n Button toggleThemeButton = findViewById(R.id.toggleThemeButton);\n\n \/\/ Load the saved theme preference\n SharedPreferences sharedPreferences = getSharedPreferences(\"ThemePref\", MODE_PRIVATE);\n boolean isNightMode = sharedPreferences.getBoolean(\"NightMode\", false);\n\n if (isNightMode) {\n AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);\n } else {\n AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);\n }\n\n toggleThemeButton.setOnClickListener(v -> {\n boolean nightMode = (AppCompatDelegate.getDefaultNightMode() == AppCompatDelegate.MODE_NIGHT_YES);\n if (nightMode) {\n AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);\n saveThemePreference(false);\n } else {\n AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);\n saveThemePreference(true);\n }\n });\n }\n\n private void saveThemePreference(boolean isNightMode) {\n SharedPreferences.Editor editor = getSharedPreferences(\"ThemePref\", MODE_PRIVATE).edit();\n editor.putBoolean(\"NightMode\", isNightMode);\n editor.apply();\n }\n}\n<\/pre>\nKotlin\npackage com.example.daynighttheme\n\nimport android.content.SharedPreferences\nimport android.os.Bundle\nimport android.widget.Button\nimport android.widget.TextView\nimport androidx.appcompat.app.AppCompatActivity\nimport androidx.appcompat.app.AppCompatDelegate\n\nclass MainActivity : AppCompatActivity() {\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n val greetingTextView: TextView = findViewById(R.id.greetingTextView)\n val toggleThemeButton: Button = findViewById(R.id.toggleThemeButton)\n\n \/\/ Load the saved theme preference\n val sharedPreferences: SharedPreferences = getSharedPreferences(\"ThemePref\", MODE_PRIVATE)\n val isNightMode = sharedPreferences.getBoolean(\"NightMode\", false)\n\n if (isNightMode) {\n AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)\n } else {\n AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)\n }\n\n toggleThemeButton.setOnClickListener {\n val nightMode = AppCompatDelegate.getDefaultNightMode() == AppCompatDelegate.MODE_NIGHT_YES\n if (nightMode) {\n AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)\n saveThemePreference(false)\n } else {\n AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)\n saveThemePreference(true)\n }\n }\n }\n\n private fun saveThemePreference(isNightMode: Boolean) {\n val editor: SharedPreferences.Editor = getSharedPreferences(\"ThemePref\", MODE_PRIVATE).edit()\n editor.putBoolean(\"NightMode\", isNightMode)\n editor.apply()\n }\n}\n<\/pre>\n\n<\/p>\n