Jetpack Compose – Text and Button
Antonio B.
2020-03-22
4min
Development
In this blog post, we are going to explore two of the most used widgets in the Android world, Text, and Button. Stay tuned, it gets interesting!
Share this blog:
Jetpack Compose – Text and Button
In the previous blog post, I have shown you what Jetpack Compose is, how to use it and what are the benefits of using Jetpack Compose. I advise you to read it first and then come back here. In this blog post, we are going to explore two of the most used widgets in the Android world, Text, and Button. Both of them offer us more options than what was the case with the old TextView and Button that we used in XML layout files.
Text
Let’s start with Text, probably one of the elements that you are going to use most of the time. If you open the Text.kt file you can find all the attributes that are available to use to modify text.
@Composable
fun Text( text: String, modifier: Modifier = Modifier.None, style: TextStyle? = null, paragraphStyle: ParagraphStyle? = null, softWrap: Boolean = DefaultSoftWrap, overflow: TextOverflow = DefaultOverflow, maxLines: Int? = DefaultMaxLines, selectionColor: Color = DefaultSelectionColor
)Keep in mind that you should always use androidx.ui packages in order to import proper Compose elements.
text - used to provide text value
modifier - modifiers are used to modify certain aspects of how the element is displayed on the screen. I won’t explain this any further as it would require a separate blog post
style - we use TextStyle class reference in order to change text styling configuration for Text and Button elements. When you open TextStyle.kt you can see that there is a bunch of properties that we can use
color – defines the text color
fontSize - defines the size of a text
fontSizeScale – the scale factor of the font size. If the font size is specified it will be multiplied by fontSizeScale value
fontWeight – previously using TextView the only way to make text thinner or thicker was to set textStyle to Bold or leaving it as default value. Now we can choose between different font weights. You can choose any number from the specified values below
/** Thin, the minimum thickness */ val W100 = FontWeight(100) /** Extra-light */ val W200 = FontWeight(200) /** Light */ val W300 = FontWeight(300) /** Normal / regular / plain */ val W400 = FontWeight(400) /** Medium */ val W500 = FontWeight(500) /** Semi-bold */ val W600 = FontWeight(600) /** Bold */ val W700 = FontWeight(700) /** Extra-bold */ val W800 = FontWeight(800) /** Black, maximum thickness */ val W900 = FontWeight(900) /** The default font weight. */ val Normal = W400 /** A commonly used font weight that is heavier than normal. */ val Bold = W700fontStyle – used to set font typeface. Choose between Normal or Italic
fontSynthesis – used to ‘fake’ bold or italic font style if used font family does not support it. We can set fontSynthesis to one of the following values:
None – font synthesis is turned off and default style will be used
Weight – only bold fonts are synthesized and italic are not
Style – only italic fonts are synthesized and bold are not
All – both italic and bold fonts are synthesized
fontFamily defines a font family that can be set by using one of the predefined values or by providing a custom font
fontFeatureSettings – allows us to apply advanced typographic font features to OpenType fonts
letterSpacing – defines the spacing between each letter
baselineShift – shifts text up or down from its baseline depending on the specified value
textGeometricTransform - applies geometric transformation to the text. There are two properties available:
ScaleX – scales text horizontally
SkewX – shears text horizontally
localeList – used to select the locale-specific text
background – sets the text background color
decoration – gives an option to draw horizontal line on the text. Parameters given to use are:
None - does not draw anything
Underline - draws a line under the text
LineTrough - draws a line that goes through the center of the text
Combine - used to combine multiple text decorations
shadow – used to display shadow on the text by specifying color, offset and radius values
paragraphStyle - same as with the Style class we have to use ParagraphStyle class reference in order to specify its properties
textAlign – used to align text horizontally by using Left, Right, Center, Justify, Start and End values
textDirectionAlgorithm – used to determine text direction. There are four values that we have been given to use:
ContentOrLtr - text direction depends on the first strong directional character in the text according to the Unicode Bidirectional Algorithm
ContentOrRtl - text direction depends on the first strong directional character in the text according to the Unicode Bidirectional Algorithm
ForceLtr - forces text direction to be left to right
ForceRtl – forces text direction to be right to left
lineHeight – defines the line height for the text
textIndent – defines a text indent of the first line and the rest lines
softWrap - defines whether the text should be broken at the soft line breaks or not. Default value is set to true
softwrap = false
softwrap = true
overflow - defines the way to display overflown text. There are three possible choices clip, fade and ellipsis
Clip
Fade
Ellipsis
maxLines - declares a maximum number of lines that text can take
selectionColor - defines text color when text is selected
Button
Same as we did while we were exploring a Text element, we are going to open Button.kt class and dive deeper into its implementation. Compared to TextView, Button element contains only three values that we are able to provide.
fun Button( text: String, onClick: (() -> Unit)? = null, style: ButtonStyle = ContainedButtonStyle()
)text - used to provide text value
onClick -– the main purpose of the button element is to listen to a click event. In order to achieve that we use onClick to simply pass desired actions that tell our button what to do after being triggered
style - in order to give Button element some fresh look we have to use ButtonStyle class. To be able to call ButtonStyle class we have to provide at least color and shape parameter. However, ButtonStyle class should be used only if you need complete control over styling your button. For simpler implementations we use ContainedButtonStyle, TextButtonStyle and OutlinedButtonStyle functions that are returning an instance of the ButtonStyle class. Each one of them is responsible to create a button with a specific style
OutlinedButtonStyle - defines button style that is a primary focused on the borders
ContainedButtonStyle - defines button style that is more focused on the fill. Also, this is a default button style if you do not provide any
TextButtonStyle - a button that does not have a border or fill color. Basically, that is just a text that acts as a button
In the end, let’s take a quick look at the ButtonStyle class parameters:
color – defines the background color of the button
shape – defines the shape and shadow of the button
border – draws borders around the button
elevation – makes the button look like elevating by specifying the size of the shadow below button
paddings – define paddings of the button
textStyle – uses the same reference that we used to style Text element
rippleColor – defines the color of the ripple effect when the button is pressed
What’s next?
We have come to the end of exploring Text and Button elements in Jetpack Compose and as you may have noticed, there are plenty of useful parameters that are given us to use. Going through and exploring JetpackCompose elements is quite easy so I encourage you to explore the rest of them until the next blog post where I will be writing about some more complex stuff in Jetpack Compose.
Share this blog:
Subscribe to our newsletter
We send bi-weekly blogs on design, technology and business topics.
