From: cskim <charles0.kim@samsung.com>
Date: Mon, 10 Apr 2017 09:37:34 +0000 (+0900)
Subject: Add SizeUtils to provide translated with ration of current screen.
X-Git-Tag: submit/tizen/20170808.015446~117
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=9a63cbc3fd1303b867afee449d4536724227c0b0;p=profile%2Ftv%2Fapps%2Fdotnet%2Fhome.git

Add SizeUtils to provide translated with ration of current screen.

Change-Id: I0214714aee4a06c9e5033d8c84be2b277a321196
---

diff --git a/LibTVRefCommonPortable/LibTVRefCommonPortable.csproj b/LibTVRefCommonPortable/LibTVRefCommonPortable.csproj
index f682b4a..c8af293 100755
--- a/LibTVRefCommonPortable/LibTVRefCommonPortable.csproj
+++ b/LibTVRefCommonPortable/LibTVRefCommonPortable.csproj
@@ -53,6 +53,7 @@
     <Compile Include="Utils\AppControlUtils.cs" />
     <Compile Include="Utils\ApplicationManagerUtils.cs" />
     <Compile Include="Utils\AppShortcutStorage.cs" />
+    <Compile Include="Utils\SizeUtils.cs" />
     <Compile Include="Utils\DateUtils.cs" />
     <Compile Include="Utils\DebuggingUtils.cs" />
     <Compile Include="Utils\IAppControl.cs" />
diff --git a/LibTVRefCommonPortable/Utils/IApplicationManagerAPIs.cs b/LibTVRefCommonPortable/Utils/IApplicationManagerAPIs.cs
index 28b8a25..97bb8a1 100755
--- a/LibTVRefCommonPortable/Utils/IApplicationManagerAPIs.cs
+++ b/LibTVRefCommonPortable/Utils/IApplicationManagerAPIs.cs
@@ -93,6 +93,7 @@ namespace LibTVRefCommonPortable.Utils
         /// <summary>
         /// A method for removing the specified recent application
         /// </summary>
+        /// <param name="appId">A application ID</param>
         void DeleteRecentApplication(string appId);
 
         /// <summary>
diff --git a/LibTVRefCommonPortable/Utils/RecentShortcutStorage.cs b/LibTVRefCommonPortable/Utils/RecentShortcutStorage.cs
index 6920fa3..7691850 100755
--- a/LibTVRefCommonPortable/Utils/RecentShortcutStorage.cs
+++ b/LibTVRefCommonPortable/Utils/RecentShortcutStorage.cs
@@ -70,7 +70,7 @@ namespace LibTVRefCommonPortable.Utils
         /// <summary>
         /// A method deletes a Recent Shortcut.
         /// </summary>
-        /// <param name="shortcut">A recent Shortcut</param>
+        /// <param name="appId">A application ID</param>
         public static void Delete(string appId)
         {
             IApplicationManagerAPIs applicationManagerPort = DependencyService.Get<IApplicationManagerAPIs>();
diff --git a/LibTVRefCommonPortable/Utils/SizeUtils.cs b/LibTVRefCommonPortable/Utils/SizeUtils.cs
new file mode 100644
index 0000000..4084331
--- /dev/null
+++ b/LibTVRefCommonPortable/Utils/SizeUtils.cs
@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+using System;
+
+namespace LibTVRefCommonPortable.Utils
+{
+    /// <summary>
+    /// A class provides Size metric related functions
+    /// </summary>
+    public class SizeUtils
+    {
+        /// <summary>
+        /// Base Screen Height
+        /// </summary>
+        private static int baseScreenWidth = 1920;
+
+        /// <summary>
+        /// Base Screen Height
+        /// </summary>
+        public static int BaseScreenWidth
+        {
+            get
+            {
+                return baseScreenWidth;
+            }
+        }
+
+        /// <summary>
+        /// Base Screen Height
+        /// </summary>
+        private static int baseScreenHeight = 1080;
+
+        /// <summary>
+        /// Base Screen Height
+        /// </summary>
+        public static int BaseScreenHeight
+        {
+            get
+            {
+                return baseScreenHeight;
+            }
+        }
+
+
+        /// <summary>
+        /// Screen Height
+        /// </summary>
+        public static int ScreenHeight { set; get; }
+
+        /// <summary>
+        /// Screen Width
+        /// </summary>
+        public static int ScreenWidth { set; get; }
+
+        /// <summary>
+        /// Font Scale ratio
+        /// </summary>
+        public static double ScaleRatio { set; get; }
+
+        /// <summary>
+        /// A method provides a converted height size.
+        /// </summary>
+        /// <param name="heightBaseSize">A height value in BaseScreen ratio</param>
+        /// <returns>A date</returns>
+        public static int GetHeightSize(int heightBaseSize)
+        {
+            return Convert.ToInt32((double)((double)heightBaseSize / (double)BaseScreenHeight) * (double)(ScreenHeight));
+        }
+
+        /// <summary>
+        /// A method provides a converted width size.
+        /// </summary>
+        /// <param name="widthBaseSize">A width value in BaseScreen ratio</param>
+        /// <returns>A date</returns>
+        public static int GetWidthSize(int widthBaseSize)
+        {
+            return Convert.ToInt32((double)((double)widthBaseSize / (double)BaseScreenWidth) * (double)(ScreenWidth));
+        }
+
+        /// <summary>
+        /// A method provides a converted font size.
+        /// </summary>
+        /// <param name="fontBaseSize">A base font size value in BaseScreen ratio</param>
+        /// <returns>A date</returns>
+        public static int GetFontSize(int fontBaseSize)
+        {
+            return Convert.ToInt32(((double)((double)fontBaseSize / (double)BaseScreenHeight) * (double)(ScreenHeight)) * ScaleRatio);
+        }
+    }
+}
diff --git a/LibTVRefCommonTizen/Ports/ApplicationManagerPort.cs b/LibTVRefCommonTizen/Ports/ApplicationManagerPort.cs
index 827f566..1b79e72 100755
--- a/LibTVRefCommonTizen/Ports/ApplicationManagerPort.cs
+++ b/LibTVRefCommonTizen/Ports/ApplicationManagerPort.cs
@@ -222,7 +222,7 @@ namespace LibTVRefCommonTizen.Ports
                 appInfo = ApplicationManager.GetInstalledApplication(appID);
                 if (appInfo == null)
                 {
-                    DbgPort.D("Failed to get the installed application(" + appID +")");
+                    DbgPort.D("Failed to get the installed application(" + appID + ")");
                     return false;
                 }
 
@@ -244,7 +244,7 @@ namespace LibTVRefCommonTizen.Ports
         {
             IEnumerable<ApplicationInfo> installedList = await ApplicationManager.GetInstalledApplicationsAsync();
 
-            foreach(var app in installedList)
+            foreach (var app in installedList)
             {
                 if (app.Label.Equals(appLabel))
                 {
diff --git a/TVApps/TVApps.TizenTV/TVApps.TizenTV.cs b/TVApps/TVApps.TizenTV/TVApps.TizenTV.cs
index 44300b7..1afc931 100755
--- a/TVApps/TVApps.TizenTV/TVApps.TizenTV.cs
+++ b/TVApps/TVApps.TizenTV/TVApps.TizenTV.cs
@@ -60,7 +60,7 @@ namespace TVApps.TizenTV
         protected override void OnCreate()
         {
             base.OnCreate();
-            var app = new App();
+            var app = new App(MainWindow.ScreenSize.Width, MainWindow.ScreenSize.Height, ElmSharp.Elementary.GetScale());
             notification = app;
 
             AppResourcePath = DirectoryInfo.Resource;
diff --git a/TVApps/TVApps/Controls/AppItemCell.xaml b/TVApps/TVApps/Controls/AppItemCell.xaml
index f53cb3b..c000848 100755
--- a/TVApps/TVApps/Controls/AppItemCell.xaml
+++ b/TVApps/TVApps/Controls/AppItemCell.xaml
@@ -4,8 +4,7 @@
           xmlns:Control="clr-namespace:TVApps.Controls"
           x:Class="TVApps.Controls.AppItemCell">
 
-    <RelativeLayout HeightRequest="342"
-                    WidthRequest="240">
+    <RelativeLayout x:Name="IconLayout">
         <Image x:Name="ButtonImage"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4795}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6833}"
@@ -55,7 +54,6 @@
                    Grid.RowSpan="3"
                    Grid.Column="2"
                    Opacity="1"
-                   FontSize="56"
                    TextColor="White"
                    LineBreakMode="TailTruncation"
                    HorizontalTextAlignment="Center"
diff --git a/TVApps/TVApps/Controls/AppItemCell.xaml.cs b/TVApps/TVApps/Controls/AppItemCell.xaml.cs
index 089a88b..85fa16e 100755
--- a/TVApps/TVApps/Controls/AppItemCell.xaml.cs
+++ b/TVApps/TVApps/Controls/AppItemCell.xaml.cs
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+using LibTVRefCommonPortable.Utils;
 using System;
 using System.ComponentModel;
 using System.Windows.Input;
@@ -115,6 +116,26 @@ namespace TVApps.Controls
             set { SetValue(IsFocusedProperty, value); }
         }
 
+        /// <summary>
+        /// 2 px height size
+        /// </summary>
+        private int height2 = SizeUtils.GetHeightSize(2);
+
+        /// <summary>
+        /// 28 px height size
+        /// </summary>
+        private int height28 = SizeUtils.GetHeightSize(28);
+
+        /// <summary>
+        /// 90 px height size
+        /// </summary>
+        private int height90 = SizeUtils.GetHeightSize(90);
+
+        /// <summary>
+        /// 144 px height size
+        /// </summary>
+        private int height144 = SizeUtils.GetHeightSize(144);
+
         /// <summary>
         /// A constructor
         /// Adds PropertyChanged event handler
@@ -122,9 +143,16 @@ namespace TVApps.Controls
         public AppItemCell()
         {
             InitializeComponent();
+
+            // TODO : set proper size
+            IconLayout.WidthRequest = SizeUtils.GetWidthSize(240);
+            // TODO : set proper size
+            IconLayout.HeightRequest = SizeUtils.GetHeightSize(342);
+            ButtonTitle.FontSize = SizeUtils.GetFontSize(28);
+
+            ButtonTitle.PropertyChanged += ButtonTitlePropertyChanged;
             OptionMenuPinToggleButton.Text = IsPinned ? "UNPIN" : "PIN";
             PropertyChanged += AppItemCellPropertyChanged;
-            ButtonTitle.PropertyChanged += ButtonTitlePropertyChanged;
         }
 
         /// <summary>
@@ -159,10 +187,10 @@ namespace TVApps.Controls
                     finished: (a, b) =>
                     {
                         ButtonImage.ScaleTo(1.32, 150);
-                        TextArea.TranslateTo(0.0, 28.0, 150);
+                        TextArea.TranslateTo(0.0, height28, 150);
                         CheckImage.FadeTo((IsChecked) ? 0.99 : 0.0, 150);
                         DimImage.FadeTo((IsChecked) ? 0.99 : 0.0, 150);
-                        DimImage.TranslateTo(0.0, (IsChecked) ? 2.0 : 0.0, 150);
+                        DimImage.TranslateTo(0.0, (IsChecked) ? height2 : 0.0, 150);
                         DimImage.ScaleTo((IsChecked) ? 1.32 : 0.0, 300);
                     });
                 }
