ComboBox Menu in Android looks strange

[keram]

Hello,

I have a ComboBox Menu on a settings card in a stack and it looks good in the LC IDE. But when I create the standalone app and install it in Android tablet then it looks strange with the list of fonts on the side and very small text size in the list.

Is that normal?
If not, how can I change the appearance in Android so that it's more visible and more convenient to select a font?

keram

[Klaus]

Hi Keram,

unfortunately this is "normal" behavior!
And ugly as hell!

Why not supply a "mobilePick" to the user?
...
put the fontnames into tFontList
mobilePick tFontList
...
Or maybe just a (native) scrolling list field?
Everything will look better than a ComboBox


Best

Klaus

[keram]

Hi Klaus,

Thanks for your response and suggestions.
In the meantime I changed to 'Option Menu' button and it looks good in Android - after selecting the font, a centered scrolling field shows up. The code is the same.

Is it the same or similar to what you suggested using mobilePick?
I wasn't aware of mobilePick before and I'll try it as well just to learn - just have to find some good examples...

keram

[Klaus]

Hi keram,

Is it the same or similar to what you suggested using mobilePick?

quite different, "mobilePick" will evoke a native iOS/Android Pickwheel!

just have to find some good examples...

Just check the examples in the dictionary, no rocket science!


Best

Klaus

[keram]

Hi Klaus,

Just check the examples in the dictionary, no rocket science!

No rocket science for you and others who have been coding in LC for 20 years, but for me and others who are just beginners many examples in the dictionary are simply not enough. In many cases what is needed are real examples and explanations what does what in what way and why.

So I found a good example posted here: http://forums.runrev.com/phpBB2/viewtop ... 6df68a2d1c
and I copied and adjusted the code from it to my stack and that's why it worked as I mentioned in my post it above.
So here is important correction: The Option Menu button does NOT work on Android unless it's modified the way it's mentioned in Werner's post.
I was experimenting with his code and then forgot that I have put it in my stack and that's why I thought the Option Menu was working OK without any modification.

My code now is:

on the card with Option Menu button:

Code: Select all

on cardOpen
   # on Android turn off menu
   if the platform is "android" then
      set the style of button "FontMenu" of me to "standard"
   else
      set the style of button "FontMenu" of me to "menu"
   end if
end cardOpen

in the button itself:

Code: Select all

global gFontName

on mouseUp
   if the platform is "android" then
      mobilePickFont
   end if
end mouseUp

on mobilePickFont
   local tOldSelection
   local tNewSelection
   local tFontList
   
   put the text of button "FontMenu" into tFontList
   put the menuHistory of button "FontMenu" into tOldSelection
   
   mobilePick tFontList, tOldSelection
   
   put the result into tNewSelection
   
   if tNewSelection <> 0 and tNewSelection <> tOldSelection then
      set the label of button "FontMenu" to line tNewSelection of tFontList
      set the menuHistory of button "FontMenu" to tNewSelection
   end if
end mobilePickFont



on menuPick pItemName
   switch pItemName
      case "Alegreya"
         put "Alegreya" into gFontName
         changeFont
         changeGrFont
         set the textSize of grp "DataGrid 1" of cd "main" to 18
         break
      case "Arapey"
         put "Arapey" into gFontName
         changeFont
         changeGrFont
         break
 ...
 --case for all the other fonts
 ...
      case "TeX Gyre Bonum"
         put "TeX Gyre Bonum" into gFontName
         changeFont
         changeGrFont
         set the textSize of grp "DataGrid 1" of cd "main" to 18
         break
   end switch
end menuPick

on changeFont
   put empty into tName
   set the itemDel to comma
   repeat with i = 1 to the number of cards of this stack
      if the mark of card i is true then
         put the name of cd i & comma after tName
      end if
   end repeat
   
   repeat for each item fName in tName
      repeat with j = 1 to the number of flds of fName
         if the short name of fld j of fName contains "f" then
            set the textFont of fld j of fName to gFontName
         end if
      end repeat
   end repeat
end changeFont

on changeGrFont
   set the textFont of grp "categories" of cd "home" to gFontName
   set the textFont of grp "DataGrid 1" of cd "main" to gFontName
end changeGrFont

and the font list is in the Text of the button.

But, I'm getting the same display as above, the native scroll field and there is no "Pickwheel" that you mentioned.

Is that OK?

keram

[Klaus]

Hi keram,

sorry, I meant to use "mobilepick" ("on mouseup" in a "simple" button or plain and locked field)
INSTEAD of using a combobox!

Something like this (out of my head):

Code: Select all

on mouseup
  put the fontnames into tFontList
  mobilepick tFontList
  put the result into tResult
  if tResult = 0 then
   exit mouseup
  end if

  put line tResult of tFontList into tFont
  switch tFont
      case "Alegreya"
         put "Alegreya" into gFontName
         changeFont
   ...
   ...
end mouseup

Best

Klaus

[keram]

Thanks Klaus,

I used your code in a simple button and the display is:

So it's the same, a scrolling field like I got before with the code I posted above. No resemblance to any "wheel", but that's OK, probably that's how it should be.

keram

[Klaus]

Hi keram,

So it's the same, a scrolling field like I got before with the code I posted above.

yep, but much less code and it IS in fact "native" (somehow)

No resemblance to any "wheel", but that's OK, probably that's how it should be.

Yes, I'm afraid so!

Damn, we ARE spoiled by great looks of iOS, aren't we?


Best

Klaus

[keram]

and it IS in fact "native"

Yes, it is native look.

Damn, we ARE spoiled by great looks of iOS, aren't we?

I have no idea how the corresponding feature looks like in iOS...

keram

[Klaus]

I have no idea how the corresponding feature looks like in iOS...

Ah, OK, sorry, well, it looks better

See screenshot for a nice iOS "pickwheel".

[keram]

it looks better

Cool

[keram]

Hi Klaus

See screenshot for a nice iOS "pickwheel".

Actually the android native scroll field is more practical simply because it shows more name fonts at a glance without needing to scroll. On screens that have some selection to be done I always prefer to get as much info as possible with less clicking or scrolling required. Still the native android could be improved so I did it the way that the font names show their own style (see the stack; font can be selected by tap on its name and the tap outside the font list is closing the list without any changes):

1. Created a text field and put the names of the available fonts into it; then formatted the font names with their own style; code in the button:

Code: Select all

on mouseUp
   put the fontNames into fld "allfonts"
   sort lines  fld "allfonts" ascending
   repeat with i = 1 to number of lines in fld "allfonts"
      put text of line i of fld "allfonts" into tSetFont
      set the textFont of line i of fld "allfonts" to tSetFont
   end repeat
   show fld "allfonts"
end mouseUp

2. The code in the text field is:

Code: Select all

on mouseUp
   put text of the clickLine into line 1 of fld "sample"
   put text of the clickLine into tFontName
   set the textFont of fld "sample"  to tFontName
   hide me
end mouseUp

3. The code in the card:

Code: Select all

on openCard
   send mouseUp to btn "Select the Font"
   local tScrollerRect, tContentRect, sScrollerID
   
   // Only create a scroller on a mobile device
   if environment() is not "mobile" then 
      set vScrollbar of fld "allfonts" to true
      exit openCard
   else 
      set vScrollbar of fld "allfonts" to false
   end if
   
   // Set the area of the scroller
   put the rect of fld "allfonts" into tScrollerRect
   
   // Set the area of the content to be scrolled
   put 0,0,(the formattedWidth of fld "allfonts"),(the formattedHeight of fld "allfonts") into tContentRect
   // Create the scroller control
   mobileControlCreate "scroller", "myScroll"
   put the result into sScrollerID
   
   // Set the properties of the scroller
   mobileControlSet "myScroll", "rect", tScrollerRect
   mobileControlSet "myScroll", "contentRect", tContentRect
   mobileControlSet "myScroll", "visible", true
   mobileControlSet "myScroll", "scrollingEnabled", true
   mobileControlSet "myScroll", "vIndicator", true
   mobileControlSet "myScroll", "vscroll", 0
end openCard

on closeCard
   // Delete the scroller
   if environment() is not "mobile" then exit closeCard
   set the vScroll of fld "allfonts" to 0
   mobileControlDelete sScrollerID
end closeCard

on scrollerDidScroll hOffset, vOffset
   // When the user scrolls move the displayed content
   set the vScroll of fld "allfonts" to vOffset
end scrollerDidScroll

on mouseUp
   hide fld "allfonts"
end mouseUp

It looks like this now:

and you can scroll it and less and simpler code is needed in my original stack.

keram