Jetpack Compose Basics Part 2

Mohit Dholakia

3 min readOct 18, 2021

Hello Folks,

I Hope, you have seen Part-1 of this article.

Jetpack Compose Basics Part 1

Hello Devs,

medium.com

Let’s check a few other components which are listed below

BasicTextField
Column
Row
Card
Button
TextButton
OutlinedButton

1. BasicTextField

var textValue by remember 
{ 
   mutableStateOf(TextFieldValue("Enter your text here"))
}BasicTextField(
    value = textValue,
    
    modifier = Modifier
        .padding(16.dp)
        .fillMaxWidth(),
   
    textStyle = TextStyle(
        color = Color.Blue,
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold,
        textDecoration = TextDecoration.Underline
    ),
    onValueChange = {
        textValue = it
    }
)

Here textValue is of mutable state so every time changed value will be assigned to it.

Text Style can also be applied to it so we can modify it accordingly

2. Column

Column(
    modifier = Modifier.scrollable(
        state = scrollState,
        orientation = Orientation.Vertical
    )
) {
    for (index in 0..5) {
      // Setup your Component
    }
}

The Column can be used when we want to align child views vertically. Here we can use an array of elements

3. Row

Row(modifier = Modifier.fillParentMaxWidth()
){
    for (index in 0..5) {
     // Setup your Component
    }
}

The Row can be used when we want to align child views horizontally.

4. Card

Card(
        shape = RoundedCornerShape(4.dp),
        backgroundColor = colors[index % colors.size],
        modifier = Modifier
            .fillParentMaxWidth()
            .padding(16.dp)
    ) {
        
    }
}

The Card will work the same as CardView in Android. Here we can also apply Modifier Property.

5. Button

Button(
    onClick = { 
               // perform your onClick
              },
    modifier = Modifier.padding(16.dp),
    shape = RoundedCornerShape(16.dp),
    elevation = ButtonDefaults.elevation(5.dp),
) {
    
    Text(text = "Button with rounded corners", 
         modifier = Modifier.padding(16.dp
    ))
}

6. TextButton

TextButton(
    onClick = { 
               // perform your onClick
              },
    modifier = Modifier.padding(16.dp)
) {
    Text(text = "Text Button", modifier = Modifier.padding(16.dp))
}

7. OutlinedButton

OutlinedButton(
    onClick = { 
               // perform your onClick
              },
    modifier = Modifier.padding(16.dp)
) {
    Text(text = "Outlined Button", 
         modifier = Modifier.padding(16.dp))
}