Hi, i love Hype. I would like to build small phone apps using Hype but everytime i have an issue with how to make them fit to the screen. This is the way i do it.
I will open a new project and the size will be iPhone 6 portrait. Then i will drop the images and the elements there with buttons which can navigate between pages like next previous. Its very simple every page include one image and two buttons which are next and previous.Then i export them as a html files and upload the files to github and go to build.phonegap.com and create the android app using the repository. Once i generate the app i download it and install to my phone Samsung note3 neo. Then it is not fit to the screen and when i rotate my device it goes crazy. Please help me. Can you kindly give me a sample of hype project file which i can put the images and export in to nice app using phone gap. Thank you soo much again.
It isn’t clear what “going crazy” means , it’d be useful to share your project/android app (or at the very least screenshots/video) to see what might be going on. To my knowledge phonegap is for the most part presenting a web view which isn’t different than that you’d find in chrome or mobile safari for previewing.
@jonathan Thank you so much for replying me. This is the hype document. and i exported this to html folder and uploaded to github and when i build the apk using phonegap. i have to scroll to see the content here i will put the screenshots as well.
<name>වැහි කබාය</name>
<description>
මනු ගේ බලාපොරොත්තුව.
</description>
<author href="http://kpgs.com.au" email="wasura.ediri@gmail.com">
KPGS Team
</author>
<!--
If you do not want any permissions to be added to your app, add the
following tag to your config.xml; you will still have the INTERNET
permission on your app, which PhoneGap requires.
-->
<preference name="permissions" value="none"/>
<!-- Customize your app and platform with the preference element. -->
<preference name="orientation" value="landscape" /> <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device" value="universal" /> <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen -->
<preference name="android-installLocation" value="auto" /> <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->
<!--
Define a specific version of PhoneGap to build into your app.
<preference name="phonegap-version" value="3.5.0" />
-->
<!-- Plugins -->
<!-- Core plugins -->
<plugin name="cordova-plugin-battery-status" />
<plugin name="cordova-plugin-media-capture" />
<plugin name="cordova-plugin-console" />
<plugin name="cordova-plugin-device" />
<plugin name="cordova-plugin-device-motion" />
<plugin name="cordova-plugin-device-orientation" />
<plugin name="cordova-plugin-dialogs" />
<plugin name="cordova-plugin-file" />
<plugin name="cordova-plugin-file-transfer" />
<plugin name="cordova-plugin-globalization" />
<plugin name="cordova-plugin-inappbrowser" />
<plugin name="cordova-plugin-media" />
<plugin name="cordova-plugin-network-information" />
<plugin name="cordova-plugin-vibration" />
<!-- Third party plugins -->
<!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
<!--
<plugin name="com.phonegap.plugins.barcodescanner" />
-->
<!-- Define app icon for each platform. -->
<icon src="icon.png" />
<icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" />
<icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" />
<icon src="res/icon/webos/icon-64.png" gap:platform="webos" />
<icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" />
<icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" />
<!-- Define app splash screen for each platform. -->
<gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi" />
<gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry" />
<gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
<gap:config-file platform="ios" parent="CFBundleShortVersionString">
<string>100</string>
</gap:config-file>
<!--
Define access to external domains.
<access /> - a blank access tag denies access to all external resources.
<access origin="*" /> - a wildcard access tag allows access to all external resource.
Otherwise, you can specify specific domains:
<access origin="http://phonegap.com" /> - allow any secure requests to http://phonegap.com/
<access origin="http://phonegap.com" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/
<access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.
-->
<access origin="*"/>
<!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin -->
<!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
This is the config.xml i used`
https://www.dropbox.com/sh/s8fswm0cmznncss/AAAC5dI5ZLN95UX4zUDmxsF9a?dl=0 - hype file
https://github.com/wasura4/raincoat -github repository
I am new to these things please tell me where i got wrong so that i can make my self correct and proceed for furthur projects. :slight_smile:
If you search google for “phonegap android viewport not working” you’ll find a variety of posts on trying to set the viewport correctly. The viewport setting is meant to scale the phone size to an arbitrary screen size that you define. However, nothing I really tried worked. The most promising post seems to indicate you need to modify an androidmanifest.xml file, which isn’t really in your git repository and I’m not sure how it plays into the build.phonegap.com service.
So my recommendation isn’t to bother with any of that, and instead just use Hype’s flexible layout system, which is meant for this kind of thing anyways! The basic steps are:
Turn on Scale width/height to 100% in the Scene Inspector under Scene Size
Select all your elements in the scene
Group them
Make the group left:0px, top:0px, width:1280px, height:1280px
Turn on all pins and resize scale options in the Flexible Layout settings, along with “shrink to fit” scale behavior and “zoom contents”
, it’d be useful to share your project/android app (or at the very least screenshots/video) to see what might be going on. To my knowledge phonegap is for the most part presenting a web view which isn’t different than that you’d find in chrome or mobile safari for previewing.