ADDING

I MAG ES TO
APP
By Luyima Alex Cedric
[email protected]
Download image to Resource
Manager

• Download the "androidparty.png" image

from the link provided on the e-learning
platform.
• Take note of where you have saved the
image.
• In Android Studio, click View > Tool
Windows > Resource Manager
Download image to Resource
Manager ...

Click + (Add resources to the module) > Import

Drawables.
Android Studio shows you a preview of the
image. Select Density from the QUALIFIER
TYPE drop-down list.
Select No Density from the VALUE list.
The drawable-nodpi folder stops the resizing
behavior of images
 Download image to Resource
Manager ...

• Click Next and then you will be shown the folder

structure in which the image will be placed.
• Take note of the drawable-nodpi folder.
• Click Import(C).
• The drawable-nodpi folder stops the resizing
behavior of images
• Switch back to the project view, click View > Tool
Windows > Project
• Click app > res > drawable to confirm that the
image is in the drawable folder.
Add a composable function to add an image
• In the MainActivity.kt file, add a
GreetingImage() composable function after
the GreetingText() function.
• Pass the GreetingImage() function two String
parameters: one called message for the
birthday greeting and the other called from
Import:
for your signature.
• In the GreetingImage() function, declare a val
property and name it image.
• Make a call to painterResource() function by
passing in the androidparty resource. Assign
the returned value to the image variable.
Accessing resources
• Jetpack Compose can access the resources
defined in your Android project.
• Resources can be accessed with resource
IDs that are generated in your project's R
class.
• An R class is an automatically generated
class by Android that contains the IDs of all
resources in the project.
• In most cases, the resource ID is the same as
the filename.
Add a composable function to add an image ...
• To fix this warning, add the following
import at the top of your MainActivity.kt
file:
• import
androidx.compose.foundation.Image
• In the Image composable, add another
named argument called contentDescription
and set its value to null.
• The image's contentDescription argument
is set to null so that TalkBack skips the
Image composable.
Preview the Image composable
• In the BirthdayCardPreview() function,
replace the GreetingText() function call with
a GreetingImage() function call.
• In the BirthdayCardPreview() function,
replace the GreetingText() function call with
a GreetingImage() function call.
Preview the Image composable

• The Design pane should auto update, if it

does not, click Refresh button to build.
• Please note that you cannot see the text
anymore because the new function only has
an Image composable, but not a Text
composable.
 Add Box layout

• Box layout is one of the standard layout elements

in Compose.
• Use Box layout to stack elements on top of one
another.
• Box layout also lets you configure the specific
alignment of the elements that it contains.
Add Box Layout ...
• In the GreetingImage() function, add a Box
composable around the Image composable
as shown:
• Import the
androidx.compose.foundation.layout.Box
function when prompted by Android
Studio.
• Add code to pass the modifier parameter to
the Box composable.
 At the end of the Box composable, call the
GreetingText() function, and pass it the birthday
message, signature, and the modifier as shown:
Notice the updated preview in the Design
pane.
 Scale Content

Then:

• Add a ContentScale named argument to the

image.
• ContentScale.Crop parameter scales the image
uniformly maintaining the aspect ratio.
Change opacity
• To improve the app's contrast, change the
opacity of the background image.
• Add alpha parameter to the Image
composable and set it to 0.5F.
 Good Coding Practices:
Extract String Resource
A hardcoded string is one that is written
directly in the code of your app.
Hardcoded strings make it more difficult to
translate your app into other languages and
harder to reuse strings in different places in
your app.
You can extract strings into a resource file to
resolve these issues.
 onCreate
Extract String Resource
• In the MainActivity.kt file, scroll to the
onCreate() function. Select the birthday
greeting, Happy Birthday Alex! string without
quotes.
• Click the bulb on the left side of the screen.
• Select Extract string resource.
• In the Extract Resource dialog, change the
Strings.xml Resource name to happy_birthday_text.
• In the Project pane, open the strings.xml file
from the path app > res > values >
strings.xml and notice that Android Studio
created a string resource called
happy_birthday_text.
Extract String Resource
• Follow the same steps to extract the text for
the signature Text composable, but this time
enter from_text in the Resource name field.
• Update the BirthdayCardPreview() to use
stringResource() and the extracted strings.
• If needed, add import
androidx.compose.ui.res.stringResource to
the imports section.
 Try this Simple
Challenge

Arrange or align the signature text

composable so that it is aligned to
the center of the screen.
Conclusion
• The Resource Manager tab in Android Studio
helps you add and organize your images and
other resources.
• An Image composable is a UI element that
displays images in your app.
• An Image composable should have a content
description to make your app more accessible.
• Text that is shown to the user, such as the
birthday greeting, should be extracted into a
string resource to make it easier to translate
your app into other languages.