@@ -170,7 +198,7 @@ namespace TVApps.Controls
                 {
                     CheckImage.FadeTo((IsChecked) ? 0.99 : 0.0, 300);
                     DimImage.FadeTo((IsChecked) ? 0.99 : 0.0, 300);
-                    DimImage.TranslateTo(0.0, (IsChecked) ? 2.0 : 0.0, 300);
+                    DimImage.TranslateTo(0.0, (IsChecked) ? height2 : 0.0, 300);
                     DimImage.ScaleTo((IsChecked) ? 1.32 : 0.0, 300);
                 }
 
@@ -194,8 +222,8 @@ namespace TVApps.Controls
         public void ChangeIconSize(IconSize size)
         {
             ButtonImage.ScaleTo((size == IconSize.Normal) ? 1.0 : 1.32, 50);
-            ButtonImage.TranslateTo(0.0, (size == IconSize.Normal) ? 0.0 : 2, 100);
-            TextArea.TranslateTo(0.0, (size == IconSize.Normal) ? 0.0 : 28, 50);
+            ButtonImage.TranslateTo(0.0, (size == IconSize.Normal) ? 0.0 : height2, 100);
+            TextArea.TranslateTo(0.0, (size == IconSize.Normal) ? 0.0 : height28, 50);
         }
 
         /// <summary>
@@ -204,10 +232,10 @@ namespace TVApps.Controls
         /// <param name="isShow">A flag indicates whether the option menu should be showed or not</param>
         public void ShowOptionMenu(bool isShow)
         {
-            ButtonImage.TranslateTo(0, (isShow) ? -90 : 0, 100);
-            TextArea.TranslateTo(0, (isShow) ? -90 : 0, 100);
+            ButtonImage.TranslateTo(0, (isShow) ? -height90 : 0, 100);
+            TextArea.TranslateTo(0, (isShow) ? -height90 : 0, 100);
             TextArea.FadeTo((isShow) ? 0.0 : 0.99, 100);
-            OptionMenuArea.TranslateTo(0, (isShow) ? -144 : 0, 100);
+            OptionMenuArea.TranslateTo(0, (isShow) ? -height144 : 0, 100);
         }
 
         /// <summary>
@@ -253,8 +281,8 @@ namespace TVApps.Controls
             if (IsChecked)
             {
                 DimImage.ScaleTo(1.32, 300);
-                DimImage.TranslateTo(0.0, 2, 300);
-                CheckImage.TranslateTo(0.0, 2, 300);
+                DimImage.TranslateTo(0.0, height2, 300);
+                CheckImage.TranslateTo(0.0, height2, 300);
             }
         }
 
diff --git a/TVApps/TVApps/Controls/AppListView.xaml b/TVApps/TVApps/Controls/AppListView.xaml
index 1d827de..1cd1e85 100755
--- a/TVApps/TVApps/Controls/AppListView.xaml
+++ b/TVApps/TVApps/Controls/AppListView.xaml
@@ -17,18 +17,14 @@
                      RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
                      RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
                      Orientation="Horizontal"
-                     HorizontalOptions="Start"
-                     Padding="58, 0, 58, 0"
-                     Spacing="16"/>
+                     HorizontalOptions="Start"/>
 
         <StackLayout x:Name="AppLowerList"
                      RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5197}"
-                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=AppUpperList, Property=Height, Factor=1, Constant=-64}"
+                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=AppUpperList, Property=Height, Factor=0.8}"
                      RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
                      Orientation="Horizontal"
-                     HorizontalOptions="Start"
-                     Padding="58, 0, 58, 0"
-                     Spacing="16"/>
+                     HorizontalOptions="Start"/>
 
     </RelativeLayout>
 </ScrollView>
diff --git a/TVApps/TVApps/Controls/AppListView.xaml.cs b/TVApps/TVApps/Controls/AppListView.xaml.cs
index 0d2a340..b7763d0 100644
--- a/TVApps/TVApps/Controls/AppListView.xaml.cs
+++ b/TVApps/TVApps/Controls/AppListView.xaml.cs
@@ -20,6 +20,7 @@ using LibTVRefCommonPortable.DataModels;
 using System.Collections.Generic;
 using System;
 using System.Threading.Tasks;
+using LibTVRefCommonPortable.Utils;
 
 namespace TVApps.Controls
 {
@@ -78,6 +79,27 @@ namespace TVApps.Controls
             }
         }
 
+        /// <summary>
+        /// The lower app list constant value
+        /// </summary>
+        private int appLowerListConstant;
+
+        /// <summary>
+        /// The lower app list constant value
+        /// </summary>
+        public int AppLowerListConstant
+        {
+            get
+            {
+                if (appLowerListConstant == 0)
+                {
+                    appLowerListConstant = SizeUtils.GetHeightSize(-64);
+                }
+
+                return appLowerListConstant;
+            }
+        }
+
         /// <summary>
         /// A constructor
         /// Adds PropertyChanged event handler
@@ -85,6 +107,18 @@ namespace TVApps.Controls
         public AppListView()
         {
             InitializeComponent();
+
+            // TODO : set proper size
+            Thickness padding = new Thickness(SizeUtils.GetHeightSize(58), 0, SizeUtils.GetHeightSize(58), 0);
+            // TODO : set proper size
+            int spacing = SizeUtils.GetWidthSize(16);
+
+            AppUpperList.Padding = padding;
+            AppUpperList.Spacing = spacing;
+
+            AppLowerList.Padding = padding;
+            AppLowerList.Spacing = spacing;
+
             AppCount = 0;
             PropertyChanged += AppListViewPropertyChanged;
         }
@@ -115,9 +149,6 @@ namespace TVApps.Controls
                 return;
             }
 
-            // For Test Code
-            //for (var test = 0; test < 4; test++)
-            //{
             foreach (var item in ItemsSource)
             {
                 var viewCell = ItemTemplate.CreateContent() as AppItemCell;
@@ -148,7 +179,6 @@ namespace TVApps.Controls
 
                 AppCount = AppCount + 1;
             }
