Android Question From Artwork to a functional User interface - mechanics

Josias

Member
Licensed User
Longtime User
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.
 

Attachments

  • Main control screen Normal mode on.jpg
    Main control screen Normal mode on.jpg
    200 KB · Views: 313
  • Configuration screen.jpg
    Configuration screen.jpg
    177.5 KB · Views: 303

Didier9

Well-Known Member
Licensed User
Longtime User
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.
 
Upvote 0

Josias

Member
Licensed User
Longtime User
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.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
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.
 
Upvote 0
Top