Tips and Tricks

Spacing

Be aware that many layouts have default spacing parameters. If things don't line up correctly you may have to remove this default spacing.
Be warned that much of the styling of Rock Mobile has been done with the default spacing in mind. If you disable it you may notice that may controls are closer than normal. When you disable spacing you may find yourself swimming upstream.
For example, StackLayouts have a default Spacing property set to 10. This means each control within the layout will have a 10 unit space between it and it's neighbor. For a StackLayout the spacing will be relative to it's Orientation property. When set to Horizontal it will be horizontal spacing, Vertical would be vertical spacing.
Other layout controls also have this same behavior. Below is a list of others (this is not meant to be an inclusive list).
  • Grids - Have RowSpacing and ColumnSpacing properties
  • ResponsiveLayouts - Have a ColumnSpacing property

Device Type Customization

As you assign values to properties you may want to have different values for a phone vs a tablet. This is often the case when working with the sizes of images and cards (via the Ratio properties). Providing different properties is possible using the syntax below.
1
<Label
2
Text="{Rock:OnDeviceType Phone='I am a phone!', Tablet='I am a tablet!'}"
3
Margin="{Rock:OnDeviceType Phone='20, 20, 20, 20', Tablet='0, 0, 0, 0' }" />
4
5
<Image Source="https://yourserver.com/photo.jpg"
6
Ratio="{Rock:OnDeviceType Phone=4:3, Tablet=4:2}" />
Copied!
If you'd like to change more than just a property, and instead provide different markup, you can use the controls below.
1
<Rock:OnDeviceType>
2
<Rock:OnDeviceType.Phone>
3
<BoxView Color="Red" HeightRequest="10" />
4
</Rock:OnDeviceType.Phone>
5
<Rock:OnDeviceType.Tablet>
6
<BoxView Color="Blue" HeightRequest="10" />
7
</Rock:OnDeviceType.Tablet>
8
</Rock:OnDeviceType>
Copied!

Device Platform Customization

As you assign values to properties you may want to have different values by platform (iOS or Android). Providing different properties is possible using the syntax below.
1
<Label Text="{Rock:OnDevicePlatform Android='Droid', iOS='Apple'}" />
Copied!
If you'd like to change more than just a property, and instead provide different markup, you can use the controls below.
1
<Rock:OnDeviceType>
2
<Rock:OnDeviceType.Phone>
3
<BoxView Color="Red" HeightRequest="10" />
4
</Rock:OnDeviceType.Phone>
5
<Rock:OnDeviceType.Tablet>
6
<BoxView Color="Blue" HeightRequest="10" />
7
</Rock:OnDeviceType.Tablet>
8
</Rock:OnDeviceType>
Copied!

StringFormat Data Binding

From time to time, you’ll find yourself needing to Bind data as part of a string. You may be tempted to just throw your Binding in the middle of the string as you would in Lava, but you’ll be disappointed as nothing will show up. This is where StringFormat comes into play.
1
<Label Text="{Binding Name, StringFormat='Hey there {0}!'}" />
Copied!
In this case the Key we are Binding to is Name and we want it to output “Hey there Ted!”. We use {0} to insert our Binding Value into the string where we want it to show up.

Push Notification State

You may want to determine on a page if Push Notifications are enabled and ready for use so that you can prompt the user to enable them. For example, if you have a page that lets the user sign up to receive push notifications about an upcoming event, you might want to make sure notifications are enabled - or at least tell the user they have disabled them. We provide two values in your AppValues model to detect these states.
  • core_PushNotificationHasBeenRequested - This will be a True boolean value if the user has ever been prompted to enable push notifications. Otherwise it will be False.
  • core_NotificationsAreEnabled - This will be a True boolean value if notifications are determined to be enabled on the device. Otherwise it will be False.
In the example below, we are manually building an if-elseif-else block by making use of the IsVisible properties. The first StackLayout will be shown if the user has never been asked to enable push notifications. The second StackLayout will be shown if the user has been asked but either denied or disabled notifications. The third and final StackLayout will be shown if they have been both asked and have notifications enabled.
Additionally, the first block will let them click a button to enable notifications. The second block has a button they can click to go to Settings and turn notifications back on.
You might wonder why we are doing it this way even though the AppValues are accessible via Lava. The reason to use bindings like this is so the UI is reactive. Suppose they have manually turned off notifications. The second block will show prompting them to go to settings and re-enable them. The user clicks the button, goes to settings and turns notifications back on and then returns to your application. As soon as the app loads it will update the AppValues which will trigger the Binding to update and hide the second block and show the third block instead. All without having to actually reload the page.
Example
1
<!-- if -->
2
<StackLayout IsVisible="{Binding AppValues.core_PushNotificationHasBeenRequested, Converter={Rock:InverseBooleanConverter}}">
3
<Label Text="Would you like to enable push notifications?" />
4
<Button StyleClass="btn,btn-primary"
5
Text="Enable Notification"
6
Command="{Binding EnablePushNotifications}" />
7
</StackLayout>
8
9
<!-- elseif -->
10
<StackLayout IsVisible="{Binding AppValues.core_PushNotificationHasBeenRequested}">
11
<StackLayout IsVisible="{Binding AppValues.core_NotificationsAreEnabled, Converter={Rock:InverseBooleanConverter}}">
12
<Label Text="Your notifications are disabled, would you like to fix that?" />
13
<Button StyleClass="btn,btn-primary"
14
Text="Settings"
15
Command="{Binding OpenAppSettings}" />
16
</StackLayout>
17
18
<!-- else -->
19
<StackLayout IsVisible="{Binding AppValues.core_NotificationsAreEnabled}">
20
<Label Text="You'll be hearing from us." />
21
</StackLayout>
22
</StackLayout>
Copied!