# Customize iOS Sender UI You can customize [Cast widgets](https://developers.google.com/cast/docs/ios_sender/integrate#the_cast_ux_widgets) by setting the colors, styling the buttons, text, and thumbnail appearance, and by choosing the types of buttons to display. ## Customize widget theme The Cast framework widgets supports the [Apple UIAppearance Protocol in UIKit](https://developer.apple.com/reference/uikit/uiappearance) to change the appearance of the widgets across your app, such as the position or border of a button. Use this protocol to style the Cast framework widgets to match an existing apps styling. ### Cast button example Swift ```swift GCKUICastButton.appearance().tintColor = UIColor.gray ``` Objective-C ```objective-c [GCKUICastButton appearance].tintColor = [UIColor grayColor]; ``` ## Customize widget directly Customize a widget directly using the properties of its superclass. For example, it's common to customize the [`GCKUICastButton`](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_cast_button) color using the [`tintColor:`](https://developer.apple.com/documentation/uikit/uibutton/1624025-tintcolor) property. ### Cast button example Swift ```swift castButton.tintColor = UIColor.gray ``` Objective-C ```objective-c castButton.tintColor = [UIColor grayColor]; ``` ## Choose controller buttons Both the expanded controller class ([`GCKUIExpandedMediaControlsViewController`](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_expanded_media_controls_view_controller)) and the mini controller class ([`GCKUIMiniMediaControlsViewController`](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_mini_media_controls_view_controller)) contain a button bar, and clients can configure which buttons are presented on those bars. This is achieved by both classes conforming to [`GCKUIMediaButtonBarProtocol`](https://developers.google.com/cast/docs/reference/ios/protocol_g_c_k_u_i_media_button_bar_protocol-p). The mini controller bar has 3 configurable slots for buttons: SLOT SLOT SLOT 1 2 3 The expanded controller bar has a permanent play/pause toggle button in the middle of the bar plus 4 configurable slots: SLOT SLOT PLAY/PAUSE SLOT SLOT 1 2 BUTTON 3 4 Your app can get a reference to the expanded controller with the `-[defaultExpandedMediaControlsViewController]` property of [`GCKCastContext`](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_cast_context) and can create a mini controller using `-[createMiniMediaControlsViewController]`. Each slot can contain either a framework button, a custom button, or be empty. The list of framework control buttons are defined as: | Button Type | Description | |---|---| | `GCKUIMediaButtonTypeNone` | Do not place a button in this slot | | `GCKUIMediaButtonTypeCustom` | Custom button | | `GCKUIMediaButtonTypePlayPauseToggle` | Toggles between playback and pause | | `GCKUIMediaButtonTypeSkipPrevious` | Skips to the previous item in the queue | | `GCKUIMediaButtonTypeSkipNext` | Skips to the next item in the queue | | `GCKUIMediaButtonTypeRewind30Seconds` | Rewinds the playback by 30 seconds | | `GCKUIMediaButtonTypeForward30Seconds` | Skips forward the playback by 30 seconds | | `GCKUIMediaButtonTypeMuteToggle` | Mutes and unmutes the remote Web Receiver | | `GCKUIMediaButtonTypeClosedCaptions` | Opens a dialog to select text and audio tracks | Detailed descriptions of what each button does can be found in [`GCKUIMediaButtonBarProtocol.h`](https://developers.google.com/cast/docs/reference/ios//cast/docs/reference/ios/g_c_k_u_i_media_button_bar_protocol_8h) Add a button as follows using methods on the [`GCKUIMediaButtonBarProtocol`](https://developers.google.com/cast/docs/reference/ios/protocol_g_c_k_u_i_media_button_bar_protocol-p): - To add a framework button to a bar requires only a call to `-[setButtonType:atIndex:]`. - To add a custom button to a bar, your app must call `-[setButtonType:atIndex:]` with `buttonType` set to `GCKUIMediaButtonTypeCustom`, and then call `-[setCustomButton:atIndex:]` passing the `UIButton` with the same index. ## Apply custom styles to your iOS app The Cast iOS SDK enables you to style the font, color, and images of UI elements of the default widgets in your iOS sender, giving the views a look and feel that matches the rest of your app. The following section shows you how to apply custom styles to any of the Cast widgets or group of widgets. ### Applying a style to a UI element of a widget This procedure uses the example of setting the body text color of your app's mini controller to red. 1. Look in the [table of views and styles](https://developers.google.com/cast/docs/ios_sender/customize_ui#table_of_views_and_styles) to find the view name of the widget or group of widgets that you want to style. Group names are marked with ▼. Example: `miniController` widget view 2. Find the names of the attributes you want to change from the list of properties in the corresponding style class listed in this table. Example: `bodyTextColor` is a property of the [`GCKUIStyleAttributesMiniController`](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_mini_controller) class. 3. Write the code. Example: Swift ```swift // Get the shared instance of GCKUIStyle let castStyle = GCKUIStyle.sharedInstance() // Set the property of the desired cast widget. castStyle.castViews.mediaControl.miniController.bodyTextColor = UIColor.red // Refresh all currently visible views with the assigned styles. castStyle.apply() ``` Objective-C ```objective-c // Get the shared instance of GCKUIStyle. GCKUIStyle *castStyle = [GCKUIStyle sharedInstance]; // Set the property of the desired cast widget. castStyle.castViews.mediaControl.miniController.bodyTextColor = [UIColor redColor]; // Refresh all currently visible views with the assigned styles. [castStyle applyStyle]; ``` Use this pattern for applying any style to any UI element of any widget. ### Table of views and styles This table shows the seven widget views and three groups (marked with ▼) that you can apply styles to. | View name | Type | Style class | |---|---|---| | ▼ `castViews` | Group | [GCKUIStyleAttributesCastViews](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_cast_views) | | ▼ `deviceControl` | Group | [GCKUIStyleAttributesDeviceControl](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_device_control) | | `deviceChooser` | Widget | [GCKUIStyleAttributesDeviceChooser](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_device_chooser) | | `noDevicesAvailableController` | Widget | [GCKUIStyleAttributesNoDevicesAvailableController](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_no_devices_available) | | ▼ `connectionController` | Group | [GCKUIStyleAttributesConnectionController](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_connection_controller) | | `navigation` | Widget | [GCKUIStyleAttributesConnectionNavigation](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_connection_navigation) | | `toolbar` | Widget | [GCKUIStyleAttributesConnectionToolbar](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_connection_toolbar) | | ▼ `mediaControl` | Group | [GCKUIStyleAttributesMediaControl](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_media_control) | | `miniController` | Widget | [GCKUIStyleAttributesMiniController](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_mini_controller) | | `expandedController` | Widget | [GCKUIStyleAttributesExpandedController](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_expanded_controller) | | `trackSelector` | Widget | [GCKUIStyleAttributesTrackSelector](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_track_selector) | | `instructions` | Widget | [GCKUIStyleAttributesInstructions](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style_attributes_instructions) | ### Style hierarchy The [`GCKUIStyle`](https://developers.google.com/cast/docs/reference/ios/interface_g_c_k_u_i_style) singleton is the API entry point for all of the style settings. It has the property `castViews`, which is the root of the [style hierarchy](https://developers.google.com/cast/docs/ios_sender/customize_ui#style_hierarchy), as illustrated below; this diagram is a different way of looking at the same views and groups shown in the previous [table](https://developers.google.com/cast/docs/ios_sender/customize_ui#table_of_views_and_styles). You can apply a style to an individual widget or to a group of widgets. The style hierarchy has three widget groups: castViews, deviceControl, and mediaControl. Each group's rectangle encloses its widgets. Applying a style to a group applies it to all widgets in that group. For example, the `castViews` group lets you apply a style to all widgets and the `deviceControl` group lets you apply a style to just its three device control widgets. The `instructions` widget does not belong to any group. |---|---|---|---|---|---|---|---|---|---|---| | **castViews** ||||||||||| | | | | **deviceControl** ||| | **mediaControl** ||| | | | instructions ![](https://developers.google.com/static/cast/images/i/styles-view-instructions.png) | | device Chooser ![](https://developers.google.com/static/cast/images/i/styles-view-device-chooser.png) | noDevicesAvailable screen ![](https://developers.google.com/static/cast/images/ios14/cast-ios14-nodevicesavailable.png) | connection Controller ![](https://developers.google.com/static/cast/images/i/styles-view-connection-controller.png) | | mini Controller ![](https://developers.google.com/static/cast/images/i/styles-view-mini-controller.png) | expanded Controller ![](https://developers.google.com/static/cast/images/i/styles-view-expanded-controller.png) | track Selector ![](https://developers.google.com/static/cast/images/i/styles-view-track-selector.png) | | | | | | | navigation / toolbar ![](https://developers.google.com/static/cast/images/i/styles-view-connection-controller-navigation.png) ![](https://developers.google.com/static/cast/images/i/styles-view-connection-controller-toolbar.png) | | | | | | | | | | | ||| | ||| | | ||||||||||| **Footnote:** Widget names in this diagram that are shown on two lines should be written in code as one word, on one line, no spaces. For example, `device Chooser` should be written `deviceChooser`. Roll over images to enlarge them.