Code Monkey home page Code Monkey logo

xyz-reader's Introduction

Make Your App Material: XYZ Reader

Udacity Android Developer Nanodegree: Project 5
Redesigned the existing news reading app using Material Desing Guidelines. This includes consistent and meaningful use of Material Design UI components, fonts, color, motion and surfaces.

Usage

Git clone and import in Android Studio
minSdkVersion 16

Initial User Feedback

Lyla says: "This app is starting to shape up but it feels a bit off in quite a few places. I can't put finger on it but it feels odd." Jay says: β€œIs the text supposed to be so wonky and unreadable? It is not accessible to those of us without perfect vision." Kagure says: β€œThe color scheme is really sad and I shouldn't feel sad.”

Screenshots (Before)

PhoneUI MainPage Portrait PhoneUI DetailPage Portrait PhoneUI DetailPage Landscape

Improvements Made

  • Used the design support library and its provided widget types: FloatingActionButton, AppbarLayout, SnackBar, etc.
  • Used CoordinatorLayout on the main screen
  • Fixed incorrect shadow of certain UI elements by setting the correct value of android:elevation
  • Fixed incorrect text size and image height on the detail screen
  • Fixed non-uniform padding and certain UI element placement
  • Improved overall color scheme
  • Optimised for Mobile & Tablet
  • Fully adheres to Material Design Guidelines

Screenshots (After)

Phone

PhoneUI MainPage Portrait PhoneUI DetailPage Portrait PhoneUI DetailPage Landscape

7" Tablet

7"TabletUI MainPage Portrait 7"TabletUI DetailPage Portrait 7"TabletUI MainPage Landscape 7"TabletUI DetailPage Landscape

10" Tablet

10"TabletUI MainPage Landscape 10"TabletUI DetailPage Landscape

xyz-reader's People

Contributors

ashwinpilgaonkar avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.