Design/Layout

For changes to the design/layout such as changing the logo in the header, colour scheme etc., this should be fairly straightforward and you should look at the following files in which to make these changes:

App icons and colors

The Android project for OppiaMobile provides a mechanism to substitute the main images just changing the reference in the res/values/theme.xml file, so instead of having to change all the ocurrences of an image or replacing it, you can add a new drawable and just update the reference. The app has basically two images that include the Oppia logo, that you might want to change: the app icon and the course placeholder.

• App icon: this is used as the icon for the app in the Android system, and in some of the welcome screens of the app. To change it, replace the app_icon definition in the theme.xml file.

• Course placeholder icon: Another image that contains the OppiaMobile logo is the one representing the default course icon for the courses that don’t include a custom one. If you want to change this, you have to replace the course_icon_placeholder definition in the theme.xml with the reference of a new drawable you want. To avoid possible deformations, make sure that you use a square image. Be aware that the course images are cropped to a circle in various places of the app, so don’t put important parts of your logo in the square borders.

If you want to go further with this customization, you can also change the default activity images with custom ones, for example to make them tinted to your brand color. This images are inside the drawables folder, named default_icon_activity.png and default_icon_quiz.png.

Colors

If you want to change the default green palette of the app to another set of colors that match better with your brand, you can do it so by simply changing the theme.xml values resource. The recommended way is that you add a new values file with your brand colors definition and use that definitions in the theme.xml. You can deduce from their names where each color is used, but test the changes anyway until you acomplished the expected results.

Drawer design

You can change the design of the drawer menu as well, as it also contains the OppiaMobile logo and a green image background.

The colors of the selected option on the drawer and the icons depend on the ones defined in the theme.xml, so once you have changed that it will apply automatically to the drawer. The other thing you might want to modify is the drawer header design to use something more in line with your brand.

To modify the header, open the drawer_header.xml file under the layout resources folder. There, first of all you can change the main image that appears as the logo, changing the "source" parameter in the ImageView, that by default uses the app_icon definition. We recommend using a squared image for this one, and something that has some contrast with the background.

If the drawer background doesn’t fit with your brand image, you can change that also. To do that, replace the drawer_header_bg drawable in your res folder with another image of your choice. This image can have the resolution you want, but keep in mind that it will be cropped to fill the header space if the aspect ratio is different from its container, so it is recommended to use an horizontal image with a similar aspect ratio as the existing one.

Also, once you have change your background, if the image you chose is too dark the text may be hard to read. If this is your case, you can try changing the text color of some of the TextViews to a lighter one.

For more significant changes to the interface over and above changing the basic colour scheme and header etc, then this will require more substantial updates and familiarity with the code base.