Browse Source

Add README content for corner radius, fonts, etc.

Aidan Follestad 6 years ago
parent
commit
8a19688d8f

+ 53 - 0
README.md

@@ -29,6 +29,10 @@ versions will no longer receive support.**
 10. [Checkbox Prompts](#checkbox-prompts)
 11. [Custom Views](#custom-views)
 12. [Miscellaneous](#miscellaneous)
+14. [Theming](#theming)
+    1. [Light and Dark](#light-and-dark)
+    2. [Corner Radius](#corner-radius)
+    3. [Fonts](#fonts)
 
 # Table of Contents - Input
 
@@ -573,6 +577,55 @@ MaterialDialog(this)
   .show()
 ```
 
+## Theming
+
+Google's newer mindset with Material Theming (vs the 2014 mindset) is flexible. If you take their 
+["Crane example"](https://material.io/design/components/dialogs.html#theming), you see that they 
+change fonts, corner rounding, etc. 
+
+### Light and Dark
+
+Light and dark theming is automatic based on your app's theme (basically whether `android:textColorPrimary` 
+is more light or more dark):
+
+<img src="https://raw.githubusercontent.com/afollestad/material-dialogs/master/art/lightanddarkthemes.jpg" width="400px" />
+
+### Corner Radius
+
+Corner radius is the rounding of dialog corners:
+
+<img src="https://raw.githubusercontent.com/afollestad/material-dialogs/master/art/cornerradius.png" width="200px" />
+
+it can be changed with an attribute in your app theme. It defaults to 2dp:
+
+```xml
+<style name="AppTheme.Custom" parent="Theme.AppCompat">
+
+  <item name="md_corner_radius">16dp</item>
+    
+</style>
+```
+
+### Fonts
+
+This library supports using custom fonts, powered by the Support libraries `ResourcesCompat` class. 
+With raw font files or XML font files in your `/res/font` folder, you can use them in Material Dialogs 
+using attributes in your app's theme.
+
+```xml
+<style name="AppTheme.Custom" parent="Theme.AppCompat">
+
+  <item name="md_font_title">@font/your_font</item>
+  <item name="md_font_body">@font/your_font</item>
+  <item name="md_font_button">@font/your_font</item>
+    
+</style>
+```
+
+See the "Custom Theme" example in the sample project (open the overflow menu for the theme switcher).
+
+<img src="https://raw.githubusercontent.com/afollestad/material-dialogs/master/art/customtheme.png" width="200px" />
+
 ---
 
 # Input

BIN
art/cornerradius.png


BIN
art/customtheme.png


BIN
art/lightanddarkthemes.jpg


+ 31 - 5
sample/src/main/java/com/afollestad/materialdialogssample/MainActivity.kt

@@ -84,8 +84,12 @@ class MainActivity : AppCompatActivity() {
 
   companion object {
     const val KEY_PREFS = "prefs"
-    const val KEY_DARK_THEME = "dark_theme"
+    const val KEY_THEME = "KEY_THEME"
     const val KEY_DEBUG_MODE = "debug_mode"
+
+    const val LIGHT = "light"
+    const val DARK = "dark"
+    const val CUSTOM = "custom"
   }
 
   private var debugMode = false
@@ -95,7 +99,11 @@ class MainActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     prefs = getSharedPreferences(KEY_PREFS, MODE_PRIVATE)
     setTheme(
-        if (prefs.boolean(KEY_DARK_THEME)) R.style.AppTheme_Dark else R.style.AppTheme
+        when (prefs.getString(KEY_THEME, LIGHT)) {
+          DARK -> R.style.AppTheme_Dark
+          CUSTOM -> R.style.AppTheme_Custom
+          else -> R.style.AppTheme
+        }
     )
     debugMode = prefs.boolean(KEY_DEBUG_MODE, false)
 
@@ -797,8 +805,13 @@ class MainActivity : AppCompatActivity() {
 
   override fun onCreateOptionsMenu(menu: Menu): Boolean {
     menuInflater.inflate(R.menu.main, menu)
+    val theme = prefs.getString(KEY_THEME, LIGHT)
+    menu.findItem(R.id.light_theme)
+        .isChecked = theme == LIGHT
     menu.findItem(R.id.dark_theme)
-        .isChecked = prefs.boolean(KEY_DARK_THEME)
+        .isChecked = theme == DARK
+    menu.findItem(R.id.custom_theme)
+        .isChecked = theme == CUSTOM
     menu.findItem(R.id.debug_mode)
         .isChecked = debugMode
     return super.onCreateOptionsMenu(menu)
@@ -806,10 +819,23 @@ class MainActivity : AppCompatActivity() {
 
   override fun onOptionsItemSelected(item: MenuItem): Boolean {
     when (item.itemId) {
+      R.id.light_theme -> {
+        prefs.apply {
+          putString(KEY_THEME, LIGHT)
+        }
+        recreate()
+        return true
+      }
       R.id.dark_theme -> {
-        val newIsDark = !prefs.boolean(KEY_DARK_THEME)
         prefs.apply {
-          putBoolean(KEY_DARK_THEME, newIsDark)
+          putString(KEY_THEME, DARK)
+        }
+        recreate()
+        return true
+      }
+      R.id.custom_theme -> {
+        prefs.apply {
+          putString(KEY_THEME, CUSTOM)
         }
         recreate()
         return true

BIN
sample/src/main/res/font/raleway_bold.ttf


BIN
sample/src/main/res/font/raleway_medium.ttf


BIN
sample/src/main/res/font/raleway_semibold.ttf


+ 14 - 8
sample/src/main/res/menu/main.xml

@@ -1,15 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
 <menu
     xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-  <item
-      android:id="@+id/dark_theme"
-      android:checkable="true"
-      android:title="Dark Theme"
-      tools:ignore="HardcodedText"/>
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:ignore="HardcodedText">
   <item
       android:id="@+id/debug_mode"
       android:checkable="true"
-      android:title="Debug Mode"
-      tools:ignore="HardcodedText"/>
+      android:title="Debug Mode"/>
+  <group android:checkableBehavior="single">
+    <item
+        android:id="@+id/light_theme"
+        android:title="Light Theme"/>
+    <item
+        android:id="@+id/dark_theme"
+        android:title="Dark Theme"/>
+    <item
+        android:id="@+id/custom_theme"
+        android:title="Custom Theme"/>
+  </group>
 </menu>

+ 9 - 4
sample/src/main/res/values/colors.xml

@@ -1,9 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-  <!-- http://www.google.com/design/spec/style/color.html#color-color-palette -->
-  <color name="primary">#7B1FA2</color>
-  <color name="primaryDark">#6A1B9A</color>
-  <color name="accent">#DD2C00</color>
+  <!-- https://material.io/design/color/the-color-system.html#tools-for-picking-colors -->
+
+  <color name="primary">#6002ee</color>
+  <color name="primaryDark">#0000ba</color>
+  <color name="accent">#9c47ff</color>
+
+  <color name="primary_custom">#26c6da</color>
+  <color name="primaryDark_custom">#0095a8</color>
+  <color name="accent_custom">#6ff9ff</color>
 
 </resources>

+ 12 - 0
sample/src/main/res/values/styles.xml

@@ -13,6 +13,18 @@
     <item name="colorAccent">@color/accent</item>
   </style>
 
+  <style name="AppTheme.Custom" parent="Theme.AppCompat.Light">
+    <item name="colorPrimary">@color/primary_custom</item>
+    <item name="colorPrimaryDark">@color/primaryDark_custom</item>
+    <item name="colorAccent">@color/accent_custom</item>
+
+    <!-- Dialog Theming attributes -->
+    <item name="md_corner_radius">16dp</item>
+    <item name="md_font_title">@font/raleway_bold</item>
+    <item name="md_font_body">@font/raleway_medium</item>
+    <item name="md_font_button">@font/raleway_semibold</item>
+  </style>
+
   <style name="SampleHeader">
     <item name="android:layout_width">match_parent</item>
     <item name="android:layout_height">wrap_content</item>