docs(all): add more images and examples (#13635)

* docs(all): add more images and examples

* note about android dark mode images

* note about android dark mode images

apidoc/Titanium/UI/Android/CardView.yml

@@ -2,6 +2,10 @@
 name: Titanium.UI.Android.CardView
 summary: CardView provides a layout container with rounded corners and a shadow indicating the view is elevated.
 description: |
+    | Android |
+    | ------- |
+    | ![Android](./cardview_android.png) |
+
     Use a CardView to layout content that:
 
       * Comprises multiple data types
@@ -35,7 +39,7 @@ properties:
     since: "5.1.2"
 
   - name: elevation
-    summary: Elevation for CardView. 
+    summary: Elevation for CardView.
     type: Number
     since: "5.1.2"
 
@@ -85,6 +89,17 @@ properties:
     since: "5.1.2"
 
 examples:
+  - title: Simple Alloy example
+    example: |
+        ``` xml
+        <Alloy>
+            <Window >
+                <CardView height="100" width="200">
+                  <Label text="CardView example"/>
+                </CardView>
+            </Window>
+        </Alloy>
+        ```
   - title: CardView used in a ScrollView
     example: |
         The following example creates a CardView used in a ScrollView.

apidoc/Titanium/UI/Android/DrawerLayout.yml

@@ -2,6 +2,10 @@
 name: Titanium.UI.Android.DrawerLayout
 summary: A panel that displays the app's main navigation options on the left edge of the screen.
 description: |
+    | Android |
+    | ------- |
+    | ![Android](./drawerlayout_android.png) |
+
     DrawerLayout acts as a top-level container for window content that allows for interactive "drawer"
     views to be pulled out from one or both vertical edges of the window.
 

apidoc/Titanium/UI/Android/ProgressIndicator.yml

@@ -3,6 +3,10 @@ name: Titanium.UI.Android.ProgressIndicator
 summary: A progress dialog or a horizontal progress bar in the title of the window.
 
 description:  |
+    | Android |
+    | ------- |
+    | ![Android](./progressIndicator_android.png) |
+
     A progress indicator can be used to show the progress of an operation in the UI to let the
     user know that some action is taking place. It is used to indicate an ongoing activity of
     determinate or indeterminate length.

apidoc/Titanium/UI/Android/SearchView.yml

@@ -2,15 +2,19 @@
 name: Titanium.UI.Android.SearchView
 summary: A specialized text field for entering search text.
 description: |
+    | Android |
+    | ------- |
+    | ![Android](./searchview_android.png) |
+
     `SearchView` provides a user interface to enter a search query and submit a request to a search provider.
-    
+
     Search views are most commonly used for filtering the rows in a [TableView](Titanium.UI.TableView).
-    Similar to [SearchBar](Titanium.UI.SearchBar), you can add a search view to a table view by setting the table view's 
-    [search](Titanium.UI.TableView.search) property. A search view can be used without a `TableView`. 
+    Similar to [SearchBar](Titanium.UI.SearchBar), you can add a search view to a table view by setting the table view's
+    [search](Titanium.UI.TableView.search) property. A search view can be used without a `TableView`.
 
     You can also use a `SearchView` object as the <Titanium.UI.ListView.searchView>
     property of a [ListView](Titanium.UI.ListView) object.
-    
+
     You can also add `SearchView` to an `ActionBar` as a view (see example below).
 
     Use the <Titanium.UI.Android.createSearchView> method or **`<SearchView>`** Alloy element to create
@@ -46,7 +50,7 @@ events:
 
   - name: focus
     summary: Fired when the search view gains focus.
-    
+
   - name: submit
     summary: If the search query is not empty, fired when the search button is clicked on soft keyboard
 
@@ -75,24 +79,24 @@ properties:
     description: |
        This value cannot be set until after the search view is created.
     type: String
-    
+
   - name: iconified
     summary: Iconifies or expands the search view
     description: see [Android Documentation](https://developer.android.com/reference/android/widget/SearchView.html#setIconified(boolean)) for more details.
     type: Boolean
     default: undefined
-  
+
   - name: iconifiedByDefault
     summary: Sets the default or resting state of the search view
     description: see [Android Documentation](https://developer.android.com/reference/android/widget/SearchView.html#setIconifiedByDefault(boolean)) for more details.
     type: Boolean
     default: true
-  
+
   - name: submitEnabled
     summary: Whether to display the submit button when necessary or never display.
     type: Boolean
     default: undefined
-         
+
 examples:
 
   - title: Search View for Table in Action Bar
@@ -103,7 +107,6 @@ examples:
 
         ``` js
         var win = Ti.UI.createWindow({
-            backgroundColor: 'blue',
             fullscreen: false
         });
 

apidoc/Titanium/UI/Android/Snackbar.yml

@@ -2,6 +2,10 @@
 name: Titanium.UI.Android.Snackbar
 summary: Snackbars provide brief messages about app processes at the bottom of the screen.
 description: |
+    | Android |
+    | ------- |
+    | ![Android](./snackbar_android.png) |
+
     For design guidelines, see
     [Material design: Snackbars](https://material.io/components/snackbars)
 since: "11.1.0"

apidoc/Titanium/UI/ButtonBar.yml

@@ -2,13 +2,17 @@
 name: Titanium.UI.ButtonBar
 summary: An iOS button bar component.
 description: |
+    | Android | iOS |
+    | ------- | --- |
+    | ![Android](./buttonbar_android.png) |  |
+
     The button bar is a set of buttons joined into a single control.
     On iOS, you can set up the buttons with either a title or image, but not both.
     On Android, you can set up the buttons with a title, image, or both.
 
     Use the <Titanium.UI.createButtonBar> method or **`<ButtonBar>`** Alloy element to create a button bar.
 
-    The [TabbedBar](Titanium.UI.iOS.TabbedBar) control is a button bar where the 
+    The [TabbedBar](Titanium.UI.iOS.TabbedBar) control is a button bar where the
     last selected button mantains a pressed or selected state. The following discussion
     applies to both button bar and tabbed bar.
 extends: Titanium.UI.View
@@ -20,10 +24,10 @@ excludes:
     properties: [children]
     methods: [add, remove, removeAllChildren, replaceAt]
 
-events: 
+events:
   - name: click
     summary: Fired when a button is clicked.
-    properties: 
+    properties:
       - name: index
         summary: Index of the clicked button.
         type: Number
@@ -32,17 +36,17 @@ properties:
     deprecated:
         since: "8.0.0"
         notes: |
-            This property has been deprecated in Titanium SDK 8.0.0 as this property has no effect 
+            This property has been deprecated in Titanium SDK 8.0.0 as this property has no effect
             and will be removed in SDK 9.0.0.
     summary: Index of the currently selected button.
     type: Number
   - name: labels
-    summary: Array of labels for the button bar. 
+    summary: Array of labels for the button bar.
     description: |
         The labels can be specified either using an array of strings, in which case
         each string defines the title for a button, or using an array of simple
         dictionary objects, <BarItemType>, which can specify title, image, width and
-        enabled state for each button. 
+        enabled state for each button.
 
         In Alloy you specify the labels with a nested `<Labels>` element that contains one or more `<Label>` elements.
 

apidoc/Titanium/UI/Label.yml

@@ -1,7 +1,12 @@
 ---
 name: Titanium.UI.Label
 summary: A text label, with an optional background image.
-description: Use the <Titanium.UI.createLabel> method or **`<Label>`** Alloy element to create a label.
+description: |
+    | Android | iOS |
+    | ------- | --- |
+    | ![Android](./label_andorid.png) |  |
+
+    Use the <Titanium.UI.createLabel> method or **`<Label>`** Alloy element to create a label.
 extends: Titanium.UI.View
 since: "0.8"
 excludes:
@@ -275,6 +280,18 @@ events:
     since: {iphone: "3.2.0", ipad: "3.2.0", android: "4.0.0"}
 
 examples:
+  - title: Simple Alloy XML Example
+    example: |
+        Simple label in a Window
+
+        ``` xml
+        <Alloy>
+            <Window>
+                <Label text="Just a label with text"/>
+            </Window>
+        </Alloy>
+        ```
+
   - title: Basic Label
     example: |
         Create a center-aligned label with a text shadow and specified-size font, and another

apidoc/Titanium/UI/Notification.yml

@@ -2,8 +2,12 @@
 name: Titanium.UI.Notification
 summary: A toast notification.
 description: |
+    | Android | iOS |
+    | ------- | --- |
+    | ![Android](./toast_android.png) |  |
+
     A toast notification is an unobtrusive, pop-up notification that does not
-    block the UI. Use the <Titanium.UI.createNotification> method or **`<Notification>`** Alloy element 
+    block the UI. Use the <Titanium.UI.createNotification> method or **`<Notification>`** Alloy element
     to create a Toast notification.
 
     On Android, by default, a toast notification appears centered on the bottom half of the screen.
@@ -12,7 +16,7 @@ description: |
 extends: Titanium.Proxy
 since: "0.8"
 platforms: [android]
-examples: 
+examples:
   - title: Simple Toast Notification
     example: |
         The simplest use case is also the most common.
@@ -45,10 +49,10 @@ examples:
         ```
 
 methods:
-- name: show 
+- name: show
   summary: Show the notification.
 properties:
-  - name: message 
+  - name: message
     summary: Notification text to display.
     type: String
   - name: duration
@@ -71,14 +75,14 @@ properties:
     type: Number
     default: 0
   - name: horizontalMargin
-    summary: Horizontal placement of the notification, *as a fraction of the screen width*. 
-    description: Useful values range from -0.5 (far left) to 0.5 (far right). A value 
+    summary: Horizontal placement of the notification, *as a fraction of the screen width*.
+    description: Useful values range from -0.5 (far left) to 0.5 (far right). A value
         of zero indicates default placement.
     type: Number
     default: 0
   - name: verticalMargin
     summary: Vertical placement of the notifcation, *as a fraction of the screen height*.
-    description: Useful values range from -0.5 (top) to 0.5 (bottom). A value 
+    description: Useful values range from -0.5 (top) to 0.5 (bottom). A value
         of zero indicates default placement.
     type: Number
     default: 0

apidoc/Titanium/UI/OptionBar.yml

@@ -3,6 +3,10 @@ name: Titanium.UI.OptionBar
 
 summary: A bar of selectable buttons where only 1 can be selected at a time.
 description: |
+    | Android | iOS |
+    | ------- | --- |
+    | ![Android](./optionbar_android.png) |  |
+
     This is a view which shows a list of options where only 1 option is selectable by the user.
 
     On iOS, this displays a