How to make Text Selectable in Android using Jetpack Compose?

By default, Composable Texts are not selectable which means users cannot copy text from your application, and to enable text selection you need to wrap the text elements into Selection Container. In this article, we will use Android’s Jetpack Compose to create those chips. A sample image is given below to give an idea of what we are going to build. Note that we are going to implement this project using the Kotlin language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.

Step 2: Working with the MainActivity.kt file

Navigate to the app > java > your app’s package name and open the MainActivity.kt file. Inside that file add the below code to it. Comments are added inside the code to understand the code in more detail.

Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.selection.DisableSelection
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpack_playground.ui.theme.Jetpack_playgroundTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Jetpack_playgroundTheme {
                // A surface container using the
                  // 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    // call the CustomSelectableText() function
                    // it is defined below
                    Column {
                        CustomSelectableText()
                    }
                }
            }
        }
    }
}

// create a composable function
// for the selectable text.
// Wrap the text inside SelectionContainer()
// in order to make it selectable
@Composable
fun CustomSelectableText() {
    SelectionContainer() {
        Column() {
            Text(
                text = "Welcome to Geeks for Geeks,A Computer Science portal for geeks." +
                        "It contains well written, well thought and well explained computer " +
                        "science and programming articles, quizzes and ...",
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .padding(start = 10.dp, top = 20.dp)
                    .fillMaxWidth()
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    Jetpack_playgroundTheme {
        CustomSelectableText()
    }
}

Output: