Adding images to your Android application can be problematic. If you consider the different platforms that your app may be running on you can probably start to understand those problems. An Android device can have a default resolution of 320 x 200 all the way up to 1280 x 720! So how do we account for the different screen sizes? This is something that we could spend many many lessons on and so rather than do that, I’m going to let you experiment with that yourself in your own time…in this tutorial I will simply make a generic application that should run on devices with lowish resolutions reasonably well and will scale up fairly well also.
In order to do this I need you to open the folder where your project is located and navigate your way to the res folder. Once there you will see three “drawable” folders. Each of these is designed to accomodate the major screen densities of Android devices, you need to do the following:
- Create a new folder called “drawable“
- Copy the “ic_launcher.png” file from “drawable-hdpi” into your new “drawable” folder
- Delete the “drawable-hdpi“, ”drawable-mdpi” and ”drawable-ldpi” folders
We’re basically telling our Android app to just use the same images for this project regardless of how pixel-dense the screen is. So now if you go back into eclipse and right-click on the root folder of your project (it’s probably called “BlackJackApp“) you should have the option to refresh and you’ll now see only the “drawable” folder instead of the three density-specific ones.
So now you’ll need pictures of cards to use, download these ones (with thanks to these guys) and put them into your new “drawable” folder.
And now we’re ready to create the layout that will contain our images. Replace the comment place holder we created that says this…
<!-- ... dealer layout goes here ... -->
…with this…
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_vertical"
android:layout_marginRight = "5sp"
android:text = "@string/dealer"
android:textColor = "#000000"
android:textStyle = "bold" />
<ImageView android:id = "@+id/d_card1_img"
android:src = "@drawable/back"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
<ImageView android:id = "@+id/d_card2_img"
android:src = "@drawable/aceheart"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
<ImageView android:id = "@+id/d_card3_img"
android:src = "@drawable/blank"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
<ImageView android:id = "@+id/d_card4_img"
android:src = "@drawable/kingclub"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
<ImageView android:id = "@+id/d_card5_img"
android:src = "@drawable/queendiamond"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
You may have noticed we have a couple of new strings to define, namely:
- dealer: “Dealer:“
- playing_card: “Card in hand“
And while some of the attributes in these elements may be new, you shouldn’t find them too confusing, if you do just ask questions below.
Once the dealer is complete, we can add the layout for the player, i.e:
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_vertical"
android:layout_marginRight = "5sp"
android:text = "@string/player"
android:textColor = "#000000"
android:textStyle = "bold" />
<ImageView android:id = "@+id/p_card1_img"
android:src = "@drawable/back"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
<ImageView android:id = "@+id/p_card2_img"
android:src = "@drawable/aceheart"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
<ImageView android:id = "@+id/p_card3_img"
android:src = "@drawable/blank"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
<ImageView android:id = "@+id/p_card4_img"
android:src = "@drawable/kingclub"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
<ImageView android:id = "@+id/p_card5_img"
android:src = "@drawable/queendiamond"
android:contentDescription = "@string/playing_card"
android:layout_width = "75px"
android:layout_height = "107px"
android:layout_marginRight = "5sp" />
And so when you’ve added the string for the player…our UI is complete!, it should look something like this:
The sizing of everything on your app might look different in your version but that’s not too important, just make sure all the components are there, nothing is missing and everything fits on the screen in a reasonable manner. If that’s not the case then feel free to ask questions below, if you’re satisfied that your GUI is looking right and that you’re able to proceed then let’s move to the next lesson.