- For this project I took a functional app that didn't follow Material Design Guidelines and redesigned it following Material Design Guidelines.
- Included an AppBarLayout with a CollapsingToolbarLayout to display the app's logo.
- Placed the articles on a single surface since the content was homogeneous and therefore should be presented on the same surface for a better UX on scroll.
- The landscape layout optimizes the blank space on the screen by increasing the size of the images.
- On larger devices, the list is displayed in two columns.
- Added a divider for the RecyclerView items.
- Resized article image to full width within its container and a fixed height.
- Added two scrims on top of the main article image:
- One at the top to guarantee that the white up button will always be visible.
- One at the bottom to create a transition between the view below and the image.
- Centered the article's title, author and date for a better presentation.
- Set a default font family for better consistency and UX.
- The article's body has a max width that will not be exceeded on larger devices.
- Added a landscape layout that utilizes the blank space on the screen by repositioning the image to the left and the title, author, date and body to the right.
- Replaced an ImageButton for a FloatingActionButton provided by the Design Support Library with the correct elevation and dimensions that scale according to the device width ("mini" FloatingActionButton for devices with width less than 460dp and "normal" for devices wider that 460dp). - The size of the button will change on rotation according to the criteria listed above, following Material Design Guidelines.
- Added an icon from materialdesignicons.com to the Floating Action Button.
- Added a "fade" transition when the user launches the article details activity.
- When there is no internet connection, a SnackBar will warn the user and the articles list will be hidden.
These resources were very helpful during my project:
- Toolbar Implementation
- RecyclerView dividers 1
- RecyclerView dividers 2
- Coordinator Layout
- SnackBar
- Transition Animations 1
- Transition Animations 2
- Code to check if there is internet connection available
- Change SnackBar color 1
- Change SnackBar color 2
- Reusing Layout with the "include" tag