Android App Questions. Menu bar color and Custom URL display

Discussion Forums > Android Studio, Errors, Installing, Configuring

Replies: 13 Views: 162

Moto110 Aspiring developer Posts: 205 Reg: Jul 26, 2011 Orlando, FL 8,700	confirm \| cancel 08/17/12 12:56 PM (13 years ago) Android App Questions. Menu bar color and Custom URL display I have a lot of experience with Buzztouch and iOS. However, I am new to Android development. I received my Nexus 7 device in the mail today that's how new I am to this. I have Eclipse up and running and I was able to get an Android version an iOS app working on the Nexus 7. However, the results are not perfect and it seems that to getting it working correctly on Android I will mess up the iOS app. The main problems I'm having are the list menus in Android have a black background even though in iOS they are white. My menu text is set to a dark green color, so in Android the lists are almost unreadable because of the black background. Can this be fixed outside of the control panel or without messing up the iOS apps colors? The second problem is that custom URL screens that I have setup display fine on iOS, but in Anroid they do not fit the screen properly and require you to scroll side-to-side to see the entire page. This makes the custom URL screens almost useless. Any ideas on how to resolve this problem and make webpage resize automatically to fit? Should I just recreate the app and make it specifically for Android? The app I'm referring to was created with Buzztouch version 1.5. I did create a test v2.0 app and the custom URL screens still do not properly fix the screen. Title Comments I have a lot of experience with Buzztouch and iOS. However, I am new to Android development. I received my Nexus 7 device in the mail today that's how new I am to this. I have Eclipse up and running and I was able to get an Android version an iOS app working on the Nexus 7. However, the results are not perfect and it seems that to getting it working correctly on Android I will mess up the iOS app. The main problems I'm having are the list menus in Android have a black background even though in iOS they are white. My menu text is set to a dark green color, so in Android the lists are almost unreadable because of the black background. Can this be fixed outside of the control panel or without messing up the iOS apps colors? The second problem is that custom URL screens that I have setup display fine on iOS, but in Anroid they do not fit the screen properly and require you to scroll side-to-side to see the entire page. This makes the custom URL screens almost useless. Any ideas on how to resolve this problem and make webpage resize automatically to fit? Should I just recreate the app and make it specifically for Android? The app I'm referring to was created with Buzztouch version 1.5. I did create a test v2.0 app and the custom URL screens still do not properly fix the screen.

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	08/17/12 03:09 PM (13 years ago) Hi @Moto, The Nexus 7 is pretty cool! I have the 8Gb version, and I like it a lot. Not quite as good as an iPad, but pretty sweet. And I love the $25 credit at Google Play! My experience is that you're going to need to create a new project to deal with Android. Very few of the tweaks you make for iOS seem to translate well to Android. And, if you've included any local media (images, files, etc), and you haven't adhered to the Android naming scheme, then you're going to run into issue. I've found it just better to create a new project and that allows me to make the necessary Android tweaks without messing up my iOS apps. This is not a buzztouch problem, but more related to the differences between the two platforms. Mark Comments Hi @Moto, The Nexus 7 is pretty cool! I have the 8Gb version, and I like it a lot. Not quite as good as an iPad, but pretty sweet. And I love the $25 credit at Google Play! My experience is that you're going to need to create a new project to deal with Android. Very few of the tweaks you make for iOS seem to translate well to Android. And, if you've included any local media (images, files, etc), and you haven't adhered to the Android naming scheme, then you're going to run into issue. I've found it just better to create a new project and that allows me to make the necessary Android tweaks without messing up my iOS apps. This is not a buzztouch problem, but more related to the differences between the two platforms. Mark

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/17/12 05:20 PM (13 years ago) Some tweaks can be ironed out. Some screens could be switched to other screens. But as Mark points out it's two different platforms. Depending on the size and complexity of the app you might consider editing the confided file, but unless it's very large & complex you'll probably be better off having two apps. Fred Comments Some tweaks can be ironed out. Some screens could be switched to other screens. But as Mark points out it's two different platforms. Depending on the size and complexity of the app you might consider editing the confided file, but unless it's very large & complex you'll probably be better off having two apps. Fred

