Building an app during the #BuildForCovid19 Hackathon with Jetpack

Slides for my GDG Cape Town "An evening of Jetpack" talk
https://www.youtube.com/watch?v=mJYltyYZxUI

In early 2020, with the COVID-19 pandemic having plagued the world, the #BuildForCOVID19 hackathon, backed by big tech companies such as Facebook, Slack, Microsoft was created with the aim of help the issues and challenges associated with Covid-19. These slides are part of my talk I shared on how Android Jetpack was very useful in building a prototype within a very limited time of three days.

Transcript

1. Hi!
   Ahmed Tikiwa
   Android Engineer @Luno
   @ahmed_tikiwa
   

   View Slide

2. From the trenches:
   Zero to prototype, how Android Jetpack helped me build an app
   for a hackathon
   

   View Slide

3. Background
   @ahmed_tikiwa
   

   View Slide

4. 2020...
   ● Covid-19
   ● Normalcy
   ● Global lockdowns
   ● Institutions closed
   ● Remote work
   ● Job losses
   @ahmed_tikiwa
   

   View Slide

5. 2020...
   ● #BuildForCovid19 Hackathon
   ○ Build software solutions
   ■ Drive social impact
   ■ Tackle Covid-19 challenges
   ● Backed by:
   ○ AWS
   ○ Facebook
   ○ Giphy
   ○ Microsoft
   ○ Slack
   ○ Pinterest
   ○ Twitter
   @ahmed_tikiwa
   

   View Slide

6. What the demo app needed to do
   @ahmed_tikiwa
   

   View Slide

7. Project Name: LIAM
   @ahmed_tikiwa
   ● Learning platform for kids
   ● Earn “LIAMs” for completing courses
   ● Earn “LIAMs” for selling their digital
   assets
   ● Use “LIAMs” to buy digital assets
   ● Global team
   ○ South Africa, Uganda, Canada,
   India & Ghana
   ● Android prototype with:
   ○ a sign up screen, a
   login screen, a
   marketplace screen, a
   course catalogue
   screen and a profile
   screen
   ● 3 days dev time
   ● Mock data
   

   View Slide

8. Project Name: LIAM
   @ahmed_tikiwa
   

   View Slide

9. Team approach
   @ahmed_tikiwa
   ● Hackathon rules required:
   ○ Production-ready or Proof-of-Concept (PoC) applications
   ● LIAM goal: Production-ready
   ● App needed to be performant, clean & have well-structured
   code
   

   View Slide

10. Android Jetpack
    @ahmed_tikiwa
    

    View Slide

11. Android Jetpack
    @ahmed_tikiwa
    ● Components, tools and architecture guidance for development acceleration
    ● Considered a “template” for production ready code
    ● Answer to difficult app management as data changes
    ● Four categories:
    ○ Foundation
    ○ UI
    ○ Architecture
    ○ Behaviour
    ■ Components: Backward compatible, work together, adaptable
    

    View Slide

12. @ahmed_tikiwa
    Bind UI components in
    layouts to data sources
    Aware of current
    activity/fragment lifecycle
    state
    Observable data holder
    class and lifecycle aware
    Navigation around the
    app, handle deep links
    Store & manage UI
    related data while
    lifecycle aware
    Kotlin ext included in
    Jetpack. Concise,
    idiomatic Kotlin provision
    Multiple independent
    screens hosted by an
    Activity
    

    View Slide

13. Structuring the code
    @ahmed_tikiwa
    

    View Slide

14. @ahmed_tikiwa
    

    View Slide

15. Structuring the code:
    @ahmed_tikiwa
    Databinding
    

    View Slide

16. Databinding
    @ahmed_tikiwa
    ● Introduced in 2015 and now part of Android Jetpack
    ● Bind UI components in layouts to data sources
    ● Simple to set up:
    android {
    ...
    buildFeatures {
    dataBinding true
    }
    }
    ● Wrap layout elements with tag in layout file
    ● Eliminates findViewById
    

    View Slide

17. Databinding converting from layout
    @ahmed_tikiwa
    

    View Slide

18. Databinding expressions
    @ahmed_tikiwa
    ● Make data available to the layout using the section
    ● Then use it in the layout this way:
    
    name=”viewModel”
    type=”com.ahmedtikiwa.app.ui.dashboard.DashboardViewModel”
    
    
    name=”viewModel”
    type=”com.ahmedtikiwa.app.ui.dashboard.DashboardViewModel”
    
    
    
    viewModel.onClick()}” />
    ● Listener created, set
    on view
    ● Lambda evaluated
    on event
    

    View Slide

19. Binding the data source to the layout
    @ahmed_tikiwa
    Bind layout view to
    architecture components
    e.g LiveData and
    ViewModel
    

    View Slide

20. Binding Adapters
    @ahmed_tikiwa
    ● Make framework call to set value
    ● Use system binding adapter e.g android:text
    ○ setText()
    ● Use custom binding adapter e.g app:imageUrl
    

    View Slide

21. Binding Adapters: System binding adapters
    @ahmed_tikiwa
    Examples: setText(),
    setTextSize(),
    setInputType()
    

    View Slide

22. Structuring the code:
    @ahmed_tikiwa
    ViewModel
    

    View Slide