-            //}
         }
 
         /// <summary>
diff --git a/TVApps/TVApps/Controls/TVButton.xaml b/TVApps/TVApps/Controls/TVButton.xaml
index 39c3eea..765c448 100644
--- a/TVApps/TVApps/Controls/TVButton.xaml
+++ b/TVApps/TVApps/Controls/TVButton.xaml
@@ -2,21 +2,8 @@
 <StackLayout  xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:Controls="clr-namespace:TVApps.Controls"
-              HeightRequest="80"
-              WidthRequest="300"
-              Margin="1, 0, 0, 0"
               x:Class="TVApps.Controls.TVButton">
 
-  <StackLayout.Resources>
-    <ResourceDictionary>
-      <Style x:Key="ButtonText" TargetType="Label" >
-        <Setter Property="FontSize" Value="62" />
-        <Setter Property="TextColor" Value="#F7F7F7" />
-        <Setter Property="FontFamily" Value="Breeze Sans Regular" />
-      </Style>
-    </ResourceDictionary>
-  </StackLayout.Resources>
-
   <Grid x:Name="ButtonGrid"
         BackgroundColor="#000000FF"
         VerticalOptions="FillAndExpand"
@@ -24,10 +11,11 @@
 
     <Label Grid.Row="0" Grid.Column="0"
            x:Name="TitleText"
-           Style="{StaticResource ButtonText}"
-           VerticalOptions="Center"
+           FontSize="{Binding RegularFontSize}"
            HorizontalOptions="Center"
-           TextColor="#F7F7F7"></Label>
+           VerticalOptions="Center"
+           FontFamily="Breeze Sans Regular"
+           TextColor="#F7F7F7"/>
 
     <Controls:NinePatchImage Grid.Row="0" Grid.Column="0"
                              x:Name="BackgroundImage"
diff --git a/TVApps/TVApps/Controls/TVButton.xaml.cs b/TVApps/TVApps/Controls/TVButton.xaml.cs
index d669d9c..8b00e77 100644
--- a/TVApps/TVApps/Controls/TVButton.xaml.cs
+++ b/TVApps/TVApps/Controls/TVButton.xaml.cs
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+using LibTVRefCommonPortable.Utils;
 using System;
 using System.Windows.Input;
 using Xamarin.Forms;
@@ -78,6 +79,10 @@ namespace TVApps.Controls
         public TVButton()
         {
             InitializeComponent();
+
+            WidthRequest = SizeUtils.GetWidthSize(300);
+            HeightRequest = SizeUtils.GetHeightSize(80);
+
             HiddenButton.Clicked += ButtonClickListener;
             HiddenButton.Focused += ButtonFocusedListener;
             HiddenButton.Unfocused += ButtonUnfocusedListener;
diff --git a/TVApps/TVApps/TVApps.cs b/TVApps/TVApps/TVApps.cs
index 2c8a4f6..a94cbe9 100755
--- a/TVApps/TVApps/TVApps.cs
+++ b/TVApps/TVApps/TVApps.cs
@@ -60,8 +60,15 @@ namespace TVApps
         /// Sets main page to MainPage instance
         /// </summary>
         /// <see cref="MainPage"/>
-        public App()
+        /// <param name="screenWidth">Screen Width</param>
+        /// <param name="screenHeight">Screen Height</param>
+        /// <param name="scaleRatio">Scale ratio</param>
+        public App(int screenWidth, int screenHeight, double scaleRatio)
         {
+            SizeUtils.ScreenWidth = screenWidth;
+            SizeUtils.ScreenHeight = screenHeight;
+            SizeUtils.ScaleRatio = scaleRatio;
+
             MainPage = new MainPage();
         }
 
diff --git a/TVApps/TVApps/ViewModels/MainPageViewModel.cs b/TVApps/TVApps/ViewModels/MainPageViewModel.cs
index c032da8..6af495f 100644
--- a/TVApps/TVApps/ViewModels/MainPageViewModel.cs
+++ b/TVApps/TVApps/ViewModels/MainPageViewModel.cs
@@ -154,6 +154,48 @@ namespace TVApps.ViewModels
             }
         }
 
+        /// <summary>
+        /// Title text font size
+        /// </summary>
+        int titleTextSize;
+
+        /// <summary>
+        /// Title text font size
+        /// </summary>
+        public int TitleTextSize
+        {
+            get
+            {
+                if (titleTextSize == 0)
+                {
+                    titleTextSize = SizeUtils.GetFontSize(84);
+                }
+
+                return titleTextSize;
+            }
+        }
+
+        /// <summary>
+        /// Regular text font size
+        /// </summary>
+        int regularFontSize;
+
+        /// <summary>
+        /// Regular text font size
+        /// </summary>
+        public int RegularFontSize
+        {
+            get
+            {
+                if (regularFontSize == 0)
+                {
+                    regularFontSize = SizeUtils.GetFontSize(28);
+                }
+
+                return regularFontSize;
+            }
+        }
+
         /// <summary>
         /// Gets and Sets current sorting option index
         /// If change SortingOption index, AppsHolder sorts list
diff --git a/TVApps/TVApps/Views/FooterNormalStatus.xaml b/TVApps/TVApps/Views/FooterNormalStatus.xaml
index 0a023cf..5ef0dd3 100644
--- a/TVApps/TVApps/Views/FooterNormalStatus.xaml
+++ b/TVApps/TVApps/Views/FooterNormalStatus.xaml
@@ -6,19 +6,6 @@
       PinAppCommand="{Binding ButtonPinAppCommand}"
       DeleteAppCommand="{Binding ButtonDeleteAppCommand}">
 
-  <Grid.Resources>
-    <ResourceDictionary>
-      <Style x:Key="button" TargetType="Button">
-        <Setter Property="BorderColor" Value="#FFFFFF"/>
-        <Setter Property="HeightRequest" Value="40"/>
-        <Setter Property="WidthRequest" Value="598"/>
-        <Setter Property="BorderWidth" Value="2" />
-        <Setter Property="HorizontalOptions" Value="Center"/>
-        <Setter Property="BackgroundColor" Value="Transparent"/>
-      </Style>
-    </ResourceDictionary>
-  </Grid.Resources>
-
   <Grid.RowDefinitions>
     <RowDefinition Height="625*" />
     <RowDefinition Height="375*" />
@@ -43,7 +30,7 @@
       </Picker.Items>
     </Picker>
 
-    <Control:TVButton Text="Options"
+    <Control:TVButton Text="OPTION"
             Clicked="OnOptionsClicked" />
 
   </StackLayout>
diff --git a/TVApps/TVApps/Views/FooterPinStatus.xaml b/TVApps/TVApps/Views/FooterPinStatus.xaml
index 05c7696..e14cdd2 100644
--- a/TVApps/TVApps/Views/FooterPinStatus.xaml
+++ b/TVApps/TVApps/Views/FooterPinStatus.xaml
@@ -19,15 +19,12 @@
   <StackLayout Grid.Row="0" Grid.Column="1"
                Orientation="Horizontal">
     <Label x:Name="FooterAdditionalText"
-           FontSize="56"
+           FontSize="{Binding RegularFontSize}"
            TextColor="White"
-           HorizontalTextAlignment="Start"
-           VerticalTextAlignment="Center"
+           FontAttributes="Bold"
            Text="{Binding SumOfCheckedApp}" />
-    <Label FontSize="56"
+    <Label FontSize="{Binding RegularFontSize}"
            TextColor="White"
-           HorizontalTextAlignment="Start"
-           VerticalTextAlignment="Center"
            Text=" Pinned" />
   </StackLayout>
 
diff --git a/TVApps/TVApps/Views/MainPage.xaml b/TVApps/TVApps/Views/MainPage.xaml
index 73800dc..19daedc 100755
--- a/TVApps/TVApps/Views/MainPage.xaml
+++ b/TVApps/TVApps/Views/MainPage.xaml
@@ -17,38 +17,13 @@
   <ContentPage.Resources>
     <ResourceDictionary>
       <Style x:Key="titleText" TargetType="Label" >
-        <Setter Property="FontSize" Value="187" />
         <Setter Property="TextColor" Value="#FFFFFF" />
         <Setter Property="FontFamily" Value="Breeze Sans Regular" />
       </Style>
       <Style x:Key="backKeyInfoText" TargetType="Label" >
-        <Setter Property="FontSize" Value="62" />
         <Setter Property="TextColor" Value="#99FFFFFF" />
         <Setter Property="FontFamily" Value="Breeze Sans Regular" />
       </Style>