Moto110 Aspiring developer Posts: 205 Reg: Jul 26, 2011 Orlando, FL 8,700	08/17/12 05:43 PM (13 years ago) I can rebuild the app easy enough for Android. What do you think about the web pages not resizing automatically to the width of the screen? Some are custom URLs to sites I built an others are to public sites. They all display within the app wider then the device screen which cause you to scroll right to see the entire page. Any experience with issues like this on an Android device? These web pages automatically look fine on iOS. Comments I can rebuild the app easy enough for Android. What do you think about the web pages not resizing automatically to the width of the screen? Some are custom URLs to sites I built an others are to public sites. They all display within the app wider then the device screen which cause you to scroll right to see the entire page. Any experience with issues like this on an Android device? These web pages automatically look fine on iOS.

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/17/12 05:51 PM (13 years ago) Post a link. Fred Comments Post a link. Fred

Moto110 Aspiring developer Posts: 205 Reg: Jul 26, 2011 Orlando, FL 8,700	08/18/12 05:40 AM (13 years ago) Here are a couple links that are not displaying properly in BT app with custom url. They display OK if I access them directly in chrome, but not when accessed in my buzztouch app. Public web link: http://www.nature.nps.gov/air/WebCams/parks/grsmpkcam/grsmpklargerimage.cfm This is a site I built: http://beefs.applausesolutions.com/websites/beer-list/index.html I have tried these custom URL links in v1.5 and v2.0 and get the same results. Comments Here are a couple links that are not displaying properly in BT app with custom url. They display OK if I access them directly in chrome, but not when accessed in my buzztouch app. Public web link: http://www.nature.nps.gov/air/WebCams/parks/grsmpkcam/grsmpklargerimage.cfm This is a site I built: http://beefs.applausesolutions.com/websites/beer-list/index.html I have tried these custom URL links in v1.5 and v2.0 and get the same results.

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/18/12 08:14 AM (13 years ago) For your site use <meta name="viewport" content="width=device-width, initial-scale=1"> In the header. Fred Comments For your site use <meta name="viewport" content="width=device-width, initial-scale=1"> In the header. Fred

Moto110 Aspiring developer Posts: 205 Reg: Jul 26, 2011 Orlando, FL 8,700	08/18/12 08:41 AM (13 years ago) Thanks Fred I will give that a try. For the public site I'm going to try building my own site with the code you provided in the header and pulling in the public site into an iframe. I'll let you know what happens. Comments Thanks Fred I will give that a try. For the public site I'm going to try building my own site with the code you provided in the header and pulling in the public site into an iframe. I'll let you know what happens.

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/18/12 08:59 AM (13 years ago) This doesn't answer your question but it's an alternative: Use Launch Native App screen (Browser) Downside: it'll take them out of the app. Fred Comments This doesn't answer your question but it's an alternative: Use Launch Native App screen (Browser) Downside: it'll take them out of the app. Fred

