7 Replies Latest reply on Mar 12, 2015 1:49 PM by Jon Tara

    android_title configuration

    Joerg Koch

      Hi everybody,

       

      I want to use the android_title in my App.

       

      The android_title shows an icon on the left, the page heading in the middle and the default menu on the right, see screenshot:

       

      Screen Shot 2015-03-12 at 12.56.04.png

       

      Is there a way to not show the page heading in the middle? If I remove it from a page, the title of layout.erb ist used. If this is removed, the app name is used. I would like to show nothing at all. I.e. remove "Rhodes_5.0.30App" in the screenshot above.

       

      Also, is there a way to configure the background color of the title? Perhaps this should be a modification of rhodes itself.

       

      Thanks for any hints!

        • Re: android_title configuration
          Jon Tara

          Most of us prefer to remove it!

           

          It is wasted screen real-estate, and I surveyed popular Android apps - including standard ones that come with devices - and almost nobody uses this any more. I think this is an artifact from early days of Android. And so I choose to disable it in build.yml:

           

            android_title: 0

           

          It will change to the title of each page. So, if you are using jQuery Mobile, the one thing that is read from the <head> of every page is <title>. If you change the <title> on each page, what will be seen is that page's <title> content.

           

          Did you try, then, an empty <title></title>?

            • Re: android_title configuration
              Joerg Koch

              Yes, I also think it is the best to remove it!


              Yes, I tried to empty the title, then the app name as defined in build.yml is used.


              It would be nice to have a similar native title bar, as e.g. the native title bar the Play Store and many other apps use. With a menu that overlays if opened on the left side, with a search functionality and menu (icon with three vertical dots) on the right side and a title in the middle.


              I think the android_title is a very basic version of that, yet, not configurable and thus not usable of course. I have to check the code for that in rhodes. I wonder how hard it would be to create a native element like described above.


              I wanted to use the android_title basically because my RhoMobile 4.0 app still relied on the @default_menu. With the migration to 5.0 the @default_menu is only display with android_title enabled. Before it was displayed on the bottom right, too:


              Screen Shot 2015-03-12 at 19.16.32.png


              which was kind of cool, yet, perhaps not very styleguide conform. I think my solution will be to rely on a JQM overlay panel to give access to settings and other general information. I hope the overlay panel works well on various devices.

                • Re: android_title configuration
                  Jon Tara

                  You might try this:

                   

                      <title> </title>

                   

                  The Play Store doesn't have that top bar any more, at least on my Samsung Galaxy Tab 2 (old!) with 4.2.2 JellyBean. Play Store just has a search bar at the top, with a hamburger menu to the LEFT now!

                   

                  The black bar you show at the bottom of your post above is the soft buttons. Those are built-in to the OS on 4.x+ devices that don't have hardware buttons. You should be seeing them with Rhodes, but only on a device that has them.

                   

                  I'll have to caution that I am the last person to ask about Android style, LOL. I've been on a project for 2 years that started-out iOS/Android, but wound-up iOS only. (Too much trouble with Android devices, even when we picked one to recommend). Now I'm doing something new that I want to work on both iOS and Android.

                   

                  There are two schools of thought - make your app look native for each platform, or make your app look the same on all platforms. I generally prefer the latter.

                   

                  But there are some things that users might expect no matter what, and so I probably ought to take a look at the Android style guide!

                    • Re: android_title configuration
                      Joerg Koch

                      My app was restricted to a Nexus 7 for now. It shows the soft buttons. Rhodes added the dot hamburger button on the right to display the @default_menu, yet, this worked only with Rhodes 4.0. With Rhodes 5.0 the dot hamburger is missing.

                       

                      Since the app will be available on more devices soon, I have to find another solution for this menu. I think I'll just use JQM and try to create a nice header, that also will work on iOS, since it also should be Android and iOS!

                       

                      Here some "top bars" on Nexus 7, Android 5.0.2:

                      Screen Shot 2015-03-12 at 20.40.10.png

                      Google Docs

                      Screen Shot 2015-03-12 at 20.40.02.png

                      Gmail

                      Screen Shot 2015-03-12 at 20.39.50.png

                      Feedly

                      Screen Shot 2015-03-12 at 20.39.38.png

                      Downloads

                      Screen Shot 2015-03-12 at 20.39.27.png

                      YouTube

                      Screen Shot 2015-03-12 at 20.39.13.png

                      Play Store

                      • Re: android_title configuration
                        Joerg Koch

                        Have you ever tried the overlay panel?

                         

                        http://demos.jquerymobile.com/1.3.1/widgets/panels/

                          • Re: Re: android_title configuration
                            Jon Tara

                            sorry, the forum ate my HTML entity!

                             

                            I don't think there is a way to show HTML entities here... Try a non-breaking space in the <title> element.

                             

                            Remove the spaces! I have to add them for the forum...

                             

                            & n b s p ;

                            • Re: android_title configuration
                              Jon Tara

                              If it is a new project, I would suggest going to jQuery Mobile 1.4.5. It is MUCH faster than 1.3!

                               

                              Also, it now uses vector (SVG) icons.

                               

                              Even so, I don't use the jQuery Mobile buttons. Instead, I've been using FontAwesome icons. They can make a UI like you show above pretty easily. You do have to play some tricks to get a nicely-sized "hot spot" to tap. (Don't make the user tap precisely on the icon.) Well, I have to do that only because I do not use an actual button. I just plop an icon on the header, and there is a <div> holder that has some padding around the icon (which is just a character!).

                               

                              I have not tried the sliding panel in my own code. However, I have tried it in Rhodes... Confused?

                               

                              I just add a link to the jQuery Mobile 1.4.5 online demo (with data-ajax="false") in a special diagnostic page of my app. Actually, I add them for each major jQuery Mobile version. It's because I have a big project that was developed with JQM 1.2, and it will be a big job to re-write all the JS code and HTML.... I wanted to demonstrate how all of the JQM widgets perform, in realistic conditions, inside of a Rhodes app, in each JQM version.

                               

                              It's a quick and easy test! Then you can explore the entire jQuery Mobile demo from inside of your Rhodes app.

                               

                              The panel performs well on iOS. I actually haven't tried it on Android, but it wouldn't be very meaningful, because I don't have a modern Android device.

                               

                              It is important to test it inside of Rhodes, because otherwise you will be seeing the performance of Mobile Safari, which is greater than that of the UIWebView.

                               

                              On Android, starting with some 4.x (certainly KitKat, maybe JellyBean?) the WebView uses Chrome, and does JIT compile and will be as fast as the browser. iOS we don't have that in Rhodes because JIT only comes to WKWebView which is only in 8.x, and Rhodes doesn't have WKWebview support yet.

                              1 of 1 people found this helpful