-      <Style x:Key="buttonTextNormal" TargetType="Label" >
-        <Setter Property="FontSize" Value="62" />
-        <Setter Property="TextColor" Value="#F7F7F7" />
-        <Setter Property="FontFamily" Value="Breeze Sans Regular" />
-      </Style>
-      <Style x:Key="buttonTextPressed" TargetType="Label" >
-        <Setter Property="FontSize" Value="62" />
-        <Setter Property="TextColor" Value="#F7F7F708" />
-        <Setter Property="FontFamily" Value="Breeze Sans Regular" />
-      </Style>
-      <Style x:Key="pinnedText" TargetType="Label" >
-        <Setter Property="FontSize" Value="50" />
-        <Setter Property="TextColor" Value="#F7F7F7" />
-        <Setter Property="FontFamily" Value="Breeze Sans Regular" />
-      </Style>
-
-      <Style x:Key="button" TargetType="Button">
-        <Setter Property="BorderColor" Value="#FFFFFF"/>
-        <Setter Property="HeightRequest" Value="40"/>
-        <Setter Property="BorderWidth" Value="2" />
-        <Setter Property="HorizontalOptions" Value="Center"/>
-        <Setter Property="BackgroundColor" Value="Transparent"/>
-      </Style>
     </ResourceDictionary>
   </ContentPage.Resources>
 
@@ -63,11 +38,12 @@
     <Grid.ColumnSpacing>0</Grid.ColumnSpacing>
 
     <Label Grid.Row="0"
-             Style="{StaticResource titleText}"
-             HorizontalTextAlignment="Center"
-             VerticalOptions="CenterAndExpand"
-             HorizontalOptions="CenterAndExpand"
-             Text="APPS" />
+           Style="{StaticResource titleText}"
+           HorizontalTextAlignment="Center"
+           VerticalOptions="CenterAndExpand"
+           HorizontalOptions="CenterAndExpand"
+           FontSize="{Binding TitleTextSize}"
+           Text="APPS" />
 
     <Grid Grid.Row="0">
       <Grid.RowDefinitions>
@@ -87,13 +63,11 @@
                    VerticalOptions="FillAndExpand"
                    HorizontalOptions="StartAndExpand"
                    Orientation="Horizontal">
-        <Image Source="ic_tizen_apps_additional_back.png"
-               WidthRequest="40"
-               HeightRequest="40"
+        <Image x:Name="BackKeyInfoImage"
+               Source="ic_tizen_apps_additional_back.png"
                VerticalOptions="Center"/>
         <Label x:Name="BackKeyInfo"
                Style="{StaticResource backKeyInfoText}"
-               Margin="6, 0, 0, 0"
                VerticalOptions="Center"
                HorizontalOptions="End"
                HorizontalTextAlignment="Start" />
diff --git a/TVApps/TVApps/Views/MainPage.xaml.cs b/TVApps/TVApps/Views/MainPage.xaml.cs
index 972bed8..0c9ad1c 100644
--- a/TVApps/TVApps/Views/MainPage.xaml.cs
+++ b/TVApps/TVApps/Views/MainPage.xaml.cs
@@ -31,6 +31,11 @@ namespace TVApps.Views
     /// </summary>
     public partial class MainPage : ContentPage
     {
+        /// <summary>
+        /// SubPanel icon's transition height value when it focused.
+        /// </summary>
+        private int showTransitionHeight = SizeUtils.GetHeightSize(12);
+
         /// <summary>
         /// Identifies the CurrentStatus bindable property
         /// </summary>
@@ -99,7 +104,7 @@ namespace TVApps.Views
         /// </summary>
         private async void PlayShowAnimation()
         {
-            await AppList.TranslateTo(0, 12, 0);
+            await AppList.TranslateTo(0, showTransitionHeight, 0);
 #pragma warning disable CS4014
             AppList.TranslateTo(0, 0, 667);
 #pragma warning restore CS4014
@@ -116,6 +121,14 @@ namespace TVApps.Views
         public MainPage()
         {
             InitializeComponent();
+
+            int backKeyImageSize = SizeUtils.GetHeightSize(40);
+            BackKeyInfoImage.WidthRequest = backKeyImageSize;
+            BackKeyInfoImage.HeightRequest = backKeyImageSize;
+            BackKeyInfo.FontSize = SizeUtils.GetFontSize(28);
+            BackKeyInfo.Margin = new Thickness(SizeUtils.GetWidthSize(6), 0, 0, 0);
+
+
             PropertyChanged += MainPagePropertyChanged;
             SetCurrentStatus(AppsStatus.Default);
             PlayShowAnimation();
diff --git a/TVHome/TVHome.TizenTV/TVHome.TizenTV.cs b/TVHome/TVHome.TizenTV/TVHome.TizenTV.cs
index 268d499..af42553 100755
--- a/TVHome/TVHome.TizenTV/TVHome.TizenTV.cs
+++ b/TVHome/TVHome.TizenTV/TVHome.TizenTV.cs
@@ -59,7 +59,7 @@ namespace TVHome.TizenTV
         protected override void OnCreate()
         {
             base.OnCreate();
-            var app = new App();
+            var app = new App(MainWindow.ScreenSize.Width, MainWindow.ScreenSize.Height, ElmSharp.Elementary.GetScale());
             notification = app;
 
             AppResourcePath = DirectoryInfo.Resource;
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_all_138.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_all_138.png
new file mode 100644
index 0000000..ccc12ce
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_all_138.png differ
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_all_182.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_all_182.png
new file mode 100644
index 0000000..c9cbbcb
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_all_182.png differ
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_brightness_138.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_brightness_138.png
new file mode 100644
index 0000000..2d7b9b9
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_brightness_138.png differ
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_brightness_182.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_brightness_182.png
new file mode 100644
index 0000000..c320395
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_brightness_182.png differ
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_color_138.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_color_138.png
new file mode 100644
index 0000000..89040cc
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_color_138.png differ
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_color_182.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_color_182.png
new file mode 100644
index 0000000..8a19652
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_color_182.png differ
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_contrast_138.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_contrast_138.png
new file mode 100644
index 0000000..c88b18a
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_contrast_138.png differ
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_contrast_182.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_contrast_182.png
new file mode 100644
index 0000000..e264e88
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_contrast_182.png differ
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_tint_138.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_tint_138.png
new file mode 100644
index 0000000..7f9a87c
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_tint_138.png differ
diff --git a/TVHome/TVHome.TizenTV/res/ic_home_settings_tint_182.png b/TVHome/TVHome.TizenTV/res/ic_home_settings_tint_182.png
new file mode 100644
index 0000000..c3b9169
Binary files /dev/null and b/TVHome/TVHome.TizenTV/res/ic_home_settings_tint_182.png differ
diff --git a/TVHome/TVHome/Controls/MainPanelButton.xaml b/TVHome/TVHome/Controls/MainPanelButton.xaml
index 92dbd82..4f28b81 100755
--- a/TVHome/TVHome/Controls/MainPanelButton.xaml
+++ b/TVHome/TVHome/Controls/MainPanelButton.xaml
@@ -4,8 +4,7 @@
                       xmlns:Controls="clr-namespace:TVHome.Controls"
                       x:Class="TVHome.Controls.MainPanelButton">
     <RelativeLayout Opacity="0.01"
-                    HeightRequest="240"
-                    WidthRequest="236"
+                    x:Name="ButtonBox"
                     HorizontalOptions="Center"
                     VerticalOptions="Center">
         <Image x:Name="ButtonBgImage"
@@ -28,11 +27,10 @@
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3916}"
                Source="{Binding CurrentStateDescription.IconPath}" />
         <Label x:Name="ButtonTitle"
-               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.125}"
+               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.15}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
-               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.875}"
+               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.85}"
                Opacity="0"
-               FontSize="58"
                TextColor="White"
                LineBreakMode="TailTruncation"
                HorizontalTextAlignment="Center"
diff --git a/TVHome/TVHome/Controls/MainPanelButton.xaml.cs b/TVHome/TVHome/Controls/MainPanelButton.xaml.cs
index 6b09376..86c645c 100755
--- a/TVHome/TVHome/Controls/MainPanelButton.xaml.cs
+++ b/TVHome/TVHome/Controls/MainPanelButton.xaml.cs
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+using LibTVRefCommonPortable.Utils;
 using System;
 using Xamarin.Forms;
 
@@ -44,6 +45,11 @@ namespace TVHome.Controls
         public MainPanelButton()
         {
             InitializeComponent();
+
+            ButtonBox.WidthRequest = SizeUtils.GetWidthSize(236);
+            ButtonBox.HeightRequest = SizeUtils.GetHeightSize(260);
+            ButtonTitle.FontSize = SizeUtils.GetFontSize(26);
+
             PropertyChanged += MainPanelButton_PropertyChanged;
         }
 
