Android Question From Artwork to a functional User interface - mechanics

[Josias]

Hi Guys,

My graphics designer did an amazing job of doing artwork for my app. The question is now, how to implement it. Please have a look at the attached images. The 'main control' screen has 6 buttons under mode, 3 buttons under personalized and 5 icons at the bottom.
MODE: The user can select any mode one of the six modes. The active mode must be highlighted in yellow - NORMAL is active in the example

The same applies to the PERSONALISED section.

The icons at the bottom are static and are used to select a page. There are 5 pages with different content, but the 5 icons at the bottom are always there. I also need the functionality to slide between pages. (left / right swipe)

Questions
1) Can I use the artwork as is and just overlay transparent buttons over the images? How compatible will that be among different screen sizes?
2) Instead of option 1. Is it better to create a button and load the applicable image (Selected / Not selected) or can I change the background color between white and yellow

I have seen various examples on the B4A forum to implement portions of this. My concern is that some examples are up to 9 years old and Android has changed significantly during this time. Which libraries are recommended that will play well together?

Any help will be appreciated.

 

[Erel]

It is very simple to create such layout. Nothing special. You need to learn how to use anchors and designer script. You might want to use a panel with a determined size and center it based on the available screen size.

 

[Josias]

Is it best to use the image as is and overlay transparent buttons over the images?

 

[Didier9]

Is it best to use the image as is and overlay transparent buttons over the images?

I am not sure what you mean by "best". It may be expedient but will not scale well across different devices. It may look downright ugly when the other screens of the app (I assume there are more than these two screens) are displayed because it will be impossible to match scaling properly between a scaled image and an actual display of views.

 

[Erel]

Is it best to use the image as is and overlay transparent buttons over the images?

No. You should build the layout with the views. Note that you are not limited to buttons. You can also use panels for more complicated elements.

 

[Josias]

I appreciate the feedback. Note that the app will be ported to iOS as well. I've used panels with an image and a transparent button - no special libraries. I am now worried about possible scaling issues between different devices. Any recommendations? I did anchor the panels to a bigger panel.
Any suggestions on a screen left/right swipe library? I also need to have a quick page select at the bottom of the screen.

 

[Erel]

Any recommendations? I did anchor the panels to a bigger panel

Anchors and designer script are the way to handle different screen sizes. You can also put the layout in a panel and put the panel in the center of the screen.

Any suggestions on a screen left/right swipe library?

TabStripViewPager is your best option.

I also need to have a quick page select at the bottom of the screen.

You can use a regular panel with buttons or ImageViews or whatever view you like.