From the course: Android Development Essential Training: The User Interface with Kotlin

Load image resources at runtime - Android Tutorial

From the course: Android Development Essential Training: The User Interface with Kotlin

Start my 1-month free trial

Load image resources at runtime

“

- [Narrator] You can control which image is displayed at run time in a few different ways. When you store your images as resources, it takes just one line of code to change from one image to another. I'll go to text view, and I'm going to remove a couple of attributes here. I'll get rid of the margin bottom constraint bottom to bottom of and scale type attribute and then I'll come back up here to the layout height and change this back to wrap content. Then I'll look at this in design view, and now my image view size is adjusting automatically to whichever image I display. That will become important because I'm working with images of different aspect ratios, one that's tall, one that's square, and another one that's tall, and I want the image view to adjust automatically. Now I'll add a few buttons into this layout. It doesn't matter initially where I drop them, then I'll choose this first button, and I'll constrain it to the left side and to the bottom. I'll constrain this button to the right, I'll choose all three buttons and I'll align their top edges, and then I'll distribute them horizontally using a chain. Now in text mode, I'll set the IDs of these three buttons. This one will be button one, the second one is button two, and the third one is button three. I'll reset any constraints that are pointing to the first button to match the IDs. And now I'm ready to add event listeners for the three buttons. And I'll do that in my main activity class. In the on create function, I'll say button one dot set on click listener I'll replace the parentheses with braces for a lambda expression, and then within the braces I'll call a function called display image resource that doesn't exist yet. And I'll pass in the resource ID R.drawable.monster zero one. I'll use an intention action, and I'll create this function, display image resource and I'll change the argument name to R-E-S ID. After pressing enter or return a couple of times, Android Studio generates a comment and I'll get rid of that and I'm ready to implement the function. So going back to my content main.xml file I'll need to know the ID of the image view. Right now, it's image view four and I'm going to change that. I'll press shift F6 to refactor, and I'll call this monster image. Then I'll come back to main activity, and I'll call monster image. I'll start typing the ID, then I'll press enter or return and then I'll call set image resource. And I'll pass in that resource ID. So in Kotlin what's happening here is that when the user touches or clicks that button I'm reacting by calling a lambda expression. This is an anonymous object with a single function. It's receiving it, which represents the button that was clicked, but I don't care about that. All I want to do is load the appropriate resource. So now I'll run the application on my device. And when I touch the first button, I change the image that's displayed. I'll go back to my code, and I'll duplicate that call a couple of times and I'll add click listeners for button two and for button three and I'll change the images that are being displayed to monster two, and monster three. And I'll run the app again. And now, I can switch easily between any of the three images. I'm still using the same image view component but I'm just loading the images from the resources. There are other ways to store and load images but image resources are among the most flexible approaches you have. As I'll show later on in this course, when you store images as resources, you can provide alternative versions of the images for different screen sizes and pixel densities and when you load an image resource at run time, the performance is fantastic.

Contents