Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile App Design - Lab 8 (Android)

7bf2baf0d8d5d7d96e6b67c5d567e3f9?s=47 Caren
November 13, 2018
91

Mobile App Design - Lab 8 (Android)

7bf2baf0d8d5d7d96e6b67c5d567e3f9?s=128

Caren

November 13, 2018
Tweet

Transcript

  1. Mobile App Design Week 8: Android Lab 4

  2. We’ve covered a lot in the last 3 labs!

  3. We’ve covered a lot in the last 3 labs! Creating

    different screens: Activities

  4. We’ve covered a lot in the last 3 labs! Creating

    different screens: Activities
 Layouts and Views : XML

  5. We’ve covered a lot in the last 3 labs! Creating

    different screens: Activities
 Layouts and Views : XML
 Handling user interactions : onClickListener

  6. We’ve covered a lot in the last 3 labs! Creating

    different screens: Activities
 Layouts and Views : XML
 Handling user interactions : onClickListener
 Navigating to different screens
 Passing data around: Intents

  7. We’ve covered a lot in the last 3 labs! Creating

    different screens: Activities
 Layouts and Views : XML
 Handling user interactions : onClickListener
 Navigating to different screens
 Passing data around: Intents
 Saving data: databases / Room
  8. We’ve covered a lot in the last 3 labs! Creating

    different screens: Activities
 Layouts and Views : XML
 Handling user interactions : onClickListener
 Navigating to different screens
 Passing data around: Intents
 Saving data: databases / Room
 Debugging: Logcat
  9. We’ve covered a lot in the last 3 labs! Creating

    different screens: Activities
 Layouts and Views : XML
 Handling user interactions : onClickListener
 Navigating to different screens
 Passing data around: Intents
 Saving data: databases / Room
 Debugging: Logcat
  10. We’ve covered a lot in the last 3 labs! After

    just three labs together, we are now able to: • build the UI for almost any screen • take users to different parts of an app • let users create content within an app • save any data that users create
  11. Show data (text, images, videos) Create content and take users

    through different flows Save data Lab 4: Look nice! What are things we might need to know in order to build a popular Android app?
  12. At this point, we all have a fully functioning flashcard

    app that let’s users: browse through a deck of cards and create their own cards
  13. At this point, we all have a fully functioning flashcard

    app that let’s users: browse through a deck of cards and create their own cards Now we can start adding some extra polish to really make our app stand out!
  14. Animations can add visual cues that notify users about what's

    going on in your app. Why should we care about animations?
  15. Animations can add visual cues that notify users about what's

    going on in your app. Animations also add a polished look, giving it a higher quality look and feel. Why should we care about animations?
  16. Animations can add visual cues that notify users about what's

    going on in your app. Animations also add a polished look, giving it a higher quality look and feel. Helps engage the user and make them want to use the app more Why should we care about animations?
  17. Transitions Helps user understand the flow of the app

  18. Visual Cues Helps notify user what’s going on

  19. Building a Story Mimic a ‘physical’ experience to provide context

  20. Engaging Users

  21. Building Animations Define a set of ‘instructions’ in XML

  22. Building Animations Define a set of ‘instructions’ in XML left_out_animation.xml


    <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator"> <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/> </set>
  23. Building Animations Define a set of ‘instructions’ in XML left_out_animation.xml


    <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator"> <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/> </set>
  24. Building Animations Define a set of ‘instructions’ in XML left_out_animation.xml


    <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator"> <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/> </set>
  25. Building Animations Define a set of ‘instructions’ in XML left_out_animation.xml


    <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator"> <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration=“300"/> <translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="300"/> </set>
  26. Building Animations Animation leftOutAnim = AnimationUtils.loadAnimation(v.getContext(), R.anim.left_out);

  27. Building Animations Animation leftOutAnim = AnimationUtils.loadAnimation(v.getContext(), R.anim.left_out); leftOutAnim.setAnimationListener(new Animation.AnimationListener() {

    @Override public void onAnimationStart(Animation animation) { // this will be called right as the animation starts } @Override public void onAnimationEnd(Animation animation) { // this will be called after the animation ends } @Override public void onAnimationRepeat(Animation animation) { } });
  28. Building Animations Animation leftOutAnim = AnimationUtils.loadAnimation(v.getContext(), R.anim.left_out); leftOutAnim.setAnimationListener(new Animation.AnimationListener() {

    @Override public void onAnimationStart(Animation animation) { // this will be called right as the animation starts } @Override public void onAnimationEnd(Animation animation) { // this will be called after the animation ends } @Override public void onAnimationRepeat(Animation animation) { } });
  29. Building Animations Animation leftOutAnim = AnimationUtils.loadAnimation(v.getContext(), R.anim.left_out); leftOutAnim.setAnimationListener(new Animation.AnimationListener() {

    @Override public void onAnimationStart(Animation animation) { // this will be called right as the animation starts } @Override public void onAnimationEnd(Animation animation) { // this will be called after the animation ends } @Override public void onAnimationRepeat(Animation animation) { } });
  30. Adding Styling

  31. We’ve covered a lot in the last 3 labs! After

    just three labs together, we are now able to: • build the UI for almost any screen • take users to different parts of an app • let users create content within an app • save any data that users create Where to go from here?
  32. Continuing Android Development

  33. Continuing Android Development CodePath Android Guides

  34. Continuing Android Development CodePath Android Guides Google Code Labs

  35. Continuing Android Development CodePath Android Guides Google Code Labs Look

    at existing apps and ask yourself, how would I build this?
  36. Continuing Android Development CodePath Android Guides Google Code Labs Look

    at existing apps and ask yourself, how would I build this? The important thing is to keep building and keep experimenting!