Up and Running With Turbo Android Part 1
Tags: turbo, hotwire, android, native
Published: 2023-05-16 10:01:46

---
title: Up and Running With Turbo Android Part 1
published: true
date: 2023-05-10 00:00:00 UTC
tags: turbo, hotwire, android, native
canonical_url: https://williamkennedy.ninja/android/2023/05/10/up-and-running-with-turbo-android-part-1/
---

![alt text](https://williamkennedy.ninja/assets/images/posts/hello_iphone.jpg "iPhone 8 with Hello text on screen")Photo by [Tyler Lastovich](https://unsplash.com/@lastly?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/iphone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

# Turbo Android - Part 1 Getting Setup

In previous blog posts, I’ve covered getting set up with [Turbo iOS](/ios/2022/09/12/how-to-render-a-native-home-screen-with-turbo-ios/) and implementing native functionality.

However, Android is a massive part of the mobile market, and there are too few resources on getting up and running with Turbo Android.

This post aims to rectify that.

You will need Android Studio for this tutorial.

## The Basics

First of all, we will assume you have a Turbo-enabled app. I’ll be using [this app](https://github.com/williamkennedy/crm_me) for a [talk](https://www.figma.com/file/BHUq2FqNAVZibRKTnjhTu1/Hotwiring-Android-and-IOS?type=design&node-id=1%3A80&t=EumTHj22nAAc9Yjy-1) I’m giving.

The app is called CRM ME. It’s a simple CRM app. You can add, delete and update contacts—all your basic functionality.

You can create your own using the following Rails command.

```
rails new crm_me -j esbuild

```

Note that we’re using esbuild. This is because import maps are not supported on the Android browser yet.

With your Rails app installed, you can run `rails g scaffold Contacts name:string` followed by `rails db:migrate`, and you’re good to go.

Let’s run your app on the following port.

```
bin/dev -p 3000 

```

## Setting up Turbo Android and Installing the Library

Open up Android Studio, click New Project, then click ‘No Activity’.

![alt text](https://williamkennedy.ninja/assets/images/posts/android/part_1/android_studio_no_activity.png "Android Studio No activity")

On the next screen, you can name the app whatever you want and click Finish.

To get Turbo up and running, we first need the Hotwire library.

Open up `build.gradle(Module:app)`

At the bottom of this file, you’ll see the following:

```
dependencies {

    implementation 'androidx.core:core-ktx:1.8.0'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.8.0'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
}

```

Add in the Turbo Android library.

```
dependencies {

    implementation 'androidx.core:core-ktx:1.8.0'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.8.0'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'

    implementation "dev.hotwire:turbo:7.0.0-rc18" 
}

```

You will be asked to sync your Gradle file. Ensure that you do as this installs all the dependencies.

Now, we need to get our boilerplate up and running.

## Creating the MainActivity and MainSessionNavHost

Android is made up of activities. An activity is a single screen with a user interface. We will then add this activity to the Android Manifest file.

Let’s dive into the code:

First, create a kotlin file called `MainActivity` under the java/com.example.yourappname

Enter the following code:

```
package com.example.yourappname
 
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import dev.hotwire.turbo.activities.TurboActivity
import dev.hotwire.turbo.delegates.TurboActivityDelegate

class MainActivity : AppCompatActivity(), TurboActivity {
    override lateinit var delegate: TurboActivityDelegate

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        delegate = TurboActivityDelegate(this, R.id.main_nav_host)
    }
}

```

You’ll notice that `activity_main` and `main_nav_host` are currently red. We’ll rectify that soon.

We must first create our `MainSessionNavHost`, the main class that handles the flow of our application.

Create a kotlin file called `MainSessionNavHost` under java/com.example.yourappname

Enter the following:

```
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import dev.hotwire.turbo.config.TurboPathConfiguration
import dev.hotwire.turbo.session.TurboSessionNavHostFragment
import kotlin.reflect.KClass

class MainSessionNavHost : TurboSessionNavHostFragment() {
    override var sessionName = "main"
    override var startLocation = "http://10.0.2.2:3000"

    override val registeredFragments: List<KClass<out Fragment>>
    get() = listOf()

    override val registeredActivities: List<KClass<out AppCompatActivity>>
    get() = listOf()

    override val pathConfigurationLocation: TurboPathConfiguration.Location
    get() = TurboPathConfiguration.Location( assetFilePath = "json/configuration.json")

}

```

Now we have three more files to create; a small change to our Android manifest file, and we should be up and running. We need to make three resource files, a `json/configuration.json` asset file, a `main_activity` layout and a WebFragment.

Let’s start with our JSON file.

Right-click on the app and go to New > Folder > Assets Folder.

![alt text](https://williamkennedy.ninja/assets/images/posts/android/part_1/android_studio_assets.png "Android Studio assets folder")

Next, right-click on the assets directory, New > Directory and create the JSON directory.

![alt text](https://williamkennedy.ninja/assets/images/posts/android/part_1/android_studio_directory.png "Android Studio directory")

Finally, right-click on the json directory and add a file called `configuration.json`.

![alt text](https://williamkennedy.ninja/assets/images/posts/android/part_1/android_studio_directory.png "Android Studio file")

Add the following to the file.

```
{
  "settings": {
    "screenshots_enabled": true
  },
  "rules": [
    {
      "patterns": [
        ".*"
      ],
      "properties": {
        "context": "default",
        "uri": "turbo://fragment/web",
        "pull_to_refresh_enabled": true
      }
    }
  ]
}

```

This is the most important file as it determines the navigation on your Turbo-enabled app. We will cover Path Configuration in a future article, but I highly recommend reading [this documentation](https://github.com/hotwired/turbo-android/blob/main/docs/PATH-CONFIGURATION.md).

Next, we will create a `WebFragment` file.

Place this in the same directory as your `MainActivity`

It will have the following:

```
import dev.hotwire.turbo.fragments.TurboWebFragment
import dev.hotwire.turbo.nav.TurboNavDestination
import dev.hotwire.turbo.nav.TurboNavGraphDestination

@TurboNavGraphDestination(uri = "turbo://fragment/web")
open class WebFragment : TurboWebFragment(), TurboNavDestination {}

```

We add this to the list of registered fragments in our `MainSessionNavHost`

```
override val registeredFragments: List<KClass<out Fragment>>
    get() = listOf(
        WebFragment::class
    )

```

We are so close to getting up and running. There are just three little things to do.

First, we create our `layout_main` file.

Click Resource Manager > Layout > + Icon > Layout Resource File

![alt text](https://williamkennedy.ninja/assets/images/posts/android/part_1/android_studio_resource_layout.png "Android Studio resource layout")

Mine looks like this:

```
 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/main_nav_host"
        android:name="com.example.thirdturbo.MainSessionNavHost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="false" />

</androidx.constraintlayout.widget.ConstraintLayout>

```

Finally, we have to edit our Android Manifest(found in the top-level directory) file to ensure we can access the internet and localhost.

```
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:usesCleartextTraffic="true"
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.ThirdTurbo"
        tools:targetApi="31">
    <activity
        android:name=".MainActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

</manifest>

```

Now you should be able to click the Run button and watch it build your app.

![alt text](https://williamkennedy.ninja/assets/images/posts/android/part_1/android_studio_run.png "Android Studio run button")

Congratulations, you now have a Turbo-enabled Android app.

In the next part, we’ll take the app further by adding more Turbo-enabled fragments, such as modals and native screens.