Design a simple android app with two screens that will display contents from a REST API.
Screen 1 - Will show a vertical scrolling list of widgets. Each widget, depending on its type, will show one or more image. Data for this screen has to be fetched from the API-1.
Following are the list of widgets to be supported by the app:
This widget can show up to three images in a row. A row occupies the full width of the screen and each image in a row should be considered as a column having equal width. It is important to preserve the aspect ratio of the image and the entire widget should have a height based on the ratio.
Following are the configuration attributes to be supported by this widget:
-
type - Type of the widget.
-
images - Array or images to display.
-
cols - Number of columns.
Each image has the following configuration attributes:
-
width - Width of the image.
-
url - URL of the image.
-
format - The format of the image.
A slider widget shows a slideshow of images. Each slide will occupy the entire width of the screen. The user should be allowed to slide only one image at a time. Should support automatic slide change after every 3 seconds. When the user is performing the action of sliding, disable the automatic slide change which should be resumed after the user action has completed. As always, preserve the aspect ratio of the image.
Following are the configuration attributes to be supported by this widget:
-
type - Type of the widget.
-
images - Array or images to display (Each image has the attributes mentioned above).
-
show - Number of images to show in a slide (1 always).
A carousel widget displays a carousel of images. Carousel is not the same as a slider. While a slider shows one image at a time, a carousel can show multiple images. A carousel should always have a free motion (horizontally), unlike the slider.
Following are the configuration attributes to be supported by this widget:
-
type - Type of the widget.
-
title - Title to be displayed above the carousel.
-
url - Url to fetch the list of images (Each image has the attributes as defined above).
-
show - Number of images to show.
Screen 2 - Clicking on any of the widgets should open Screen 2 that will list a two column grid of images. Fetch the content necessary for this screen from the API-2.
- You are free to use any 3rd party libraries for Image caching/ Network etc.
- We encourage you to build this Android app in Kotlin.
- Application should have a well-defined architecture such as MVP/ MVVM/ Clean.
- Use Android Material Design Components/ Layouts.
- It is important to deliver a good UI experience - Ensure a smooth and responsive UI even in devices with less processing power. Show proper loaders/ progress for Image loading/ API calls etc (if applicable).
- Images can be of the format JPEG, PNG, GIF and WebP.
- REST APIs used for this challenge will work using HTTP/ HTTPS schemes.
- Unit tests are mandatory with over 85% of code coverage.
- UI tests are not mandatory but a plus to have.
- Identify and plug any memory leaks.
- Should cover edge cases related to API parsing, missing attributes, improper attribute types, network issues etc.
API-1: https://demo8082631.mockable.io/content API-2: https://demo8082631.mockable.io/list API-3: https://demo8082631.mockable.io/brands (For the widget C) API-4: https://demo8082631.mockable.io/wedding (For the widget C)