diff --git a/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml b/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml
index cd7b176..be9d49c 100755
--- a/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml
+++ b/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml
@@ -4,9 +4,7 @@
                       xmlns:Controls="clr-namespace:TVHome.Controls"
                       x:Class="TVHome.Controls.SubPanelAllAppsButton">
   <RelativeLayout x:Name="ButtonBox"
-             HeightRequest="230"
-             WidthRequest="182"
-             HorizontalOptions="Center">
+                  HorizontalOptions="Center">
     <Image x:Name="ButtonBgImage"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.120879}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.095652}"
@@ -32,7 +30,6 @@
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.758241}"
            Opacity="0.6"
            TextColor="White"
-           FontSize="52"
            LineBreakMode="TailTruncation"
            HorizontalTextAlignment="Center"
            Text="{Binding CurrentStateDescription.Label}" />
diff --git a/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml.cs b/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml.cs
index b7a8170..c8e8d22 100755
--- a/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml.cs
+++ b/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml.cs
@@ -25,12 +25,21 @@ namespace TVHome.Controls
     /// </summary>
     public partial class SubPanelAllAppsButton : PanelButton
     {
+        /// <summary>
+        /// SubPanel icon's transition height value when it focused.
+        /// </summary>
+        private int selectTransitionHeight = SizeUtils.GetHeightSize(22);
+
         /// <summary>
         /// Constructor
         /// </summary>
         public SubPanelAllAppsButton()
         {
             InitializeComponent();
+
+            ButtonBox.WidthRequest = SizeUtils.GetWidthSize(236);
+            ButtonBox.HeightRequest = SizeUtils.GetHeightSize(240);
+            ButtonTitle.FontSize = SizeUtils.GetFontSize(26);
         }
 
         /// <summary>
@@ -62,7 +71,7 @@ namespace TVHome.Controls
 
 #pragma warning disable CS4014
             ButtonTitle.FadeTo(0.99, 300);
-            ButtonTitle.TranslateTo(0, 22, 300);
+            ButtonTitle.TranslateTo(0, selectTransitionHeight, 300);
             ButtonImage.ScaleTo(1.3, 300);
 #pragma warning restore CS4014
             await ButtonBgImage.ScaleTo(1.3, 300);
diff --git a/TVHome/TVHome/Controls/SubPanelButton.xaml b/TVHome/TVHome/Controls/SubPanelButton.xaml
index b41d065..269ec4b 100755
--- a/TVHome/TVHome/Controls/SubPanelButton.xaml
+++ b/TVHome/TVHome/Controls/SubPanelButton.xaml
@@ -4,9 +4,7 @@
                       xmlns:Controls="clr-namespace:TVHome.Controls"
                       x:Class="TVHome.Controls.SubPanelButton">
   <RelativeLayout x:Name="ButtonBox"
-               WidthRequest="182"
-               HeightRequest="230"
-               HorizontalOptions="Center">
+                  HorizontalOptions="Center">
     <Image x:Name="ButtonImage"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.120879}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.095652}"
@@ -26,7 +24,6 @@
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.758241}"
            Opacity="0.6"
            TextColor="White"
-           FontSize="52"
            LineBreakMode="TailTruncation"
            HorizontalTextAlignment="Center"
            Text="{Binding CurrentStateDescription.Label}" />
diff --git a/TVHome/TVHome/Controls/SubPanelButton.xaml.cs b/TVHome/TVHome/Controls/SubPanelButton.xaml.cs
index b122179..764e660 100755
--- a/TVHome/TVHome/Controls/SubPanelButton.xaml.cs
+++ b/TVHome/TVHome/Controls/SubPanelButton.xaml.cs
@@ -27,15 +27,35 @@ namespace TVHome.Controls
     /// </summary>
     public partial class SubPanelButton : PanelButton
     {
+        /// <summary>
+        /// A flag which enable showing a popup
+        /// </summary>
         private bool isPopupShowing = false;
+
+        /// <summary>
+        /// SubPanel icon's transition height value when it focused.
+        /// </summary>
+        private int selectTransitionHeight = SizeUtils.GetHeightSize(22);
+
+        /// <summary>
+        /// SubPanel icon's transition height value when it focused.
+        /// </summary>
+        private int moveTransitionHeight = SizeUtils.GetHeightSize(130);
+
         /// <summary>
         /// Constructor
         /// </summary>
         public SubPanelButton()
         {
             InitializeComponent();
+
+            ButtonBox.WidthRequest = SizeUtils.GetWidthSize(236);
+            ButtonBox.HeightRequest = SizeUtils.GetHeightSize(240);
+            ButtonTitle.FontSize = SizeUtils.GetFontSize(26);
+
             //InitializeLongTapGesture();
         }
+
         /*
         private void InitializeLongTapGesture()
         {
@@ -128,7 +148,7 @@ namespace TVHome.Controls
             if (moveMode)
             {
                 ButtonTitle.FadeTo(0, 300);
-                View.TranslateTo(0, -130, 300);
+                View.TranslateTo(0, -moveTransitionHeight, 300);
                 ButtonImage.ScaleTo(1, 300);
                 isMoveMode = true;
 
@@ -139,6 +159,7 @@ namespace TVHome.Controls
                     LeftBtnImg.FadeTo(0, 300);
                     await RightBtnImg.FadeTo(0, 300);
                 }
+
                 LeftBtnImg.FadeTo(1, 300);
                 await RightBtnImg.FadeTo(1, 300);
             }
@@ -190,7 +211,7 @@ namespace TVHome.Controls
 
 #pragma warning disable CS4014
             ButtonTitle.FadeTo(0.99, 300);
-            ButtonTitle.TranslateTo(0, 22, 300);
+            ButtonTitle.TranslateTo(0, selectTransitionHeight, 300);
 #pragma warning restore CS4014
             await ButtonImage.ScaleTo(1.3, 300);
         }
diff --git a/TVHome/TVHome/Controls/SubPanelReservedButton.xaml b/TVHome/TVHome/Controls/SubPanelReservedButton.xaml
index b40730a..f05dbf4 100755
--- a/TVHome/TVHome/Controls/SubPanelReservedButton.xaml
+++ b/TVHome/TVHome/Controls/SubPanelReservedButton.xaml
@@ -4,9 +4,7 @@
                       xmlns:Controls="clr-namespace:TVHome.Controls"
                       x:Class="TVHome.Controls.SubPanelReservedButton">
   <RelativeLayout x:Name = "ButtonBox"
-               HeightRequest="230"
-               WidthRequest="182"
-               HorizontalOptions="Center">
+                  HorizontalOptions="Center">
     <Image x:Name="ButtonBgImage"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.120879}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.095652}"
@@ -32,7 +30,6 @@
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.758241}"
            Opacity="0.6"
            TextColor="White"
-           FontSize="52"
            LineBreakMode="TailTruncation"
            HorizontalTextAlignment="Center"
            Text="{Binding CurrentStateDescription.Label}" />
diff --git a/TVHome/TVHome/Controls/SubPanelReservedButton.xaml.cs b/TVHome/TVHome/Controls/SubPanelReservedButton.xaml.cs
index cbc791c..2b18a44 100755
--- a/TVHome/TVHome/Controls/SubPanelReservedButton.xaml.cs
+++ b/TVHome/TVHome/Controls/SubPanelReservedButton.xaml.cs
@@ -26,12 +26,21 @@ namespace TVHome.Controls
     /// </summary>
     public partial class SubPanelReservedButton : PanelButton
     {
+        /// <summary>
+        /// SubPanel icon's transition height value when it focused.
+        /// </summary>
+        private int selectTransitionHeight = SizeUtils.GetHeightSize(22);
+
         /// <summary>
         /// Constructor
         /// </summary>
         public SubPanelReservedButton()
         {
             InitializeComponent();
+
+            ButtonBox.WidthRequest = SizeUtils.GetWidthSize(236);
+            ButtonBox.HeightRequest = SizeUtils.GetHeightSize(240);
+            ButtonTitle.FontSize = SizeUtils.GetFontSize(26);
         }
 
         /// <summary>
@@ -63,7 +72,7 @@ namespace TVHome.Controls
 
 #pragma warning disable CS4014
             ButtonTitle.FadeTo(0.99, 300);
-            ButtonTitle.TranslateTo(0, 22, 300);
+            ButtonTitle.TranslateTo(0, selectTransitionHeight, 300);
             ButtonImage.ScaleTo(1.3, 300);
 #pragma warning restore CS4014
             await ButtonBgImage.ScaleTo(1.3, 300);
diff --git a/TVHome/TVHome/Controls/SubPanelSettingButton.xaml b/TVHome/TVHome/Controls/SubPanelSettingButton.xaml
index 0427bdb..45a7e84 100755
--- a/TVHome/TVHome/Controls/SubPanelSettingButton.xaml
+++ b/TVHome/TVHome/Controls/SubPanelSettingButton.xaml
@@ -4,9 +4,7 @@
                       xmlns:Controls="clr-namespace:TVHome.Controls"
                       x:Class="TVHome.Controls.SubPanelSettingButton">
   <RelativeLayout x:Name="ButtonBox"
-               WidthRequest="182"
-               HeightRequest="230"
-               HorizontalOptions="Center" >
+                  HorizontalOptions="Center" >
     <Image x:Name="ButtonImage"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.120879}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.095652}"
@@ -26,7 +24,6 @@
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.758241}"
            Opacity="0.6"
            TextColor="White"
-           FontSize="38"
            LineBreakMode="TailTruncation"
            HorizontalTextAlignment="Center"
            Text="{Binding CurrentStateDescription.Label}"/>
diff --git a/TVHome/TVHome/Controls/SubPanelSettingButton.xaml.cs b/TVHome/TVHome/Controls/SubPanelSettingButton.xaml.cs
index d491734..a298c49 100755
--- a/TVHome/TVHome/Controls/SubPanelSettingButton.xaml.cs
+++ b/TVHome/TVHome/Controls/SubPanelSettingButton.xaml.cs
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+using LibTVRefCommonPortable.Utils;
 using System;
 using Xamarin.Forms;
 
@@ -24,12 +25,21 @@ namespace TVHome.Controls
     /// </summary>
     public partial class SubPanelSettingButton : PanelButton
     {
+        /// <summary>
+        /// SubPanel icon's transition height value when it focused.
+        /// </summary>
+        private int selectTransitionHeight = SizeUtils.GetHeightSize(22);
+
         /// <summary>
         /// A Constructor
         /// </summary>
         public SubPanelSettingButton()
         {
             InitializeComponent();
+
+            ButtonBox.WidthRequest = SizeUtils.GetWidthSize(236);
+            ButtonBox.HeightRequest = SizeUtils.GetHeightSize(240);
+            ButtonTitle.FontSize = SizeUtils.GetFontSize(26);
         }
 
         /// <summary>
@@ -61,7 +71,7 @@ namespace TVHome.Controls
 
 #pragma warning disable CS4014
             ButtonTitle.FadeTo(0.99, 300);
-            ButtonTitle.TranslateTo(0, 22, 300);
+            ButtonTitle.TranslateTo(0, selectTransitionHeight, 300);
 #pragma warning restore CS4014
             await ButtonImage.ScaleTo(1.3, 300);
         }
diff --git a/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml b/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml
index 1ac9573..a1c36c2 100755
--- a/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml
+++ b/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml
@@ -3,47 +3,40 @@
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       xmlns:Controls="clr-namespace:TVHome.Controls"
                       x:Class="TVHome.Controls.SubPanelThumbnailButton">
-    <RelativeLayout Opacity="0.99">
-        <BoxView x:Name="ButtonBox"
-                WidthRequest="320"
-                HeightRequest="180"
-                Opacity="0"/>
-        <Image x:Name="ThumnailDimLayer"
-                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
-                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
-                Opacity="0.99"
-                Source="img_tizen_home_list_dim_recent.png"/>
-        <Image x:Name="ThumbnailImage"
-                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
-                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
-                Source="{Binding ScreenshotPath}" />
-        <Image x:Name="ThumbnailGradient"
-                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
-                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
-                Source="ic_tizen_list_thumbnail_gradient_normal.9.png" />
-        <Image x:Name="ThumbnailIcon"
-                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.043}"
-                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.689}"
-                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.131}"
-                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.233}"
-                Source="{Binding CurrentStateDescription.IconPath}" />
-        <Label x:Name="ThumbnailTitle"
-                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.206}"
-                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.722}"
-                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.75}"
-                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.166}"
-                LineBreakMode="TailTruncation"
-                HorizontalTextAlignment="Start"
-                VerticalTextAlignment="Center"
-                Text="{Binding CurrentStateDescription.Label}"
-                TextColor="#FFFFFF"
-                FontSize="70"/>
-        <Button x:Name="ButtonFocusArea"
-                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
-                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
-                Focused="OnFocused"
-                Unfocused="OnUnfocused"
-                Clicked="OnClicked"
-                Opacity="0" />
-    </RelativeLayout>
+  <RelativeLayout x:Name="ButtonBox">
+    <Image x:Name="ThumnailDimLayer"
+            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
+            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
+            Opacity="0.99"
+            Source="img_tizen_home_list_dim_recent.png"/>
+    <Image x:Name="ThumbnailImage"
+            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
+            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
+            Source="{Binding ScreenshotPath}" />
+    <Image x:Name="ThumbnailGradient"
+            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
+            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
+            Source="ic_tizen_list_thumbnail_gradient_normal.9.png" />
+    <Image x:Name="ThumbnailIcon"
+            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.043}"
+            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.689}"
+            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.131}"
+            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.233}"
+            Source="{Binding CurrentStateDescription.IconPath}" />
+    <Label x:Name="ThumbnailTitle"
+            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.206}"
+            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.722}"
+            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.75}"
+            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.166}"
+            LineBreakMode="TailTruncation"
+            Text="{Binding CurrentStateDescription.Label}"
+            TextColor="#FFFFFF"/>
+    <Button x:Name="ButtonFocusArea"
+            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
+            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
+            Focused="OnFocused"
+            Unfocused="OnUnfocused"
+            Clicked="OnClicked"
+            Opacity="0" />
+  </RelativeLayout>
 </Controls:PanelButton>
\ No newline at end of file
diff --git a/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml.cs b/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml.cs
index 00bd0a2..a91eb4e 100755
--- a/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml.cs
+++ b/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml.cs
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+using LibTVRefCommonPortable.Utils;
 using System;
 using Tizen.Xamarin.Forms.Extension;
 using Xamarin.Forms;
@@ -24,15 +25,25 @@ namespace TVHome.Controls
     /// </summary>
     public partial class SubPanelThumbnailButton : PanelButton
     {
+        /// <summary>
+        /// A flag which will enable showing a popup.
+        /// </summary>
         private bool isPopupShowing = false;
+
         /// <summary>
         /// Constructor
         /// </summary>
         public SubPanelThumbnailButton()
         {
             InitializeComponent();
+
+            ButtonBox.WidthRequest = SizeUtils.GetWidthSize(320);
+            ButtonBox.HeightRequest = SizeUtils.GetHeightSize(180);
+            ThumbnailTitle.FontSize = SizeUtils.GetFontSize(26);
+
             //InitializeLongTapGesture();
         }
+
         /*
         private void InitializeLongTapGesture()
         {
diff --git a/TVHome/TVHome/TVHome.cs b/TVHome/TVHome/TVHome.cs
index 21e8325..4c2fc53 100755
--- a/TVHome/TVHome/TVHome.cs
+++ b/TVHome/TVHome/TVHome.cs
@@ -78,8 +78,15 @@ namespace TVHome
         /// A Constructor
         /// Sets main page to MainPage instance
         /// </summary>
-        public App()
+        /// <param name="screenWidth">Screen Width</param>
+        /// <param name="screenHeight">Screen Height</param>
+        /// <param name="scaleRatio">Scale ratio</param>
+        public App(int screenWidth, int screenHeight, double scaleRatio)
         {
+            SizeUtils.ScreenWidth = screenWidth;
+            SizeUtils.ScreenHeight = screenHeight;
+            SizeUtils.ScaleRatio = scaleRatio;
+
             MainPage = new MainPage();
         }
 
diff --git a/TVHome/TVHome/ViewModels/MainPageViewModel.cs b/TVHome/TVHome/ViewModels/MainPageViewModel.cs
index 0e95d44..f79b72c 100755
--- a/TVHome/TVHome/ViewModels/MainPageViewModel.cs
+++ b/TVHome/TVHome/ViewModels/MainPageViewModel.cs
@@ -110,6 +110,63 @@ namespace TVHome.ViewModels
         /// </summary>
         public event PropertyChangedEventHandler PropertyChanged;
 
+        /// <summary>
+        /// Main panel icon's width
+        /// </summary>
+        public int MainPanelIconWidth
+        {
+            get
+            {
+                return SizeUtils.GetWidthSize(236);
+            }
+        }
+
+        /// <summary>
+        /// Sub panel's padding size
+        /// </summary>
+        public Thickness SubPanelPadding
+        {
+            get
+            {
+                int lr = SizeUtils.GetWidthSize(74);
+                return new Thickness(lr, 0, lr, SizeUtils.GetWidthSize(26));
+            }
+        }
+
+        /// <summary>
+        /// Sub panel's spacing size
+        /// </summary>
+        public int SubPanelSpacing
+        {
+            get
+            {
+                // TODO : set proper size
+                return SizeUtils.GetWidthSize(34);
+            }
+        }
+
+        /// <summary>
+        /// Information text font size.
+        /// </summary>
+        public int NoContentInformationFontSize
+        {
+            get
+            {
+                return SizeUtils.GetFontSize(28);
+            }
+        }
+
+        /// <summary>
+        /// Sub thumbnail panel's padding size
+        /// </summary>
+        public Thickness SubThumbNailPanelPadding
+        {
+            get
+            {
+                return new Thickness(SizeUtils.GetHeightSize(223), SizeUtils.GetWidthSize(32));
+            }
+        }
+
         /// <summary>
         /// Constructor
         /// Initialize MainPanel, SubPanel, Command and EventListeners
@@ -222,14 +279,22 @@ namespace TVHome.ViewModels
             // TODO : Revert this before release
             //string[] AppControlID = { "org.tizen.settings", "org.tizen.apps", "org.tizen.settings" };
             string[] AppControlID = { "org.tizen.xaapps", "org.tizen.xaapps", "org.tizen.settings" };
-            string[] AppDefaultIconPath = { "ic_tizen_home_menu_recent_normal.png", "ic_tizen_home_menu_apps_normal.png", "ic_tizen_home_menu_settings_normal.png" };
-            string[] AppFocusedIconPath = { "ic_tizen_home_menu_recent_focused.png", "ic_tizen_home_menu_apps_focused.png", "ic_tizen_home_menu_settings_focused.png" };
-            string[] AppSelectedIconPath = { "ic_tizen_home_menu_recent_selected.png", "ic_tizen_home_menu_apps_selected.png", "ic_tizen_home_menu_settings_selected.png" };
-            string[] AppUnselectIconPath = { "ic_tizen_home_menu_recent_unselect.png", "ic_tizen_home_menu_apps_unselect.png", "ic_tizen_home_menu_settings_unselect.png" };
+            string[] AppIconPath =
+                {
+                "ic_tizen_home_menu_{0}_normal.png",
+                "ic_tizen_home_menu_{0}_focused.png",
+                "ic_tizen_home_menu_{0}_selected.png",
+                "ic_tizen_home_menu_{0}_unselect.png"
+            };
 
             List<ShortcutInfo> TempList = new List<ShortcutInfo>();
             for (int i = 0; i < AppName.Length; i++)
             {
+                AppControlAction appControlAction = new AppControlAction()
+                {
+                    AppID = AppControlID[i]
+                };
+
                 ShortcutInfo shortcutInfo = new HomeMenuAppShortcutInfo()
                 {
                     StateDescriptions =
@@ -239,11 +304,8 @@ namespace TVHome.ViewModels
                             new StateDescription
                             {
                                 Label = AppName[i],
-                                IconPath = AppDefaultIconPath[i],
-                                Action = new AppControlAction()
-                                {
-                                    AppID = AppControlID[i]
-                                }
+                                IconPath = String.Format(AppIconPath[0], AppName[i].ToLower()),
+                                Action = appControlAction,
                             }
                         },
                         {
@@ -251,11 +313,8 @@ namespace TVHome.ViewModels
                             new StateDescription
                             {
                                 Label = AppName[i],
-                                IconPath = AppFocusedIconPath[i],
-                                Action = new AppControlAction()
-                                {
-                                    AppID = AppControlID[i]
-                                }
+                                IconPath = String.Format(AppIconPath[1], AppName[i].ToLower()),
+                                Action = appControlAction,
                             }
                         },
                         {
@@ -263,11 +322,8 @@ namespace TVHome.ViewModels
                             new StateDescription
                             {
                                 Label = AppName[i],
-                                IconPath = AppSelectedIconPath[i],
-                                Action = new AppControlAction()
-                                {
-                                    AppID = AppControlID[i]
-                                }
+                                IconPath = String.Format(AppIconPath[2], AppName[i].ToLower()),
+                                Action = appControlAction,
                             }
                         },
                         {
@@ -275,11 +331,8 @@ namespace TVHome.ViewModels
                             new StateDescription
                             {
                                 Label = AppName[i],
-                                IconPath = AppUnselectIconPath[i],
-                                Action = new AppControlAction()
-                                {
-                                    AppID = AppControlID[i]
-                                }
+                                IconPath = String.Format(AppIconPath[3], AppName[i].ToLower()),
+                                Action = appControlAction,
                             }
                         },
                     },
@@ -317,11 +370,51 @@ namespace TVHome.ViewModels
         /// </summary>
         private void MakeSettingsButtons()
         {
-            string[] ShortCutLabel = { "Settings", "Brightness", "Contrast", "Color", "Tint" };
+            string[] ShortCutLabel = { "Brightness", "Contrast", "Color", "Tint" };
+            string[] shortCutActionID = { "org.tizen.settings", "org.tizen.settings", "org.tizen.settings", "org.tizen.settings" };
 
             List<ShortcutInfo> TempList = new List<ShortcutInfo>();
+
+            ShortcutInfo Settings = new SettingShortcutInfo()
+            {
+                StateDescriptions =
+                {
+                    {
+                        "default",
+                        new StateDescription
+                        {
+                            Label = "All Settings",
+                            IconPath = "ic_home_settings_all_138.png",
+                            Action = new AppControlAction()
+                            {
+                                AppID = "org.tizen.settings"
+                            }
+                        }
+                    },
+                    {
+                        "focused",
+                        new StateDescription
+                        {
+                            Label = "All Settings",
+                            IconPath = "ic_home_settings_all_182.png",
+                            Action = new AppControlAction()
+                            {
+                                AppID = "org.tizen.settings"
+                            }
+                        }
+                    },
+                }
+            };
+            Settings.UpdateState();
+            TempList.Add(Settings);
+
             for (int i = 0; i < ShortCutLabel.Length; i++)
             {
+                AppControlAction appControlAction = new AppControlAction()
+                {
+                    AppID = shortCutActionID[i]
+                };
+
                 ShortcutInfo shortcutInfo = new SettingShortcutInfo()
                 {
                     StateDescriptions =
@@ -331,11 +424,17 @@ namespace TVHome.ViewModels
                             new StateDescription
                             {
                                 Label = ShortCutLabel[i],
-                                IconPath = "ic_tizen_home_menu_settings_normal.png",
-                                Action = new AppControlAction()
-                                {
-                                    AppID = "org.tizen.settings"
-                                }
+                                IconPath = "ic_home_settings_" + ShortCutLabel[i].ToLower() + "_138.png",
+                                Action = appControlAction,
+                            }
+                        },
+                        {
+                            "focused",
+                            new StateDescription
+                            {
+                                Label = ShortCutLabel[i],
+                                IconPath = "ic_home_settings_" + ShortCutLabel[i].ToLower() + "_182.png",
+                                Action = appControlAction,
                             }
                         },
                     },
@@ -379,6 +478,7 @@ namespace TVHome.ViewModels
         /// <summary>
         /// Removes specified recent application and updates the list to Recent SubPanel
         /// </summary>
+        /// <param name="appId">A application ID</param>
         private void RemoveRecentApplication(string appId)
         {
             TVHomeImpl.GetInstance.RecentShortcutControllerInstance.Remove(appId);
diff --git a/TVHome/TVHome/Views/MainPage.xaml.cs b/TVHome/TVHome/Views/MainPage.xaml.cs
index eae6296..f1c3b9b 100755
--- a/TVHome/TVHome/Views/MainPage.xaml.cs
+++ b/TVHome/TVHome/Views/MainPage.xaml.cs
@@ -66,7 +66,7 @@ namespace TVHome.Views
         private async void Iconified()
         {
 #pragma warning disable CS4014
-            SubPanelDictionary[SelectedMenuName]?.TranslateTo(0.0, 100, 150);
+            SubPanelDictionary[SelectedMenuName]?.TranslateTo(0.0, SizeUtils.GetWidthSize(100), 150);
             DimmedBgImage.FadeTo(0.0, 150);
 #pragma warning restore CS4014
             await PageMainPanel.ScaleTo(0.0, 150);
@@ -222,6 +222,7 @@ namespace TVHome.Views
             {
                 AppsSubPanel.ChangeToDefaultMode();
             }
+
             return true;
         }
     }
diff --git a/TVHome/TVHome/Views/MainPanel.xaml b/TVHome/TVHome/Views/MainPanel.xaml
index 4f5892e..25c4cb7 100644
--- a/TVHome/TVHome/Views/MainPanel.xaml
+++ b/TVHome/TVHome/Views/MainPanel.xaml
@@ -7,9 +7,9 @@
     <Grid x:Name="PanelButtonGrid">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*" />
-            <ColumnDefinition Width="236" />
-            <ColumnDefinition Width="236" />
-            <ColumnDefinition Width="236" />
+            <ColumnDefinition Width="{Binding MainPanelIconWidth}" />
+            <ColumnDefinition Width="{Binding MainPanelIconWidth}" />
+            <ColumnDefinition Width="{Binding MainPanelIconWidth}" />
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
         <Grid.ColumnSpacing>0</Grid.ColumnSpacing>
diff --git a/TVHome/TVHome/Views/MainPanel.xaml.cs b/TVHome/TVHome/Views/MainPanel.xaml.cs
index 8ef8b4f..fc02f4d 100755
--- a/TVHome/TVHome/Views/MainPanel.xaml.cs
+++ b/TVHome/TVHome/Views/MainPanel.xaml.cs
@@ -20,6 +20,7 @@ using LibTVRefCommonPortable.DataModels;
 using TVHome.ViewModels;
 using Xamarin.Forms;
 using System.Threading.Tasks;
+using LibTVRefCommonPortable.Utils;
 
 namespace TVHome.Views
 {
@@ -28,6 +29,11 @@ namespace TVHome.Views
     /// </summary>
     public partial class MainPanel : Panel
     {
+        /// <summary>
+        /// MainPanel icon's transition height value when it focused.
+        /// </summary>
+        private int selectTransitionHeight = SizeUtils.GetHeightSize(-78);
+
         /// <summary>
         /// Constructor
         /// </summary>
@@ -67,7 +73,7 @@ namespace TVHome.Views
                 {
                     item.DoAction();
                 });
-                PanelButtonGrid.Children.Add(button.View,index,0);
+                PanelButtonGrid.Children.Add(button.View, index, 0);
 
                 index++;
                 menuIndex++;
@@ -107,7 +113,7 @@ namespace TVHome.Views
         public async void SelectPanel()
         {
             await Task.Delay(300);
-            await this.TranslateTo(0, -78, 300);
+            await this.TranslateTo(0, selectTransitionHeight, 300);
         }
 
         /// <summary>
diff --git a/TVHome/TVHome/Views/SubPanel.xaml b/TVHome/TVHome/Views/SubPanel.xaml
index 5f6815c..9e89e08 100755
--- a/TVHome/TVHome/Views/SubPanel.xaml
+++ b/TVHome/TVHome/Views/SubPanel.xaml
@@ -8,8 +8,8 @@
               HorizontalOptions="Center">
     <StackLayout x:Name="PanelButtonStack"
                  Orientation="Horizontal"
-                 Padding="74,0,74,26"
-                 Spacing="34">
+                 Padding="{Binding SubPanelPadding}"
+                 Spacing="{Binding SubPanelSpacing}">
     </StackLayout>
   </ScrollView>
 </Views:Panel>
\ No newline at end of file
diff --git a/TVHome/TVHome/Views/SubPanel.xaml.cs b/TVHome/TVHome/Views/SubPanel.xaml.cs
index 21dece5..8917838 100755
--- a/TVHome/TVHome/Views/SubPanel.xaml.cs
+++ b/TVHome/TVHome/Views/SubPanel.xaml.cs
@@ -21,6 +21,7 @@ using Xamarin.Forms;
 using System.Threading.Tasks;
 using System.Windows.Input;
 using System.Collections.Generic;
+using LibTVRefCommonPortable.Utils;
 
 namespace TVHome.Views
 {
@@ -44,6 +45,11 @@ namespace TVHome.Views
         /// </summary>
         public ICommand OnMoveCommand { get; set; }
 
+        /// <summary>
+        /// SubPanel icon's transition height value when it focused.
+        /// </summary>
+        private int selectTransitionHeight = SizeUtils.GetHeightSize(146);
+
         /// <summary>
         /// Constructor
         /// </summary>
@@ -135,6 +141,7 @@ namespace TVHome.Views
                             }
                         });
                     }
+
                     ButtonList.Add(button);
                 }
                 else
@@ -197,7 +204,7 @@ namespace TVHome.Views
 
 #pragma warning disable CS4014
             PanelScrollView.ScrollToAsync(0, 0, true);
-            this.TranslateTo(0, 146, 300);
+            this.TranslateTo(0, selectTransitionHeight, 300);
 #pragma warning restore CS4014
             await this.FadeTo(0, 300);
         }
@@ -243,7 +250,7 @@ namespace TVHome.Views
 
             await Task.Delay(300);
 #pragma warning disable CS4014
-            this.TranslateTo(0, -146, 300);
+            this.TranslateTo(0, -selectTransitionHeight, 300);
 #pragma warning restore CS4014
             await this.FadeTo(0.99, 300);
         }
@@ -283,7 +290,7 @@ namespace TVHome.Views
             View nextItemView = ButtonViewList[nextIndex];
 
             originItemView.TranslateTo(originItemView.TranslationX + 216, originItemView.TranslationY, 300);
-            nextItemView.TranslateTo(nextItemView .TranslationX- 216, 0, 300);
+            nextItemView.TranslateTo(nextItemView.TranslationX - 216, 0, 300);
 
             ButtonViewList[index] = nextItemView;
             ButtonViewList[nextIndex] = originItemView;
diff --git a/TVHome/TVHome/Views/SubThumbnailPanel.xaml b/TVHome/TVHome/Views/SubThumbnailPanel.xaml
index 8e78ccd..32f2fb4 100755
--- a/TVHome/TVHome/Views/SubThumbnailPanel.xaml
+++ b/TVHome/TVHome/Views/SubThumbnailPanel.xaml
@@ -14,7 +14,7 @@
                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}" >
             <StackLayout x:Name="PanelButtonStack"
                         Orientation="Horizontal"
-                        Padding="222.61,31.65,222.61,31.65"
+                        Padding="{Binding SubThumbNailPanelPadding}"
                         IsVisible="true">
             </StackLayout>
         </ScrollView>
@@ -33,7 +33,7 @@
                   RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=BackgroundBox ,Property=Width, Factor=0.28858}"
                   Text="No Content to display"
                   HorizontalTextAlignment="Center"
-                  FontSize="40"
+                  FontSize="{Binding NoContentInformationFontSize}"
                   TextColor="White" />
         </RelativeLayout>
     </RelativeLayout>
diff --git a/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs b/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs
index e690a2c..3e8beb1 100755
--- a/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs
+++ b/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs
@@ -30,11 +30,16 @@ namespace TVHome.Views
     /// </summary>
     public partial class SubThumbnailPanel : Panel
     {
+        /// <summary>
+        /// A list has panel button that consist of this SubThumbnailPanel.
+        /// </summary>
         private List<PanelButton> ButtonList;
+
         /// <summary>
         /// Identifies the ShowNoContentsInfo bindable property
         /// </summary>
         public static readonly BindableProperty ShowNoContentsInfoProperty = BindableProperty.Create("ShowNoContentsInfo", typeof(bool), typeof(SubThumbnailPanel), default(bool));
+
         /// <summary>
         /// A flag indicates whether displaying "no content info" is needed or not
         /// </summary>
@@ -44,6 +49,11 @@ namespace TVHome.Views
             set { SetValue(ShowNoContentsInfoProperty, value); }
         }
 
+        /// <summary>
+        /// SubPanel icon's transition height value when it focused.
+        /// </summary>
+        private int selectTransitionHeight = SizeUtils.GetHeightSize(140);
+
         /// <summary>
         /// Constructor
         /// </summary>
@@ -156,7 +166,7 @@ namespace TVHome.Views
 
 #pragma warning disable CS4014
                 PanelScrollView.ScrollToAsync(0, 0, true);
-                this.TranslateTo(0, 140, 300);
+                this.TranslateTo(0, selectTransitionHeight, 300);
 #pragma warning restore CS4014
                 await this.FadeTo(0, 300);
             }
@@ -205,7 +215,7 @@ namespace TVHome.Views
 
             await Task.Delay(300);
 #pragma warning disable CS4014
-            this.TranslateTo(0, -140, 300);
+            this.TranslateTo(0, -selectTransitionHeight, 300);
 #pragma warning restore CS4014
             await this.FadeTo(0.99, 300);
         }