Back to Supabase

Use Supabase with Android Kotlin

apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx

1.26.085.0 KB
Original Source
<AiPrompt id="kotlin" />

<$Partial path="quickstart_db_setup.mdx" />

3. Create an Android app with Android Studio

Select the Android Studio > New > New Android Project menu item.

4. Install Supabase's Agent Skills (optional)

Supabase's Agent Skills is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.

Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.

To install, run the following command in the root of your project:

bash
npx skills add supabase/agent-skills

5. Install dependencies

Open build.gradle.kts (app) file and add the serialization plugin, Ktor client, and Supabase client.

Replace the version placeholders $kotlin_version with the Kotlin version of the project, and $supabase_version and $ktor_version with the respective latest versions.

<Admonition type="note">

You can find the latest supabase-kt version on GitHub and Ktor in the Ktor documentation.

</Admonition>
kotlin
plugins {
  ...
  kotlin("plugin.serialization") version "$kotlin_version"
}
...
dependencies {
  ...
  implementation(platform("io.github.jan-tennert.supabase:bom:$supabase_version"))
  implementation("io.github.jan-tennert.supabase:postgrest-kt")
  implementation("io.ktor:ktor-client-android:$ktor_version")
}

6. Add internet access permission

Add the following line to the AndroidManifest.xml file under the manifest tag and outside the application tag.

xml
...
<uses-permission android:name="android.permission.INTERNET" />
...

7. Initialize the Supabase client

You can create a Supabase client whenever you need to perform an API call.

For a quick example, create a client at the top of the MainActivity.kt file below the imports.

Replace the supabaseUrl and supabaseKey with your own, which you can get from the helper below, or from the project Connect panel:

<Button variant="primary" asChild> <a href="/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=androidkotlin"> Open Connect panel </a> </Button>
kotlin
import ...

val supabase = createSupabaseClient(
    supabaseUrl = "https://xyzcompany.supabase.co",
    supabaseKey = "your_publishable_key"
  ) {
    install(Postgrest)
}
...

<$Partial path="api_settings.mdx" variables={{ "framework": "androidkotlin", "tab": "mobiles" }} />

8. Create a data model for instruments

Create a serializable data class to represent the data from the database.

Add the following below the createSupabaseClient function in the MainActivity.kt file.

kotlin
@Serializable
data class Instrument(
    val id: Int,
    val name: String,
)

9. Query data from the app

Use LaunchedEffect to fetch data from the database and display it in a LazyColumn.

Replace the default MainActivity class with the following code.

<Admonition type="note">

This example application makes a network request from the UI code. In production, you should use a ViewModel to separate the UI and data fetching logic.

</Admonition>
kotlin
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SupabaseTutorialTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    InstrumentsList()
                }
            }
        }
    }
}

@Composable
fun InstrumentsList() {
    var instruments by remember { mutableStateOf<List<Instrument>>(listOf()) }
    LaunchedEffect(Unit) {
        withContext(Dispatchers.IO) {
            instruments = supabase.from("instruments")
                              .select().decodeList<Instrument>()
        }
    }
    LazyColumn {
        items(
            instruments,
            key = { instrument -> instrument.id },
        ) { instrument ->
            Text(
                instrument.name,
                modifier = Modifier.padding(8.dp),
            )
        }
    }
}

10. Start the app

Run the app on an emulator or a physical device by clicking the Run app button in Android Studio.

Next steps