Jetpack Compose Ep:2 — The Scroll App

In this episode, I’ll discuss about a very similar functionality as Xml’s ScrollView. And with the conjunction, I’ll also be chattering about the below views and they are:

• Text & its attributes
• Column
• Row
• Spacer
• Divider
• TextStyle
• Max Lines
• Modifier
• TextOverflow
• Annotated String and some of the important parameters.

Note: I’ll begin by assuming that the readers know about creating the Jetpack Compose App from the scratch, MaterialTheme, Composable, Preview, etc functions. But if you don’t know, then you can just refer to my Ep1 of this series. The link is given below.

Jetpack Compose(Series 1 : Basics Ep1)— Just Text App

Let’s begin by creating a new Jetpack Compose App and name it as Scroll App, edit the package name with whatever you want, select a proper location to save your project where you can find it later with an ease and keep the other default changes as it is.

Note: This episode includes only the discussion on those features which are currently available in Jetpack Compose Version 0.1.0-dev08. In future development, there maybe deprecation of some attributes and functionalities or maybe an increase in the same. So do check the version while development.

Now, after the loading process ends, open up your module level build.gradle file and add this dependency as shown below:

implementation 'androidx.ui:ui-foundation:0.1.0-dev08'

Syn your project and move towards your MainActivity.kt file. Create a custom function named as TextLayout with some parameters into it, Also make that function composable by adding the annotation of top of it as shown below:

@Composable
fun TextLayout(
    mText: String,
    mTextStyle: TextStyle? = null,
    mMaxLines: Int? = null,
    mModifier: Modifier? = null,
    mTextOverflow: TextOverflow? = null
) {
    //Code here...
}

The parameters are explained as:

• mText — It is of string data type and is used to get a string format value which needs to be rendered.
• mTextStyle — It holds the style of text which needs to be given to the string value.
• mMaxLines — It is of type int and is used to provide limitations on the number of lines to be shown of the string.
• mModifier — Modifiers are used to provide specific modifications which needs to be done on the rendered data.
• mTextOverflow — It is used to check and provide a specified property whenever the text is overflowed.

Then, add the Text function into the TextLayout’s block.

Text(
    text = mText,
    style = mTextStyle ?: TextStyle.Default,
    maxLines = mMaxLines ?: Int.MAX_VALUE,
    modifier = mModifier ?: Modifier.padding(16.dp),
    overflow = mTextOverflow ?: TextOverflow.Clip
)

Then by moving ahead, create a custom function named LayoutContainer and add an annotation of Composable on top of it. Put a VerticalScoller inside it. Let the VerticalScroller carry a function called Column something like this:

@Composable
fun LayoutContainer() {
    VerticalScroller {
        Column {
            //Code here...
        }
    }
}

VerticalScroller()

It is a container that composes all of its contents and lays it out, fitting the width of the child. If the contents don’t fit the height, the drag gesture allows scrolling its content vertically. The contents of the VerticalScroller are clipped to the VerticalScroller’s bounds.

Column()

A column is a small component which can be as small as possible to fit its children's one on top of the other.

Then call the TextLayout function and pass a single string parameter in it as shown below:

TextLayout(mText = "Simple Text")

As there are many parameters in that function, but they will get avoided as they are set to accept null if no value is being provided. The above text will print a simple text message as “Scroll App”.

Calling the same function again an passing the parameter to make the text bigger in terms of size as shown below:

TextLayout(
    mText = "Text with bigger font size",
    mTextStyle = TextStyle(
        fontSize = 24.sp
    )
)

The 1st parameter is a string which will get rendered to make the style provided visible through it. This text will get a size of 24 or you can change it to your accordance.

The below code changes the color of text by passing a color attribute to the parameter.

TextLayout(
    mText = "Text with Red color",
    mTextStyle = TextStyle(
        color = Color.Red
    )
)

Then this code is used to make the font style of the text bold by passing an attribute of fontWeight as shown below:

TextLayout(
    mText = "Text in bold",
    mTextStyle = TextStyle(
        fontWeight = FontWeight.Bold
    )
)

Next, this code is used to make the text cursive by applying the fontFamily attribute to it as shown below:

TextLayout(
    mText = "Text in a cursive font family",
    mTextStyle = TextStyle(
        fontFamily = FontFamily.Cursive
    )
)

The below code modifies the string by applying the

• fontStyle = It is use to provide a particular style to the textual data.
• maxLines — It can limit the number of lines should be visible out of the total lines of the string.
• modifier — It has been used make modifications intro string by means of providing padding.

TextLayout(
    mText = "Text with Italic font style, restricted as maximum lines as one. " +
            "Also Providing the padding of 24 density pixels to start, top and end od it. " +
            "And the end, text will get overflowed and end with an ellipsis of 3 dots.",
    mTextStyle = TextStyle(
        fontStyle = FontStyle.Italic
    ),
    mMaxLines = 2,
    mModifier = Modifier.padding(start = 24.dp, top = 24.dp, end = 24.dp),
    mTextOverflow = TextOverflow.Ellipsis
)

Now adding a spacer in by adding all these code as shown below:

Spacer(modifier = Modifier.padding(top = 8.dp))

Padding is provided to make a marginal distance on top from the other components.

Spacer()

It is a component which represents an empty space layout, whose size can be defined using the LayoutWidth, LayoutHeight and LayoutSize modifiers.

Then adding an horizontal line to divide the code from the rest of part as shown below:

Divider(color = Color.LightGray)

We can set a particular color to the divider accordingly by using the color parameter.

Divider()

A divider is a thin line that groups content in lists and layouts.

Furthermore, we created an variable containing the annotated string to make changes by applying color to some of the parts of the string. And then passing the annotated variable to the text followed by another divider.

val mAnnotatedString = AnnotatedString {
    append("The text has multi color property.")
    addStyle(
        style = SpanStyle(
            color = Color.LightGray
        ),
        start = 4,
        end = 8
    )
    addStyle(
        style = SpanStyle(
            color = Color.Blue
        ),
        start = 12,
        end = 17
    )
}
Text(text = mAnnotatedString, modifier = Modifier.padding(16.dp))

Divider(color = Color.DarkGray)

Then to make the two different texts render on a same line we use row by providing a modifier to adjust both of them at once. The style contains some attributes which shows a variable difference between both of them and they are:

• textDecoration — The decorations to paint on the text.
• background — The background color for the text.
• textAlign — The alignment of the text within the lines of the paragraph.
• letterSpacing — The amount of space (in em) to add between each letter.

Row(modifier = Modifier.fillMaxWidth()) {
    TextLayout(
        mText = "Text with an underline",
        mTextStyle = TextStyle(
            textDecoration = TextDecoration.Underline,
            background = Color.Cyan
        )
    )

    TextLayout(
        mText = "Text with letter spacing",
        mTextStyle = TextStyle(
            textAlign = TextAlign.Center,
            color = Color.Green,
            letterSpacing = TextUnit.Companion.Em(2)
        )
    )
}

And at the end of making all the custom function working, add a MaterialTheme() function inside the setContent() function and the call the composable LayoutContainer() function in it as shown below:

setContent {
    MaterialTheme {
        LayoutContainer()
    }
}

And that’s a wrap. Run the code and check the output.

Note: For the source code of this project, you can visit my GitHub account and you will find a bunch of little projects. But, whoever wants to refer only this project then search for the same named package in my repository. The link is given below:

Akshay-Sawant/Compose-Studio

Do contribute if you think there is a need for any betterment or issue into the code and do provide a response below in the comment section, as I would like to improve myself further. Thank you in advance. Happy coding!