Circular Shape Image in Jetpack Compose | Android Studio Tutorial

hi hello there and uh welcome back to my new videos so in this video i am going to show you how to create a circular image using a jetpack compose now this is how our circular image will look like at the end so uh adding a different shapes to your image has never been easier with jetpack compose you will be able to achieve this with only a few lines of code so let's get started now let me here create a new costing file first with the name of our main screen let's also create here a new composable function with the same name and also we can create a preview function as well so main screen preview let's call here our main screen all right now in our main screen we are going to just call a image composable function then for the painter i'm going to choose the one image which i have already added to my resources directory so r.drawable.image and for the content description we can just write for example a circular image now let's put those arguments on a separate lines okay perfect we can also open up this preview so we can preview our image from our main screen okay so this is how our image looks like so far so it has a rectangular shape of course because that's its default value and now let me show you how you can change its shape so the only thing that you need to do you need to add here a modifier on your image so android x compose a ui we can also set the size of this image to be for example 300 dp in this example and after that we just need to call a clip function and there we need to specify our circle shape so now let's try and refresh this preview now we have received a circular shape for our image and it looks very nice also we can just call this a main screen from our main activity so just call this main screen composable function so we can run that in our android emulator and we can also add here a box to fill the whole uh screen size so just add a modifier a fill max size and inside just a call main screen okay so there you go this is how now our main screen will look like if you want to center this on the screen just add here a content alignment run that again and there you go so now we have successfully changed the shape of our image and of course you don't need to use a circular shape if you don't want to you can also use something like a rounded corner shape and for the size you can for example add the 50dp now let's run this on our emulator once again so we can check it out so now we are going to get some different shape okay and if you're wondering how to add a border on this image well worry no more because it's very easy you just need to specify one more modifier called the border then for the width we can specify maybe uh 10db let's say then for the caller we can add the caller.cn maybe and now let's run this app on our android emulator once again so we can check that out so now uh you are not going to receive here an expected result so our image has this corner radius of 50dp on each and every side but this border is actually drawn in the rectangular shape and the reason why is because this border function accepts the third parameter which is a shape and its default value is a rectangular shape so what we need to do here we need to also specify a shape here in our case a rounded corner shape the same as before let me just move those arguments on a separate lines okay now let's add here 50dp again so the same shape as in our clip function right here let's run this app once again on our emulator so now everything should look perfect okay so there you go and of course you can specify a different shapes here as well now let's try and use a circular shape on on both of those functions so here as well let's run our wrap once again and there you go so that's how you can create a circular shape image with a jetpack compose it's a very simple and you need only two lines of code so thank you for watching i hope you enjoyed comment down below if you want to see more interesting videos about a jetpack compose in general like this video if you find it helpful of course and see the next one [Music] [Applause] [Music]

Channel: Stevdza-San

Views: 8,140

Keywords: circle, circular, image, shape, rectangle, change, switch, modify, rounded, corner, corners, radius, rounded corner shape, circular shape, android, kotlin, studio, android studio, how to, guide, tutorial, draw, clip, color, border, add, insert, size

Id: nhea4gisvsM

Length: 4min 39sec (279 seconds)

Published: Wed Nov 24 2021