The mobile app home screen consists of the navigation buttons for different screens within the app. The arrangement of these navigation buttons can be selected from the ‘Layout’ screen. We provide 4 different home screen button layouts:

  1. Listings

  2. Encompassing Circles

  3. Rectangles

  4. Floating Icons

Listing Icons: This is a simple layout where the home screen icons are listed in single columns format
Encompassing Circles: Icons are arranged in circles with a customizable background color
Rectangle: Icons are organized as rectangles with a customizable background color
Floating icons: This is most recent home screen layout based on the new design trends wherein the icons are listed on the home screen without any background
The icon background color and text colors can be changed with the options available below. When the user adds the button on the home screen on the Mobile maker screen, they can choose from the same colors available. The user can change these properties of Home screen button(s) from the Mobile maker screen as well.

    • Related Articles

    • New App creation process

      MAD-learn is a platform which helps students and teachers to learn about Mobile Application development. Our platform helps students, teachers, and other school staff to create new or edit existing mobile apps and learn mobile application development ...
    • Home Screen

      Home Screen is the first app screen through which users can engage with the app. This is the screen which provide the entry points of the app and help them explore the other pages within the apps and its content. Home screen image is placed in the ...
    • Design

      This is the phase of app creation process wherein the initial visual design setup of the app is configured for elements like themes, images, home screen layout, etc. The design phase consists of 3 sub-levels: Themes, Images, Layout.   Themes We ...
    • Edit Mind Map

      User is able to edit any part of the Mind Map that has been created by either themselves or an added collaborator. Navigate to the Mind-map listing page Hover over the Mind Map you wish to edit Click on ‘Edit’ button on the Mind Map card. This will ...