Customise App Layout

Introduction

Before I learn enough to build much functionality into my app, I would like to at least learn the flow of the language(kotlin). As a starting point I will customise just the look and feel, while putting a basic structure into the app.

Customisations

I believe that the following customisations will be a good starting point.

Navigation Drawer (Create Structure)

1. Create Navigation Drawer Project.
  1. Click on "New Project".
  2. Under "Phone and Tablet" select "Navigation Drawer Activity".
  3. Name the app as you choose. The package name should automatically change in accordance.
  4. Select a location of your choice, or leave the default.
  5. Select "Kotlin" as the language.
  6. Under minimum SDK select an android version which is old enough to cover a large number of devices.
  7. Click "Finish".
2. Edit section structure.
  1. To edit the name of a section in the menu edit the strings in "app->src->main->res->values->strings.xml".
  2. The andoid:id in "app->src->main->res->menu->activity_main_drawer.xml" for each item can be changed along with the corresponding android:ids in the fragments in "app->src->main->res->navigation->mobile_navigation.xml".
  3. Rename the files "app->src->main->res->layout->fragment_<section>.xml" to the appropriate section name, along with all usages of the file name. The android:id in the file can also be changed at this time.
  4. In the file "app->src->main->java->com->example-><app name>->ui-><old section name>-><old section name>Fragment.kt", change all of the references to "Fragment<old section name>Binding" to "Fragment<new section name>Binding". Any other occurences of the old section name can also be changed to the new section name
  5. Across the folder "app->src->main->java->com->example-><app name>->ui-><old section name>" rename all occurences of the old section name to the new section name. This should also be done in "mobile_navigation.xml".
3. Step 2 can now be repeated, and all of the edited files can be copied and changed to create new sections as well. Once this has been done, add each sections id from

Setup Colours & Icons

1. Within the file "app->src->main->res->values->colors.xml" change the colour codes as required. Make sure to also rename the colour tags by right clicking and selecting refactor->rename->all instances of the keyword.
2. Each of the other xml files in "app->src->main->res" can also be opened and checked for other colours used. By editing these as well, all the colours in the app can be set as required.
3. New icons can be added to "app->src->main->res->drawable" by right clicking and adding a new vector asset. svg files can be downloaded from free svg sites . The icons can the be changed in the "activity_main_drawer.xml" file.

Create Templates for Each Section

1. Each section can be edited through the files "app->src->main->res->layout->fragment_<section>.xml".
2. In each of these files use the design tab to set the layout using the UI. Add the required strings in the "strings.xml" file and edit other resources as required.

At a later stage I will need to learn how to edit layouts with greater control (through code) and make a cleaner and more functional version of these layouts.