Adjust UI with pixel perfect precision. Support devices with on-screen bars.

interface/resources/icons/+android/myview-a.svg

@@ -3,17 +3,17 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 <style type="text/css">
-	.st0{opacity:0.85;}
+	.st0{opacity:0.85;fill:#FFFFFF;}
-	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
 </style>
-<g id="Layer_2_1_">
+<g id="Layer_2_1_" class="st0">
 </g>
-<g class="st0">
+<g>
-	<path class="st1" d="M48.1,22.6c-1.6-1.9-3.2-4-5.2-5.6c-5.2-4.4-11.1-6.9-17.8-7.1c-6,0.1-11.1,2-15.8,5.2c-3,2-5.6,4.4-7.6,7.4
+	<path class="st0" d="M45.7,29.3c-0.3-0.3-0.4-0.5-0.7-0.9c-1.2-1.4-2.5-2.9-3.9-4.1c-4.8-4-10.2-6.2-16.1-6.4
-		c-1.1,1.7-1.1,3.3,0,5c1.8,2.7,4.1,4.8,6.6,6.7c4.9,3.6,10.4,5.9,16.6,5.9c5.8,0,10.9-2,15.6-5.2c3-2,5.6-4.4,7.6-7.4
+		c-5,0.2-9.7,1.7-14.1,4.7C8,24.6,5.7,26.8,4,29.3c-1.1,1.8-1.1,3.5,0,5.3c1.4,2.1,3.2,4,6,6.1c4.7,3.5,9.8,5.3,14.9,5.3
-		C49.4,25.9,49.5,24.2,48.1,22.6z M46.4,27.2C41,34.1,33.9,38.1,26.2,38.6c-7.3-0.1-12.6-2.4-17.4-6c-2.2-1.6-4.1-3.5-5.6-5.8
+		c4.8,0,9.4-1.5,14-4.7c2.9-1.9,5.2-4.1,6.8-6.6C47.2,32.9,47.2,31,45.7,29.3z M42.9,33.3c-4.5,5.8-10.5,9.1-16.9,9.6
-		c-0.7-1-0.9-2-0.1-3.1c4.8-7.1,16.4-14.6,28.2-11.1c6.2,1.9,11.3,5.3,15.2,10.5C47.8,24.8,47.8,25.4,46.4,27.2z"/>
+		c-5.5-0.1-10.1-1.7-14.7-5c-1.9-1.4-3.4-3-4.7-4.8c-0.5-0.8-0.4-1.2-0.1-1.7c3-4.4,10-10.1,18.3-10.1c1.7,0,3.4,0.3,5.2,0.8
-	<path class="st1" d="M25,15.7c-5.3,0-9.4,4.1-9.5,9.4c0,5.3,4.2,9.5,9.5,9.5s9.4-4.2,9.4-9.5S30.3,15.7,25,15.7z M24.9,33
+		c5.4,1.7,9.6,4.6,12.8,8.8C43.9,31.9,44,32,42.9,33.3z"/>
-		c-4.2,0-7.8-3.6-7.8-7.9c0-4.2,3.6-7.8,7.8-7.8c4.2,0,7.9,3.6,7.8,7.8C32.8,29.4,29.2,33,24.9,33z"/>
+	<path class="st0" d="M25,23c-5,0-9,3.9-9.1,9c0,5.1,4,9.1,9.1,9.1s9-4,9-9.1S30.1,23,25,23z M19,32c0-3.2,2.7-5.9,5.9-5.9
+		c1.6,0,3.1,0.7,4.2,1.8s1.7,2.5,1.7,4.1c0,1.6-0.5,3.1-1.7,4.2c-1.1,1.1-2.6,1.8-4.2,1.8C21.8,38,19,35.3,19,32z"/>
 </g>
 </svg>

interface/resources/qml/hifi/+android/ActionBar.qml

@@ -40,8 +40,8 @@ Item {
 
     Component.onCompleted: {
         // put on bottom
-        x = 30;
+        x = 7;
-        y = 0;
+        y = 7;
         width = 300;
         height = 300;
     }

interface/resources/qml/hifi/+android/AudioBar.qml

@@ -38,13 +38,26 @@ Item {
         }
     }
 
-    Component.onCompleted: {
+    function relocateAndResize(newWindowWidth, newWindowHeight) {
-        // put on bottom
+        x = newWindowWidth-328;
-        x = parent.width-315;
+        y = 19;
-        y = 5;
         width = 300;
         height = 300;
     }
+
+    function onWindowGeometryChanged(rect) {
+        relocateAndResize(rect.width, rect.height);
+    }
+
+    Component.onCompleted: {
+        relocateAndResize(parent.width, parent.height);
+        Window.geometryChanged.connect(onWindowGeometryChanged); // In devices with bars appearing at startup we should listen for this
+    }
+
+    Component.onDestruction: {
+        Window.geometryChanged.disconnect(onWindowGeometryChanged);
+    }
+
     
     function addButton(properties) {
         var component = Qt.createComponent("button.qml");

interface/resources/qml/hifi/+android/button.qml

@@ -32,6 +32,9 @@ Item {
     property string hoverTextColor: "#ffffff"
     property string activeTextColor: "#ffffff"
     property string activeHoverTextColor: "#ffffff"
+    property string fontFamily: "FiraSans"
+    property bool fontBold: false
+
     property int bottomMargin: 30
     
     property bool isEntered: false
@@ -92,8 +95,8 @@ Item {
         id: text
         color: "#ffffff"
         text: button.text
-        font.family: "FiraSans"
+        font.family: button.fontFamily
-        //font.bold: true
+        font.bold: button.fontBold
         font.pixelSize: textSize
         anchors.bottom: parent.bottom
         anchors.bottomMargin: bottomMargin
@@ -143,15 +146,12 @@ Item {
 
             PropertyChanges {
                 target: buttonBg
-                //color: "#cfcfcf"
-                //opacity: 1
                 color: button.hoverBgColor
                 opacity: button.hoverBgOpacity
             }
 
             PropertyChanges {
                 target: text
-                //color: "#ffffff"
                 color: button.hoverTextColor
                 text: button.hoverText
             }
@@ -166,15 +166,12 @@ Item {
 
             PropertyChanges {
                 target: buttonBg
-                //color: "#1fc6a6"
-                //opacity: 1
                 color: button.activeBgColor
                 opacity: button.activeBgOpacity
             }
 
             PropertyChanges {
                 target: text
-                //color: "#333333"
                 color: button.activeTextColor
                 text: button.activeText
             }
@@ -189,15 +186,12 @@ Item {
 
             PropertyChanges {
                 target: buttonBg
-                //color: "#ff0000"
-                //opacity: 1
                 color: button.activeHoverBgColor
                 opacity: button.activeHoverBgOpacity
             }
 
             PropertyChanges {
                 target: text
-                //color: "#333333"
                 color: button.activeHoverTextColor
                 text: button.activeHoverText
             }
@@ -212,15 +206,12 @@ Item {
 
             PropertyChanges {
                 target: buttonBg
-                //color: "#9A9A9A"
-                //opacity: 0.1
                 color: button.bgColor
                 opacity: button.bgOpacity
             }
 
             PropertyChanges {
                 target: text
-                //color: "#ffffff"
                 color: button.textColor
                 text: button.text
             }

interface/resources/qml/hifi/+android/modesbar.qml

@@ -10,12 +10,25 @@ import ".."
 
 Item {
     id: modesbar
-    y:20
+    y:5
+
+    function relocateAndResize(newWindowWidth, newWindowHeight) {
+        width = 300;
+        height = 300;
+        x=newWindowWidth - 565;
+    }
+
+    function onWindowGeometryChanged(rect) {
+        relocateAndResize(rect.width, rect.height);
+    }
 
     Component.onCompleted: {
-        width = 300; // That 30 is extra regardless the qty of items shown
+        relocateAndResize(parent.width, parent.height);
-        height = 300;
+        Window.geometryChanged.connect(onWindowGeometryChanged); // In devices with bars appearing at startup we should listen for this
-        x=parent.width - 555;
+    }
+
+    Component.onDestruction: {
+        Window.geometryChanged.disconnect(onWindowGeometryChanged);
     }
     
     function addButton(properties) {

libraries/ui/src/VirtualPadManager.cpp

@@ -40,8 +40,8 @@ namespace VirtualPad {
     const float Manager::STICK_RADIUS_PIXELS = 105.0f;
     const float Manager::JUMP_BTN_TRIMMED_RADIUS_PIXELS = 67.0f;
     const float Manager::JUMP_BTN_FULL_PIXELS = 164.0f;
-    const float Manager::JUMP_BTN_BOTTOM_MARGIN_PIXELS = 67.0f;
+    const float Manager::JUMP_BTN_BOTTOM_MARGIN_PIXELS = 80.0f;
-    const float Manager::JUMP_BTN_RIGHT_MARGIN_PIXELS = 20.0f;
+    const float Manager::JUMP_BTN_RIGHT_MARGIN_PIXELS = 13.0f;
 
     Manager::Manager() {
 

scripts/system/+android/actionbar.js

@@ -30,8 +30,8 @@ function init() {
         activeIcon: "icons/+android/backward.svg",
         text: "",
         bgOpacity: 0.0,
-        activeBgOpacity: 0.0,
+        hoverBgOpacity: 0.0,
-        bgColor: "#FFFFFF"
+        activeBgOpacity: 0.0
     });
 
     backButton.clicked.connect(onBackPressed);

scripts/system/+android/audio.js

@@ -32,8 +32,9 @@ function init() {
         activeIcon: "icons/mic-mute-a.svg",
         text: "",
         bgOpacity: 0.0,
-        activeBgOpacity: 0.0,
+        hoverBgOpacity: 0.0,
-        bgColor: "#FFFFFF"
+        activeHoverBgOpacity: 0.0,
+        activeBgOpacity: 0.0
     });
 
     onMuteToggled();

scripts/system/+android/modes.js

@@ -49,8 +49,11 @@ function init() {
         activeHoverBgOpacity: 0.0,
         text: "MODE",
         height:240,
-        bottomMargin: 6,
+        bottomMargin: 16,
-        textSize: 45
+        textSize: 38,
+        fontFamily: "Raleway",
+        fontBold: true
+
     });
     
     switchToMode(getCurrentModeSetting());