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 Beginner for Beginner,A Computer Science portal for Beginner." + "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: