Added: Full Figma Layout

Borepin/Borepin.Android/Borepin.Android.csproj

@@ -153,6 +153,12 @@
   <ItemGroup>
     <AndroidResource Include="Resources\drawable\splash_screen.xml" />
   </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\layout\Tabbar.xml" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\layout\Toolbar.xml" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
   <ProjectExtensions>
     <VisualStudio>

Borepin/Borepin.Android/MainActivity.cs

@@ -14,6 +14,9 @@ namespace Borepin.Droid
     {
         protected override void OnCreate(Bundle savedInstanceState)
         {
+            TabLayoutResource = Resource.Layout.Tabbar;
+            ToolbarResource = Resource.Layout.Toolbar;
+
             base.OnCreate(savedInstanceState);
 
             global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

Borepin/Borepin.Android/Resources/Resource.designer.cs

@@ -8875,151 +8875,157 @@ namespace Borepin.Droid
 			public const int showTitle = 2131230876;
 			
 			// aapt resource value: 0x7F08009D
-			public const int smallLabel = 2131230877;
+			public const int sliding_tabs = 2131230877;
 			
 			// aapt resource value: 0x7F08009E
-			public const int snackbar_action = 2131230878;
+			public const int smallLabel = 2131230878;
 			
 			// aapt resource value: 0x7F08009F
-			public const int snackbar_text = 2131230879;
+			public const int snackbar_action = 2131230879;
 			
 			// aapt resource value: 0x7F0800A0
-			public const int snap = 2131230880;
+			public const int snackbar_text = 2131230880;
 			
 			// aapt resource value: 0x7F0800A1
-			public const int snapMargins = 2131230881;
+			public const int snap = 2131230881;
 			
 			// aapt resource value: 0x7F0800A2
-			public const int spacer = 2131230882;
+			public const int snapMargins = 2131230882;
 			
 			// aapt resource value: 0x7F0800A3
-			public const int split_action_bar = 2131230883;
+			public const int spacer = 2131230883;
 			
 			// aapt resource value: 0x7F0800A4
-			public const int src_atop = 2131230884;
+			public const int split_action_bar = 2131230884;
 			
 			// aapt resource value: 0x7F0800A5
-			public const int src_in = 2131230885;
+			public const int src_atop = 2131230885;
 			
 			// aapt resource value: 0x7F0800A6
-			public const int src_over = 2131230886;
+			public const int src_in = 2131230886;
 			
 			// aapt resource value: 0x7F0800A7
-			public const int start = 2131230887;
+			public const int src_over = 2131230887;
 			
 			// aapt resource value: 0x7F0800A8
-			public const int status_bar_latest_event_content = 2131230888;
+			public const int start = 2131230888;
 			
 			// aapt resource value: 0x7F0800A9
-			public const int stretch = 2131230889;
+			public const int status_bar_latest_event_content = 2131230889;
 			
 			// aapt resource value: 0x7F0800AA
-			public const int submenuarrow = 2131230890;
+			public const int stretch = 2131230890;
 			
 			// aapt resource value: 0x7F0800AB
-			public const int submit_area = 2131230891;
+			public const int submenuarrow = 2131230891;
+			
+			// aapt resource value: 0x7F0800AC
+			public const int submit_area = 2131230892;
 			
 			// aapt resource value: 0x7F080005
 			public const int SYM = 2131230725;
 			
-			// aapt resource value: 0x7F0800AC
-			public const int tabMode = 2131230892;
-			
 			// aapt resource value: 0x7F0800AD
-			public const int tag_transition_group = 2131230893;
+			public const int tabMode = 2131230893;
 			
 			// aapt resource value: 0x7F0800AE
-			public const int tag_unhandled_key_event_manager = 2131230894;
+			public const int tag_transition_group = 2131230894;
 			
 			// aapt resource value: 0x7F0800AF
-			public const int tag_unhandled_key_listeners = 2131230895;
+			public const int tag_unhandled_key_event_manager = 2131230895;
 			
 			// aapt resource value: 0x7F0800B0
-			public const int text = 2131230896;
+			public const int tag_unhandled_key_listeners = 2131230896;
 			
 			// aapt resource value: 0x7F0800B1
-			public const int text2 = 2131230897;
+			public const int text = 2131230897;
-			
-			// aapt resource value: 0x7F0800B6
-			public const int textinput_counter = 2131230902;
-			
-			// aapt resource value: 0x7F0800B7
-			public const int textinput_error = 2131230903;
-			
-			// aapt resource value: 0x7F0800B8
-			public const int textinput_helper_text = 2131230904;
 			
 			// aapt resource value: 0x7F0800B2
-			public const int textSpacerNoButtons = 2131230898;
+			public const int text2 = 2131230898;
 			
-			// aapt resource value: 0x7F0800B3
+			// aapt resource value: 0x7F0800B7
-			public const int textSpacerNoTitle = 2131230899;
+			public const int textinput_counter = 2131230903;
 			
-			// aapt resource value: 0x7F0800B4
+			// aapt resource value: 0x7F0800B8
-			public const int textStart = 2131230900;
+			public const int textinput_error = 2131230904;
-			
-			// aapt resource value: 0x7F0800B5
-			public const int text_input_password_toggle = 2131230901;
 			
 			// aapt resource value: 0x7F0800B9
-			public const int time = 2131230905;
+			public const int textinput_helper_text = 2131230905;
+			
+			// aapt resource value: 0x7F0800B3
+			public const int textSpacerNoButtons = 2131230899;
+			
+			// aapt resource value: 0x7F0800B4
+			public const int textSpacerNoTitle = 2131230900;
+			
+			// aapt resource value: 0x7F0800B5
+			public const int textStart = 2131230901;
+			
+			// aapt resource value: 0x7F0800B6
+			public const int text_input_password_toggle = 2131230902;
 			
 			// aapt resource value: 0x7F0800BA
-			public const int title = 2131230906;
+			public const int time = 2131230906;
 			
 			// aapt resource value: 0x7F0800BB
-			public const int titleDividerNoCustom = 2131230907;
+			public const int title = 2131230907;
 			
 			// aapt resource value: 0x7F0800BC
-			public const int title_template = 2131230908;
+			public const int titleDividerNoCustom = 2131230908;
 			
 			// aapt resource value: 0x7F0800BD
-			public const int top = 2131230909;
+			public const int title_template = 2131230909;
 			
 			// aapt resource value: 0x7F0800BE
-			public const int topPanel = 2131230910;
+			public const int toolbar = 2131230910;
 			
 			// aapt resource value: 0x7F0800BF
-			public const int touch_outside = 2131230911;
+			public const int top = 2131230911;
 			
 			// aapt resource value: 0x7F0800C0
-			public const int transition_current_scene = 2131230912;
+			public const int topPanel = 2131230912;
 			
 			// aapt resource value: 0x7F0800C1
-			public const int transition_layout_save = 2131230913;
+			public const int touch_outside = 2131230913;
 			
 			// aapt resource value: 0x7F0800C2
-			public const int transition_position = 2131230914;
+			public const int transition_current_scene = 2131230914;
 			
 			// aapt resource value: 0x7F0800C3
-			public const int transition_scene_layoutid_cache = 2131230915;
+			public const int transition_layout_save = 2131230915;
 			
 			// aapt resource value: 0x7F0800C4
-			public const int transition_transform = 2131230916;
+			public const int transition_position = 2131230916;
 			
 			// aapt resource value: 0x7F0800C5
-			public const int uniform = 2131230917;
+			public const int transition_scene_layoutid_cache = 2131230917;
 			
 			// aapt resource value: 0x7F0800C6
-			public const int unlabeled = 2131230918;
+			public const int transition_transform = 2131230918;
 			
 			// aapt resource value: 0x7F0800C7
-			public const int up = 2131230919;
+			public const int uniform = 2131230919;
 			
 			// aapt resource value: 0x7F0800C8
-			public const int useLogo = 2131230920;
+			public const int unlabeled = 2131230920;
 			
 			// aapt resource value: 0x7F0800C9
-			public const int view_offset_helper = 2131230921;
+			public const int up = 2131230921;
 			
 			// aapt resource value: 0x7F0800CA
-			public const int visible = 2131230922;
+			public const int useLogo = 2131230922;
 			
 			// aapt resource value: 0x7F0800CB
-			public const int withText = 2131230923;
+			public const int view_offset_helper = 2131230923;
 			
 			// aapt resource value: 0x7F0800CC
-			public const int wrap_content = 2131230924;
+			public const int visible = 2131230924;
+			
+			// aapt resource value: 0x7F0800CD
+			public const int withText = 2131230925;
+			
+			// aapt resource value: 0x7F0800CE
+			public const int wrap_content = 2131230926;
 			
 			static Id()
 			{
@@ -9324,6 +9330,12 @@ namespace Borepin.Droid
 			// aapt resource value: 0x7F0B0044
 			public const int support_simple_spinner_dropdown_item = 2131427396;
 			
+			// aapt resource value: 0x7F0B0045
+			public const int Tabbar = 2131427397;
+			
+			// aapt resource value: 0x7F0B0046
+			public const int Toolbar = 2131427398;
+			
 			static Layout()
 			{
 				global::Android.Runtime.ResourceIdManager.UpdateIdValues();

Borepin/Borepin.Android/Resources/layout/Tabbar.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/sliding_tabs"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:background="?attr/colorPrimary"
+    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
+    app:tabIndicatorColor="@android:color/white"
+    app:tabGravity="fill"
+    app:tabMode="fixed" />

Borepin/Borepin.Android/Resources/layout/Toolbar.xml

@@ -0,0 +1,9 @@
+<android.support.v7.widget.Toolbar
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/toolbar"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:background="?attr/colorPrimary"
+    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
+    android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
+

Borepin/Borepin.Android/Resources/values/styles.xml

@@ -5,6 +5,7 @@
   </style>
   <!-- Base theme applied no matter what API -->
   <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
+    <item name="android:navigationBarColor">#3C474D</item>
     <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
     <item name="windowNoTitle">true</item>
     <!--We will be using the toolbar so no need to show ActionBar-->

Borepin/Borepin.UWP/Borepin.UWP.csproj

@@ -175,7 +175,7 @@
       <Version>8.0.0.1909</Version>
     </PackageReference>
     <PackageReference Include="Xamarin.Forms" Version="4.8.0.1687" />
-    <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform" Version="6.2.10" />
+    <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform" Version="6.2.11" />
     <PackageReference Include="Xamarin.Essentials" Version="1.5.3.2" />
   </ItemGroup>
   <ItemGroup>

Borepin/Borepin/Page/MachinesPage.xaml

@@ -12,20 +12,27 @@
         </ResourceDictionary>
     </ContentPage.Resources>
     <ContentPage.Content>
-        <StackLayout>
+        <StackLayout Padding="0, 10, 0, 10">
-            <ListView x:Name="MachineList" ItemsSource="{Binding MachineList}">
+            <ListView x:Name="MachineList" ItemsSource="{Binding MachineList}" SelectionMode="None">
                 <ListView.ItemTemplate>
                     <DataTemplate>
                         <ViewCell>
-                            <Grid>
+                            <Grid RowSpacing="0">
                                 <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="5" />
                                     <ColumnDefinition Width="7*" />
                                     <ColumnDefinition Width="2*" />
                                     <ColumnDefinition Width="1*" />
+                                    <ColumnDefinition Width="1" />
                                 </Grid.ColumnDefinitions>
-                                <Label Grid.Column="0" Text="{Binding ID, StringFormat='{0}'}" Style="{StaticResource LabelStyle_Primary}"/>
+                                <Grid.RowDefinitions>
-                                <Label Grid.Column="1" Text="{Binding State, StringFormat='{0}'}" Style="{StaticResource LabelStyle_Second}" HorizontalTextAlignment="End" TextColor="{Binding State, Converter={StaticResource MachineStateColorConverter}}" />
+                                    <RowDefinition Height="*"/>
-                                <Button Grid.Column="2" Text="->" Command="{Binding BindingContext.GoToMachineCommand, Source={x:Reference MachineList}}" CommandParameter="{Binding .}" Style="{StaticResource ButtonStyle_Primary}"/>
+                                    <RowDefinition Height="1"/>
+                                </Grid.RowDefinitions>
+                                <Label Grid.Row="0" Grid.Column="1" Text="{Binding ID, StringFormat='{0}'}" Style="{StaticResource LabelStyle_Primary}"/>
+                                <Label Grid.Row="0" Grid.Column="2" Text="{Binding State, StringFormat='{0}'}" Style="{StaticResource LabelStyle_Second}" HorizontalTextAlignment="End" TextColor="{Binding State, Converter={StaticResource MachineStateColorConverter}}" />
+                                <Button Grid.Row="0" Grid.Column="3" Margin="0, 3, 0, 3" Text="->" Command="{Binding BindingContext.GoToMachineCommand, Source={x:Reference MachineList}}" CommandParameter="{Binding .}" Style="{StaticResource ButtonStyle_Primary}"/>
+                                <BoxView Grid.Row="1" Grid.ColumnSpan="5" BackgroundColor="{StaticResource FifthColor}"/>
                             </Grid>
                         </ViewCell>
                     </DataTemplate>

Borepin/Borepin/Page/MainPage.xaml

@@ -2,7 +2,6 @@
 <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   x:Class="Borepin.Page.MainPage"
-                  Title="Main Page"
                   MasterBehavior="Popover"
                   x:Name="page">
     <MasterDetailPage.Master>

Borepin/Borepin/Styles/LightTheme.xaml

@@ -26,10 +26,12 @@
     <Style x:Key="LabelStyle_Primary" TargetType="Label">
         <Setter Property="TextColor" Value="#000000" />
         <Setter Property="FontAttributes" Value="Bold" />
+        <Setter Property="VerticalTextAlignment" Value="Center"/>
     </Style>
 
     <Style x:Key="LabelStyle_Second" TargetType="Label">
         <Setter Property="TextColor" Value="{StaticResource SixthColor}" />
+        <Setter Property="VerticalTextAlignment" Value="Center"/>
     </Style>
 
     <Style TargetType="NavigationPage">