Mobile App Design - Lab 8 (Android)

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!