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

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. 2020... • Covid-19 • Normalcy • Global lockdowns • Institutions

    closed • Remote work • Job losses @ahmed_tikiwa
  2. 2020... • #BuildForCovid19 Hackathon ◦ Build software solutions ▪ Drive

    social impact ▪ Tackle Covid-19 challenges • Backed by: ◦ AWS ◦ Facebook ◦ Giphy ◦ Microsoft ◦ Slack ◦ Pinterest ◦ Twitter @ahmed_tikiwa
  3. 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
  4. 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
  5. 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
  6. @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
  7. 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
  8. 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
  9. Binding the data source to the layout @ahmed_tikiwa Bind layout

    view to architecture components e.g LiveData and ViewModel
  10. 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
  11. 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
  12. ViewModel Lifecycle @ahmed_tikiwa ViewModel exists from when the its requestor

    - Android or Fragment - is finished and destroyed
  13. 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
  14. 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
  15. NavHost @ahmed_tikiwa main_activity.xml Intercepts system Back button Known issue with

    using FragmentContainerView https://issuetracker.google.com/issu es/142847973
  16. 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/