Android Question From Artwork to a functional User interface - mechanics

Discussion in 'Android Questions' started by Josias, Aug 10, 2018.

  1. Josias

    Josias Member Licensed 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)

    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.

    Attached Files:

  2. Erel

    Erel Administrator Staff Member Licensed User

    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.
  3. Josias

    Josias Member Licensed User

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

    Didier9 Active Member Licensed User

    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 likes this.
  5. Erel

    Erel Administrator Staff Member Licensed User

    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.
  6. Josias

    Josias Member Licensed 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.
  7. Erel

    Erel Administrator Staff Member Licensed User

    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.

    TabStripViewPager is your best option.
    You can use a regular panel with buttons or ImageViews or whatever view you like.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice