$30 off During Our Annual Pro Sale. View Details »

Building an app during the #BuildForCovid19 Hackathon with Jetpack

Building an app during the #BuildForCovid19 Hackathon with Jetpack

Slides for my GDG Cape Town "An evening of Jetpack" talk

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.

Ahmed Tikiwa

August 12, 2020

More Decks by Ahmed Tikiwa

Other Decks in Technology


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

  2. From the trenches: Zero to prototype, how Android Jetpack helped

    me build an app for a hackathon
  3. Background @ahmed_tikiwa

  4. 2020... • Covid-19 • Normalcy • Global lockdowns • Institutions

    closed • Remote work • Job losses @ahmed_tikiwa
  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
  6. What the demo app needed to do @ahmed_tikiwa

  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
  8. Project Name: LIAM @ahmed_tikiwa

  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
  10. Android Jetpack @ahmed_tikiwa

  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
  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
  13. Structuring the code @ahmed_tikiwa

  14. @ahmed_tikiwa

  15. Structuring the code: @ahmed_tikiwa Databinding

  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 <layout> tag in layout file • Eliminates findViewById
  17. Databinding converting from layout @ahmed_tikiwa

  18. Databinding expressions @ahmed_tikiwa • Make data available to the layout

    using the <data> section • Then use it in the layout this way: <data> <variable name=”viewModel” type=”com.ahmedtikiwa.app.ui.dashboard.DashboardViewModel” </data> <data> <variable name=”viewModel” type=”com.ahmedtikiwa.app.ui.dashboard.DashboardViewModel” </data> <TextView android:text=”@{viewModel.title}” /> <TextView app:imageUrl=”@{viewModel.url}” /> <TextView app:onClick=”@{() -> viewModel.onClick()}” /> • Listener created, set on view • Lambda evaluated on event
  19. Binding the data source to the layout @ahmed_tikiwa Bind layout

    view to architecture components e.g LiveData and ViewModel
  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
  21. Binding Adapters: System binding adapters @ahmed_tikiwa Examples: setText(), setTextSize(), setInputType()

  22. Structuring the code: @ahmed_tikiwa ViewModel

  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
  24. ViewModel Lifecycle @ahmed_tikiwa ViewModel exists from when the its requestor

    - Android or Fragment - is finished and destroyed
  25. ViewModels used @ahmed_tikiwa LoginViewModel SignUpViewModel DashboardViewModel VideoListViewModel StoreViewModel LoginFragment SignUpFragment

    DashboardFragment VideoListFragment StoreFragment MainActivity
  26. Structuring the data @ahmed_tikiwa LiveData

  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
  28. Structuring the data @ahmed_tikiwa Implementation

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

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

  31. @ahmed_tikiwa Data binding definitions such as the ImageBindingAdapter

  32. @ahmed_tikiwa ImageBindingAdapter.kt store_list_item.xml

  33. @ahmed_tikiwa Data classes specific to the app

  34. @ahmed_tikiwa store_list_item.xml

  35. @ahmed_tikiwa store_list_item.xml

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

  37. @ahmed_tikiwa The source of data for the app

  38. @ahmed_tikiwa LiamRepository.kt

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

  40. @ahmed_tikiwa LiamRepository.kt

  41. @ahmed_tikiwa LiamRepository.kt

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

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

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

  45. @ahmed_tikiwa

  46. @ahmed_tikiwa

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

    provide ViewModels
  48. Structuring the data @ahmed_tikiwa Navigation

  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
  50. Navigation, the prototype’s navGraph, Nav Editor @ahmed_tikiwa

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

  52. NavHost @ahmed_tikiwa main_activity.xml Intercepts system Back button Known issue with

    using FragmentContainerView https://issuetracker.google.com/issu es/142847973
  53. NavHost, adding bottom navigation @ahmed_tikiwa main_activity.xml

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

  55. NavController @ahmed_tikiwa

  56. @ahmed_tikiwa

  57. @ahmed_tikiwa With Navigation

  58. Thank you! @ahmed_tikiwa

  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/