Kotlin Task App
You can integrate the Ditto SDK into Kotlin projects to develop native apps for the Android platform.
To build and explore through a basic to-do task app, confirm that you meet the minimum requirements and then do the following:
Create a new project in Android Studio. (Creating Your Project)
Install and set up Ditto. (Installing Ditto SDK)
Add UI extensions. (Adding UI Extensions)
Create UI layouts. (Creating UI Layouts)
Configure your app MainActivity
. (Configuring Main Activity)
Integrate Ditto and set up logic for peer-to-peer sync. (Integrating Ditto and Setting Up Sync)
Perform your first sync. (Build and Run)
Prerequisites
Before you begin, you’ll need:
- Android Studio version 6.0 (Marshmallow) or higher
minSdk
version 23.0compileSdk
version 33.0 or higher- Java Development Kit (JDK) version 11.0
- Sync Credentials
Step 1: Creating Your Project
To begin this tutorial, go to Android Studio and create a new project:
Click File > New > Basic Views Activity > Next.
From the **New Project **form that appears:
- For Name, type “Tasks”.
- For Package name, type “live.ditto.tasks”.
- If desired, change the Save location.
- For Minimum SDK, select API 26: (“Oreo”; Android 8.0).
- Click Finish.
If the following template files display in the left sidebar, remove each by right-clicking and selecting **Delete **from the menu:
FirstFragment.kt
SecondFragment.kt
fragment_first.xml
fragment_second.xml
nav_graph.xml
Step 2: Installing Ditto SDK
To install Ditto in your project, add the Ditto SDK as a dependency:
From the module-level build.gradle
file, add the following line within the dependencies block.
Make sure to replace “DITTO_VERSION” with the version number of the Ditto SDK you want to use with your app. For example, implementation ("live.ditto:ditto:4.5.0"
).
For the version number of the latest Ditto SDK release, see the Directory of Release Notes and select the release notes for your language.
Sync your Gradle files by doing either of the following:
- Click File > Sync Project with Gradle Files.
- From the upper-right corner of Android Studio, click the elephant icon.
This tutorial uses the Kotlin Synthetics* *plugin for view binding. View binding is an Android feature for streamlining the development workflow when handling views in a UI layout.
For more information, see Android’s official View binding documentation.
Step 3: Adding UI Extensions
This tutorial uses the Kotlin Synthetics* *plugin for view binding. View binding is an Android feature for streamlining the development workflow when handling views in a UI layout.
For more information, see Android’s official View binding documentation.
codeblocktabs
Step 4: Creating UI Layouts
Set up the interface for your Tasks app:
Adjust your default layout files by setting up a toolbar and button for adding new tasks. (Modifying Existing Layouts)
Create a new layout file for an alert dialog box for adding new tasks. (Creating AlertDialog Layout)
Create the Kotlin class file to handle the alert dialog box. (Creating DialogFragment Kotlin Class
Modifying Existing Layouts
Customize how your app’s content displays to the end user by adjusting the appropriate layout resource files so that the floating action button uses a white icon for adding tasks and you use a RecycleView
for displaying a list of tasks.
To modify the existing layout, from the res
> layout
directory:
Open activity_main.xml
file and replace the existing XML with the following:
Open the content_main.xml
file and replace the existing XML with the following:
From Design view, confirm your layout appears as follows:
Creating AlertDialog Layout
Add an editable text input element to allow your end user to enter a task:
From the New Resource File dialog box:
- For File name, type “dialog_new_task”.
- For Root element, make sure LinearLayout is selected.
Open the new dialog_new_task.xml
layout file in Code view, and then replace the existing XML with the following:
Click Design from the upper-right corner of Android Studio and confirm that your layout appears as follows:
Set string constants for the alert dialog box by opening the res
> values
> strings.xml
file and replacing the existing XML with the following:
Creating DialogFragment Kotlin Class
Now that you’ve created the AlertDialog
layout element, create a new Kotlin class file to encapsulate the logic for the dialog’s behavior and appearance:
From the Project Source Files in the upper-left corner of Android Studio, right-click the java
folder located in the app
> src
> main
directory.
From the New Kotlin Class/File dialog box:
- For Name, type “NewTaskDialogFragment”.
- Double-click Class:
From the NewTaskDialogFragment
file, replace the existing contents with the following live.ditto.tasks
package:
Step 5: Configuring Main Activity
Set up the main activity of your app:
Import Ditto, create a few variables and then create the functions for handling events related to the alert dialog box. (Setting Up Ditto, Variables, and Functions)
Create a new layout resource file for the checkbox that displays the task in each row. (Setting Up task_view Layout)
Configure the RecyclerView to display tasks and add the logic for end-user actions. (Setting Up RecyclerViewer Layout
Create a separate class for handling swipe-to-delete functionality. (Adding Swipe-to-Delete Functionality)
Setting Up Ditto, Variables, and Functions
From the MainActivity
file located in the app/src/main/java/live/ditto/tasks
directory:
Replace the existing contents with the following:
After the onCreate()
function:
Sync your Gradle files by doing either of the following:
- Click File > Sync Project with Gradle Files.
- From the upper-right corner of Android Studio, click the elephant icon.
Setting Up task_view Layout
Add a text view and checkbox for displaying the task in each row of the RecyclerView
:
Create a new layout file by right-clicking the layout folder, and then clicking New > Layout Resource File.
From the New Resource File dialog box:
- For File name, type “task_view”.
- For the Root element, make sure LinearLayout is selected.
Open the new task_view.xml
layout file in Code view, and then replace the existing XML with the following:
Sync your Gradle files by doing either of the following:
- Click File > Sync Project with Gradle Files.
- From the upper-right corner of Android Studio, click the elephant icon.
Click Design from the upper right corner of Android Studio and confirm that your layout appears as follows:
Setting Up RecyclerViewer Layout
From MainActivity
, configure the recycler viewer to efficiently display a dynamic and scrollable list of tasks:
Replace the onCreate()
function with the following:
Declare a RecyclerView.Adapter
as an inner class of MainActivity
:
Adding Swipe-to-Delete Functionality
To match the iOS getting-started app, add swipe-to-delete functionality by inserting the following as a new class object at the bottom of the MainActivity
enclosure:
Step 6: Integrating Ditto and Setting Up Sync
To finish creating the Task app, integrate Ditto:
Create the task app in the Ditto portal and get your sync access credentials. (Sync Credentials)
Instantiate the ditto
object you’ll use in your app to interact with the platform. (Setting Up Store Observer Query)
Verify configurations for location permissions. (Checking for Location Permissions)
Confirm imports. (Ensuring Imports)
Initializing Ditto
Add handlers for the swipe-to-delete functionality and event listening for the row clicks that mark a task as completed (or in-completed) and provide your access credentials for one-time authentication with the Big Peer by doing the following within MainActivity
:
Replace the existing onCreate()
function with the following:
Provide the Sync Credentials generated when you created your app in the portal:
If using the OnlinePlayground
identity, obtain your sync credentials from the portal.
To use the OfflinePlayground
identity, request an offline token from the portal.
- For
appID
, replace thestring
value with your app ID. - For
token
, replace thestring
value with your playground token.
Setting Up Store Observer Query
Finally, set up a sync subscription for the desired query and create a store observer for handling updates by adding the following within MainActivity
:
Use Ditto’s store observer along with sync subscriptions to react dynamically to data changes. This best practice ensures a realtime end-user experience, allowing your UI to stay in sync with the underlying data as updates occur.
Checking For Location Permissions
Since Bluetooth Low Energy (LE) can be involved with location tracking, Android requires you to request location permissions (since Bluetooth can be involved with location tracking). Insert this function in MainActivity
:
For more information about Android’s protection of end-user privacy, see the official Request location permissions documentation.
Ensuring Imports
Just in case your project did not auto-import as you went along, you can replace the import statements in MainActivity
with these:
Step 7: Build and Run!
You now have a fully functioning tasks app. Build and run it on a device. The simulator will not show any data sync because neither Bluetooth LE or the necessary network system is available to allow simulators to find each other or another device.
Was this page helpful?