Moto110 Aspiring developer Posts: 205 Reg: Jul 26, 2011 Orlando, FL 8,700	08/18/12 02:09 PM (13 years ago) I was able to get the web sites to display perfectly on the Nexus 7 by using this code in the HTML <Head> <meta name="viewport" content="target-densitydpi=280, width=device-width" /> @Fred - The code you provide did not help, but it did get me on the right path. Thank You! I found a really good resource for learning about different ways to use the "viewport" setting. http://developer.android.com/guide/webapps/targeting.html#Metadata I am a little concerned that setting the densitydpi=280 might not display properly on any other device other than the Nexus 7. Can someone create a custom URL in a test app and try these links for me on an Android phone? http://beefs.applausesolutions.com/websites/beer-list/index.html http://www.applausesolutions.com/dragonstail-websites/webcam/LookRock.html Also, I was able to create an html page using an iFrame to help control the display of the public web link. If anyone else has this issue here is the code I used to create that page. <HTML> <HEAD> <meta name="viewport" content="target-densitydpi=280, width=device-width" /> </HEAD> <BODY> <iframe src="http://www.nature.nps.gov/air/WebCams/parks/grsmcam/grsmlargerimage.cfm" width="100%" height="100%" name="youriframe" frameborder="1" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe> </BODY> </HTML> Comments I was able to get the web sites to display perfectly on the Nexus 7 by using this code in the HTML <Head> <meta name="viewport" content="target-densitydpi=280, width=device-width" /> @Fred - The code you provide did not help, but it did get me on the right path. Thank You! I found a really good resource for learning about different ways to use the "viewport" setting. http://developer.android.com/guide/webapps/targeting.html#Metadata I am a little concerned that setting the densitydpi=280 might not display properly on any other device other than the Nexus 7. Can someone create a custom URL in a test app and try these links for me on an Android phone? http://beefs.applausesolutions.com/websites/beer-list/index.html http://www.applausesolutions.com/dragonstail-websites/webcam/LookRock.html Also, I was able to create an html page using an iFrame to help control the display of the public web link. If anyone else has this issue here is the code I used to create that page. <HTML> <HEAD> <meta name="viewport" content="target-densitydpi=280, width=device-width" /> </HEAD> <BODY> <iframe src="http://www.nature.nps.gov/air/WebCams/parks/grsmcam/grsmlargerimage.cfm" width="100%" height="100%" name="youriframe" frameborder="1" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe> </BODY> </HTML>

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/18/12 02:42 PM (13 years ago) I test the first link using a Custom URL screen in a tablet the view was too big for the tablet. The second link opened no image until I touched screen then image rendered perfectly. Surprised the code I provided didn't work. Fred Comments I test the first link using a Custom URL screen in a tablet the view was too big for the tablet. The second link opened no image until I touched screen then image rendered perfectly. Surprised the code I provided didn't work. Fred

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/18/12 02:49 PM (13 years ago) Tested first link using HTML Doc screen it displayed well, didn't see what appeared to be buttons using the Custom URL screen, so if no buttons are expected it was perfect. By the way my app is BTv2.0 Fred Edit: tried first link in my Android browser, it rendered perfectly with the collapsible sections that didn't appear in the app. Comments Tested first link using HTML Doc screen it displayed well, didn't see what appeared to be buttons using the Custom URL screen, so if no buttons are expected it was perfect. By the way my app is BTv2.0 Fred Edit: tried first link in my Android browser, it rendered perfectly with the collapsible sections that didn't appear in the app.

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/18/12 02:58 PM (13 years ago) Was wondering how the original first link would display using the HTML Doc screen. Don't think the code you used was that significant on the first link. Bet it would work. The iframe on the second link made all the difference. Fred Comments Was wondering how the original first link would display using the HTML Doc screen. Don't think the code you used was that significant on the first link. Bet it would work. The iframe on the second link made all the difference. Fred

Moto110 Aspiring developer Posts: 205 Reg: Jul 26, 2011 Orlando, FL 8,700	08/18/12 08:53 PM (13 years ago) I was able to get all of my custom URL pages to fit the width of the device except for the one that I built and embedded the iFrame. That one works on the Nexus 7 tablet, but not on the emulators. All of the other sites work on the Nexus 7 as well as all of the emulators. Here is how I fixed the problem. In Eclipse >BT App Project > src > BT_screen_customurl.java I changed the webView.setInitialScale(0) to webView.setInitialScale(44) (You can change this number up or down until you get the results you are looking for) Then I added this: webView.getSettings().setUseWideViewPort(true); Here is the code copied directly from Eclipse. //reference to the webview in the layout file. webView = (WebView) thisScreensView.findViewById(R.id.webView); webView.setBackgroundColor(0); webView.setInitialScale(44); // I changed this from 0 to 44 webView.getSettings().setUseWideViewPort(true); // I added this line of code I also had to put the below code in the HTML <head> of all the sites I linked to using the custom URL. <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" /> Comments I was able to get all of my custom URL pages to fit the width of the device except for the one that I built and embedded the iFrame. That one works on the Nexus 7 tablet, but not on the emulators. All of the other sites work on the Nexus 7 as well as all of the emulators. Here is how I fixed the problem. In Eclipse >BT App Project > src > BT_screen_customurl.java I changed the webView.setInitialScale(0) to webView.setInitialScale(44) (You can change this number up or down until you get the results you are looking for) Then I added this: webView.getSettings().setUseWideViewPort(true); Here is the code copied directly from Eclipse. //reference to the webview in the layout file. webView = (WebView) thisScreensView.findViewById(R.id.webView); webView.setBackgroundColor(0); webView.setInitialScale(44); // I changed this from 0 to 44 webView.getSettings().setUseWideViewPort(true); // I added this line of code I also had to put the below code in the HTML <head> of all the sites I linked to using the custom URL. <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.

Discussion Forums > Android Studio, Errors, Installing, Configuring

Android App Questions. Menu bar color and Custom URL display

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments