Layout for Phone and Tablet

BPak · Jul 23, 2012

Perservering with Layouts after reading most of the Forum posts I have come up with an idea I think will work ok for me.

I use a Panel as the base for ALL the Views in layouts made with the Layout Designer.

By controlling the Base Panel size and position it is easy to make layouts to suit different sizes.

I make a Layout for the Phone (320x480) with a Portrait and Landscape Variant.

I also make a Layout for 7 inch (480x800) with a Portrait and Landscape variant.

In the Layout Designer Script I size everything for each Variant.

The idea is that the (320x480) Layout will adjust for all phones up to the 7 inch size.

From the 7 inch size up all tablets will use the 7 inch Layout variants.

Here in these layouts the Base Panel is set to a size close to the 320x480 size which keeps it in perspective (in my opinion).

I only have a Bauhn Tablet so can only use the Emulator for other testing.

Perhaps if anyone has a spare moment they could test my app on different phones, etc to see if my idea of keeping a standard layout is working.
:sign0163:

NJDude · Jul 23, 2012

This is how your test look in PORTRAIT and in LANDSCAPE on a 7 or 10 inch tablet.

BPak · Jul 23, 2012

Thanks for the pics NJDude. Looks that way on my Tablet also.

Have you tried it on any of the Phones? I would be interested in seeing how it looks on the different phones?

Mahares · Jul 23, 2012

@Bpack: I ran you program the way you had it on my 7 inch tablet with 480x800 and scale 1.0. Although the design looks really nice and centered, it only occupied a small portion of the screen, both portrait and landscape.
Here is the experiment I did: I moved all you designer script code to the 'All variants' section and deleted the 2 layouts you have for the 480x800 and only kept the 320x480 (portrait and lanscape layouts.) When I ran the program, it occupied the full screen of the tablet in both portrait and landscape. Try it and see what you think. By the way, you might want to change the label name from 'MyLay' to something else.

I also ran your program on my cell phone with the changes I made: Phone: 540x960, scale:1.5, dpi=240. I did not create any additional layouts. It occupied the full screen in both portrait and landscape. It looks really nice. I did not run on the cell the way you had it.

fraxinus · Jul 23, 2012

Works perfect. (With Mahares Help, Just left 320x240 Layout with Variant specific script only)

Full screen both Portrait and Landscape on:

Tablet: Acer Iconia A500 : 800 x 1280 pixels, 10.1 inches (~149 ppi pixel density)

Phone: ZTE Blade: 480 x 800 pixels, 3.5 inches (~267 ppi pixel density)
Well Done both

Rob

BPak · Jul 23, 2012

Mahres

Thank you for the test.

Actually the Tablet is the way I wanted it. I did not want such a small item taking the whole display in the Tablet.

I was curious though on how the 320x480 worked in the other phones.

Thanks for testing it there also.

MyLay - see your point of the name change. :sign0089:

Rob - thank you for the test on the phone and tablet.

Good news - my layout idea is working!!

NEW

I made a small change to the script which improved the buttons..

B4X:

'wid3 = pnlMain.Width / 4.3

btnManagement.SetLeftAndRight(10dip, wid1)
btnProduction.SetLeftAndRight(btnManagement.Right + 10dip, btnManagement.Right + 10dip + wid2)
'btnSales.SetLeftAndRight(btnProduction.Right + 10dip, btnProduction.Right + 10dip + wid3)
btnSales.SetLeftAndRight(btnProduction.Right + 10dip, pnlMain.Width - 10dip)

BPak · Jul 24, 2012

Mahares

Here is the experiment I did: I moved all you designer script code to the 'All variants' section and deleted the 2 layouts you have for the 480x800 and only kept the 320x480 (portrait and lanscape layouts.) When I ran the program, it occupied the full screen of the tablet in both portrait and landscape. Try it and see what you think. By the way, you might want to change the label name from 'MyLay' to something else.

Removed the 480x800 layouts and scripts - ok

Moved the two scripts of the 320X480 into the top script.
Do not understand how that could work for two different layouts, portrait and Lansdscape?

Did you notice the different layout for the Portrait and Landscape.

See NJDude examples above...

Harris · Jul 24, 2012

I wondered the same... How does combining the code for 480X320 - 320x480 work? The last code execution wins, regardless of position...

I have many forms with many views where I try to accomodate the best of all worlds. So far, it is not working out so well... low res vrs high res presents (various) different results.

My forms were created using the native res of my device 600x1024 - 1 (Acer A100).

I now see that the tutorial suggests (insists) that the default form factor be used and expand from there (320x480-1). I shall refactor my main activity to this standard and work up from there.

It was strange to see that everything was contained in Variant specific script (BPak - although obvious what was being accomplished): whereas everything I read so far was contained in: All variants script.

As many have stated: Supporting different form factors (screen res/size and density) is THE most difficult aspect about creating apps when using custom layouts (and look good/acceptable). Currently, designer scripts are our hope.
Everything else is SO simple - so far.

Note to Google and device manufacturers - Phones must have XxX, Tabs must have XxX. I could work with that...

Dream on...

BPak · Jul 25, 2012

Harris:

Thanks for your reply.

It was strange to see that everything was contained in Variant specific script (BPak - although obvious what was being accomplished): whereas everything I read so far was contained in: All variants script.

Yes, I have seen that as well and did a lot of experiments and found using the specific script for the Variants Portrait and one for the Landscape kept things working individually.

I have built a complete application this way and it is working very cleanly for me. Just do not have the different phones to see how it comes out. For tablet it is restricted for 7 inch and above so I do not really need to see how that works, hopefully!

As many have stated: Supporting different form factors (screen res/size and density) is THE most difficult aspect about creating apps when using custom layouts (and look good/acceptable). Currently, designer scripts are our hope.
Everything else is SO simple - so far.

I agree. Designer Script allows us to handle each Screen individually. Just the way I like using it. By using Specific Scripts with Percentage of Activity/Panel then Android should take over from there no matter what the Phone?

Using: All variants script works for ALL - Portrait and Landscape.
Using: Variant specific script:... allows individual Portrait, Landscape layout.

Layout for Phone and Tablet

BPak

Active Member

Attachments

NJDude

Expert

BPak

Active Member

Mahares

Expert

fraxinus

Member

BPak

Active Member

BPak

Active Member

Harris

Expert

BPak

Active Member

Similar Threads

Layout for Phone and Tablet

Active Member

Attachments

Expert

Active Member

Expert

Member

Active Member

Active Member

Expert

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency