Jetpack Compose Basics

In this blog (by Suraj Maity), we will learn how to work with Jetpack compose to make the layout more easily. Using a few simple basic features, we will make the design more attractive. In Android, XML takes more code to make a layout and is a little hard compared to Jetpack compose. If you know XML, then it is okay to switch to Jetpack. But if you don't know then also no problem, we will learn from the beginning.

1. Create a simple Greeting using Jetpack Compose

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Suraj")
        }
    }
}

@Composable
fun Greeting(name: String){
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview(){
    Jetpack1Theme {
        Greeting(name = "Android")        
    }
}

2. Create a simple Greeting using Jetpack Compose without Jetpack1Theme

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Suraj")
        }
    }
}

@Composable
fun Greeting(name: String){
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview(){
    Greeting(name = "Android")
}

3. Display Two text in Layout using Jetpack Compose.

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(text = "Hello")
            Text(text = "World")
        }
    }
}

Note: it is overlapping so we need to implement row and col-specific features.

4. Display text Column wise.

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
                Text(text = "Hello")
                Text(text = "World")
            }
        }
    }
}

Note:

For Row, we use horizontalArrangement and verticalAlignment 

Just like blow code:

            Row(
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            )

and for the Column, we use horizontalAlignment and verticalArrangement 

            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) 

5. Display text Row wise.

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row {
                Text(text = "Hello")
                Text(text = "World")
            }
        }
    }
}

6. How to align texts center horizontally with its wrap content?

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Hello")
                Text(text = "World")
            }
        }
    }
}

You have noticed that it didn't change its position but look carefully 

Without horizontalAlignment = Alignment.CenterHorizontally in Column Modifier

With horizontalAlignment = Alignment.CenterHorizontally in Column Modifier

See the gap

Okey, If you don't understand let's give background color

7. How to give background colour of text using Modifier?

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier.background(Color.Yellow),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Hello")
                Text(text = "World")
            }
        }
    }
}

8. How to fill color using fillMaxSize()?

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Cyan),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Hello")
                Text(text = "World")
            }
        }
    }
}

9. How to use horizontalAlignment and verticalArrangement?

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Cyan),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = "Hello")
                Text(text = "World")
            }
        }
    }
}

10. How to give spaces equally between every text in Jetpack Compose?

code;

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Cyan),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.SpaceBetween
            ) {
                Text(text = "Hello")
                Text(text = "Nice")
                Text(text = "World")
            }
        }
    }
}

11. Different spaces style using Jetpack:

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Cyan),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.SpaceEvenly
            ) {
                Text(text = "Hello")
                Text(text = "Nice")
                Text(text = "World")
            }
        }
    }
}

Use of SpaceAround:

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Cyan),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.SpaceAround
            ) {
                Text(text = "Hello")
                Text(text = "Nice")
                Text(text = "World")
            }
        }
    }
}

12. How to use row in Jetpack compose

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Cyan),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(text = "Hello")
                Text(text = "Nice")
                Text(text = "World")
            }
        }
    }
}

13. Use of with  SpaceAround Row

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Cyan),
                horizontalArrangement = Arrangement.SpaceAround,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(text = "Hello")
                Text(text = "Nice")
                Text(text = "World")
            }
        }
    }
}

14. How to fill 50% width and 50% height?

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(
                modifier = Modifier
                    .fillMaxSize(0.5f)
                    .background(Color.Cyan),
                horizontalArrangement = Arrangement.SpaceAround,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(text = "Hello")
                Text(text = "Nice")
                Text(text = "World")
            }
        }
    }
}

15. How to give width and height specifically?
code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(
                modifier = Modifier
                    .width(280.dp)
                    .height(300.dp)
                    .background(Color.Cyan),
                horizontalArrangement = Arrangement.SpaceAround,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(text = "Hello")
                Text(text = "Nice")
                Text(text = "World")
            }
        }
    }
}

16. How to fill width in dp and height in percentage?

code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(
                modifier = Modifier
                    .width(280.dp)
                    .fillMaxHeight(0.8f)
                    .background(Color.Cyan),
                horizontalArrangement = Arrangement.SpaceAround,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(text = "Hello")
                Text(text = "Nice")
                Text(text = "World")
            }
        }
    }
}

Similar Example:

code:

setContent {
    Row(modifier = Modifier
        .fillMaxSize(0.5f)
        .background(Color.Green),
        horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment =  Alignment.CenterVertically
    ) {
        Text("1")
        Text("2")
        Text("3")
        Text("4")
    }
}

code:

setContent {
    Row(modifier = Modifier
        .width(250.dp)
        .fillMaxHeight(0.8f)
        .background(Color.Green),
        horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment =  Alignment.CenterVertically
    ) {
        Text("1")
        Text("2")
        Text("3")
        Text("4")
    }
}