Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

TextView in Android using Jetpack Compose

  • Last Updated : 25 Feb, 2021

Jetpack Compose is a new toolkit provided by Google. This is useful for designing beautiful UI designs. Android TextView is a simple view in Android which is used to display text inside our App. In this article, we will take a look at the implementation of TextView in Android using Jetpack Compose. 

Attributes of TextView Widget

Attributes

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

Description

textto set the text which we have to display inside our TextView.
style to change the style of TextView in Android.
colorto change the color of TextView.
fontSizeto change the font size of our text. 
fontWeight to set the weight for our font ie. extra bold, dark, and many more
fontStyleto set font style to italic.
fontFamilyto change the font family of our text.
letterSpacingto set spacing in between letters of our TextView.  
backgroundto set background color for our TextView. 
shadowto add shadow for our TextView.  
textAlignto change the alignment of our TextView.
modifierthe modifier is used to add padding to our TextView. 

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: Adding TextView in 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




package com.example.edittext
  
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shadow
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
  
import com.example.edittext.ui.EditTextTheme
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            EditTextTheme {
                // A surface container using the
                // 'background' color from the theme
                Surface(
                        // to add background color for our screen.
                        color = MaterialTheme.colors.background,
                ) {
                    // here we are calling our Composable
                    // function inside setContent method.
                    TextView()
                }
            }
        }
    }
}
  
// below is the Composable function
// which we have created for our TextView.
@Composable
fun TextView() {
    Column(
            // we are using column to align
            // our textview to center of the screen.
            modifier = Modifier.fillMaxWidth().fillMaxHeight(),
  
            // below line is used for specifying
            // vertical arrangement.
            verticalArrangement = Arrangement.Center,
  
            // below line is used for specifying
            // horizontal arrangement.
            horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        // TextView widget.
        androidx.compose.foundation.Text(
  
                // below line is for displaying
                // text in our text view.
                text = "Geeks for Geeks",
  
                // below line is used to add
                // style to our text view.
                style = TextStyle(
                        // color is used to provide green
                        // color to our text view.
                        color = Color.Green,
  
                        // font size to change the
                        // size of our text view.
                        fontSize = TextUnit.Sp(30),
  
                        // font weight to bold such as light bold,
                        // extra bold to our text view.
                        fontWeight = FontWeight.Black,
  
                        // font style is i=use to change style
                        // of our text view to italic and normal.
                        fontStyle = FontStyle.Italic,
  
                        // font family is use to change
                        // our font family to cursive.
                        fontFamily = FontFamily.Cursive,
  
                        // letter spacing i use to
                        // provide between letters.
                        letterSpacing = TextUnit.Companion.Sp(2),
  
                        // background is use to specify background
                        // color to our text view.
                        background = Color.White,
  
                        // shadow to make our
                        // text view elevated.
                        shadow = Shadow(color = Color.Gray),
  
                        // textALign to align our text view
                        // to center position.
                        textAlign = TextAlign.Center,
                        ),
                // modifier is use to give
                // padding to our text view.
                modifier = Modifier.padding(all = Dp(20.0F))
        )
    }
}
  
// @Preview function is use to see preview
// for our composable function in preview section.
@Preview
@Composable
fun DefaultPreview() {
    MaterialTheme {
        // we are passing our composable
        // function to display its preview.
        TextView()
    }
}

Output: 

TextView in Android using Jetpack Compose Output




My Personal Notes arrow_drop_up
Recommended Articles
Page :