Skip to main content
Source Project

Jetpack Compose for Android Development

By 2021.05.23.május 27th, 2021No Comments

What will this article be about?!

Something new that I started learning a few days ago. If you know my work, you know I prefer to work in the front-end field. I first design the element and then create it in XML. (So it has been so far). But Jetpack Compose is something different, something very different that takes a lot of time to learn because it’s completely XML-free in design.

I admit such big changes scare me because I think about how long it will take to learn this. But if I learn regularly, I will succeed more and more, so I will get to the level of designing custom elements like I used to in XML.

You will need a newer version of Android Studio. You can download it from here. I am not making a video and tutorial on how to install it because a lot of videos are available on YouTube. I am going to create these code snippets in a new project, so follow this article if you don’t want to miss out on updates and novelties. Or sign up for my newsletter to be the first to know about the news.

Subscribe to know first

I will notify you by email when new content is added to the site.

The first step

is to create a new project by selecting “Empty Compose Activity”. I also attached a photo of you so you can do this. 👇

The second step

is to add the following implementations. You can add this to the “build.gradle” file.

implementation "androidx.compose.foundation:foundation:$compose_version"
implementation "androidx.compose.runtime:runtime-livedata:$compose_version"
implementation "androidx.compose.runtime:runtime-rxjava2:$compose_version"
implementation "androidx.compose.material:material-icons-core:$compose_version"
implementation "androidx.compose.material:material-icons-extended:$compose_version"

Values/icons

Additional values, such as sizes, colors, texts, or icons, can be found in the “dimens.xml”, “colors.xml”, “string.xml”, and “drawable” file/ folder. (I did not paste this here, but the full code will be available at the end of the article from where you can access it.) I always organize the elements in a separate folder so that I can easily modify them later and it be transparent when working on larger projects. So I created a folder called “uigitdev” in which I will store these elements.

Information about element

I changed the background color of the button and I rounded the corners to a value that suits me. The layout is simple. I placed a vector icon on the left, the color and size of which I changed. The text of the button is visible in the middle, this text can be up to one line, in case the text is too long, three dots will be visible at the end of the text. On the right side of the button there will be a progress element, the color and size of which I also changed.

I am also learning this process and trying to move in small steps. Get to know the layouts and elements. Programming is an endless learning, so I am in no hurry to make a big one for the first time.

I have created three methods that include: Icon, Text, Progress. Then, in the fourth method, I compiled these elements. I set the weight of the text so that if the text were too long, progress would not slip out of the right side of the element.

package com.uigitdev.jetpackcompose.uigitdev

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.uigitdev.jetpackcompose.R

@Composable
fun icon(icon: Int){
    Column {
        Icon(
            painter = painterResource(id = icon),
            contentDescription = null,
            modifier = Modifier
                .align(Alignment.Start)
                .size(dimensionResource(id = R.dimen.button_icon_size)),
            tint = colorResource(id = R.color.white)
        )
    }
}

@Composable
fun text(title: Int){
    Text(
        modifier = Modifier
            .padding(
                start = dimensionResource(id = R.dimen.padding),
                end = dimensionResource(id = R.dimen.padding)),
        text = stringResource(id = title),
        style = TextStyle(
            color = colorResource(id = R.color.white),
            fontWeight = FontWeight.Bold,
            fontSize = 17.sp
        ),
        maxLines = 1,
        overflow = TextOverflow.Ellipsis
    )
}

@Composable
fun progress(){
    Column {
        CircularProgressIndicator(
            modifier = Modifier
                .align(Alignment.End)
                .size(dimensionResource(id = R.dimen.button_progress_size)),
            color = colorResource(id = R.color.white),
            strokeWidth = dimensionResource(id = R.dimen.button_progress_border_size)
        )
    }
}

@Preview
@Composable
fun ProgressButton(){
    Button(
        onClick = { /*TODO*/ },
        colors = ButtonDefaults.buttonColors(backgroundColor = colorResource(id = R.color.button_color)),
        modifier = Modifier
            .fillMaxWidth()
            .height(dimensionResource(id = R.dimen.button_height)),
        shape = RoundedCornerShape(dimensionResource(id = R.dimen.button_radius))
    ){
        Row(verticalAlignment = Alignment.CenterVertically) {

            //Icon
            icon(icon = R.drawable.ic_baseline_shopping_cart_24)

            //Text
            Column(modifier = Modifier.weight(1f), horizontalAlignment = Alignment.CenterHorizontally) {
                text(title = R.string.button_title)
            }

            //Progress
            progress()
        }
    }
}

The next is the last step

to display the item on my main screen. I placed padding values on the left and right sides of my main view, adjusted the background color, and extended it to the maximum width and height.

package com.uigitdev.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.dimensionResource
import com.uigitdev.jetpackcompose.uigitdev.ProgressButton

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = colorResource(id = R.color.white)),
                verticalArrangement = Arrangement.Center
            ) {
                Column(modifier = Modifier.padding(
                    start = dimensionResource(id = R.dimen.padding),
                    end = dimensionResource(id = R.dimen.padding)
                )) {
                    ProgressButton()
                }
            }
        }
    }
}

The next element will be available soon.

Sign up to be the first to know.

Summary

In summary, I like this new thing. I also started learning because it seems useful. Based on my previous works, this is a completely different structure, so it will be a little harder to switch, but with a lot of practice, I will soon catch up myself and I am going to make new beautiful elements.

Project Download

At the following link you can download the whole project for free, in case you want to support my further works, you can also do it.

Download

Instagram

If you liked this post, follow me on Instagram.

Follow

Leave a Reply