23. ViewModel
    @ahmed_tikiwa
    ● Part of the Android Jetpack
    ● Storage and management of UI related data in a lifecycle-conscious way
    ● Data can survive configuration changes for example screen rotation
    ● Should not hold reference to UI Controllers - Activities or Fragments or their
    context
    ● Can hold Application context through use of extending
    AndroidViewModel(application)
    ● Connected to the UI Controller - Activity or Fragment - via ViewModelProvider
    utility class
    

    View Slide

24. ViewModel Lifecycle
    @ahmed_tikiwa
    ViewModel exists from
    when the its requestor -
    Android or Fragment - is
    finished and destroyed
    

    View Slide

25. ViewModels used
    @ahmed_tikiwa
    LoginViewModel SignUpViewModel DashboardViewModel VideoListViewModel StoreViewModel
    LoginFragment SignUpFragment DashboardFragment VideoListFragment StoreFragment
    MainActivity
    

    View Slide

26. Structuring the data
    @ahmed_tikiwa
    LiveData
    

    View Slide

27. LiveData
    @ahmed_tikiwa
    ● Part of the Android Jetpack
    ● Observable data holder class
    ● Like ViewModel, is also life-cycle aware
    ● Will only update active component observers
    ○ Send update to observer only when observer is active
    ■ In Started or Resumed state
    ■ Not Paused or Destroyed state
    ● When data changes, LiveData will post an update
    

    View Slide

28. Structuring the data
    @ahmed_tikiwa
    Implementation
    

    View Slide

29. @ahmed_tikiwa
    Dependencies: App-level build.gradle
    

    View Slide

30. @ahmed_tikiwa
    Dependencies: Project-level build.gradle
    

    View Slide

31. @ahmed_tikiwa
    Data binding definitions
    such as the
    ImageBindingAdapter
    

    View Slide

32. @ahmed_tikiwa
    ImageBindingAdapter.kt store_list_item.xml
    

    View Slide

33. @ahmed_tikiwa
    Data classes specific to
    the app
    

    View Slide

34. @ahmed_tikiwa
    store_list_item.xml
    

    View Slide

35. @ahmed_tikiwa
    store_list_item.xml
    

    View Slide

36. @ahmed_tikiwa
    Any classes and services
    pertaining to making a
    network request
    

    View Slide

37. @ahmed_tikiwa
    The source of data for the
    app
    

    View Slide

38. @ahmed_tikiwa
    LiamRepository.kt
    

    View Slide

39. @ahmed_tikiwa
    LiamRepository.kt
    I/O Dispatcher handles
    the execution of the
    coroutine
    

    View Slide

40. @ahmed_tikiwa
    LiamRepository.kt
    

    View Slide

41. @ahmed_tikiwa
    LiamRepository.kt
    

    View Slide

42. @ahmed_tikiwa
    The screens that will be
    displayed to the user
    

    View Slide

43. @ahmed_tikiwa
    The owner of the
    viewModel to be provided
    

    View Slide

44. @ahmed_tikiwa
    ViewDataBinding#setLifeCycleOwner()
    Fragment#getLifeCycleOwner()
    

    View Slide

45. @ahmed_tikiwa
    

    View Slide

46. @ahmed_tikiwa
    

    View Slide

47. @ahmed_tikiwa
    Interface responsible
    for instantiating the
    ViewModel
    Utility class to provide
    ViewModels
    

    View Slide

48. Structuring the data
    @ahmed_tikiwa
    Navigation
    

    View Slide

49. Navigation
    @ahmed_tikiwa
    ● Part of the Android Jetpack
    ● Collection of libraries, tooling and guidance to simplify Android in-app navigation
    ● Use of a Navigation Graph to outline navigation information:
    ○ All possible paths a user can take in-app
    ○ An XML file with visual tool in Android Studio Navigation Editor
    ● Use of NavHost:
    ○ Empty container to display navigation graph destinations
    ○ Default NavHost - NavHostFragment
    ● Use of NavController
    ○ Controls or manages the in-app navigation
    ○ Swaps destination content as user navigates
    

    View Slide

50. Navigation, the prototype’s navGraph, Nav Editor
    @ahmed_tikiwa
    

    View Slide

51. Navigation, the prototype’s navGraph, XML
    @ahmed_tikiwa
    nav_graph.xml
    

    View Slide

52. NavHost
    @ahmed_tikiwa
    main_activity.xml
    Intercepts system Back
    button
    Known issue with using
    FragmentContainerView
    https://issuetracker.google.com/issu
    es/142847973
    

    View Slide

53. NavHost, adding bottom navigation
    @ahmed_tikiwa
    main_activity.xml
    

    View Slide

54. NavHost, adding bottom navigation - the menu
    @ahmed_tikiwa
    bottom_nav_menu.xml
    

    View Slide

55. NavController
    @ahmed_tikiwa
    

    View Slide

56. @ahmed_tikiwa
    

    View Slide

57. @ahmed_tikiwa
    With Navigation
    

    View Slide

58. Thank you!
    @ahmed_tikiwa
    

    View Slide

59. Resources
    @ahmed_tikiwa
    ● “Developing apps in Kotlin” free Udacity course using Android Jetpack
    ● https:/
    /developer.google.com/jetpack
    ● List of AndroidX Binding Adapters -
    https:/
    /androidx.de/androidx/databinding/adapters/
    

    View Slide