This Page How To Add, 'Image to Android Activity View'
Prev Page How To 'Change Background Color, Screen Orientation, Buttons'
How To Add 'Horizontal Scroll View', to Android App
We are using AIDE, to create these tutorial apps on our 8.9" tablet with android version 4.2.2; using the Java XML programming language.
We are using the AIDE coding editor to code our pages; and then to Create - RUN our apps. AIDE is a SDK coding environment for android devices like a tablet or smartphone.
AIDE has a free and paid version. The paid version is required if you want to create Java/xml template apps; and add a 'keystore' to your App. With a keystore, you can publish it to the market places like
Google and Amazon.
Once you create your apps code pages, you need to RUN the app to build your apk package; then you INSTALL it on your tablet or smartphone.
can also create; RUN your apps using the code in these tutorials, with Android Studio. Android Studio is for desktop computers. Choose Java XML as the programming language.
Android Studio is free to install and use; and has helpful guides.
Complete Example Codes are available for each of our tutorials. With these example codes you can make a functioning android app in
either AIDE or Android Studio.
If you are just arriving at this page; you can
gohere to first - Create your simple Android app
Once you create your App you can follow along with each tutorial.
If you just want to get the code from this tutorial for your own app your creating:
You will need to edit the layout file of your app project, and add an image to your res/drawable file.
GoTo our Example Code Section on this page, and simply copy the code you want into your app's layout file, typically - default name is main.xml. For this app (tutorials), the layout file is main.xml located at:
Any images in our tutorials can be downloaded from the Example Code section also.
If you are following along and coding with our tutorials - This is what Your TUTORIALS App should now look like:
Once we edit our App and add this image:
the App will look like this;
This is the first Activity(page) of our App;(also known as a View) and all Code elements are placed in the View;
There are many View elements you can add to your Android app.
Common view elements are: a TextView,
which we added in our previous tutorials.
In this tutorial: we are adding a ImageView element.
Adding an image to our activity view with the Imageview element.
As with previous tutorials, we reference Android Developer website for code classes we
are using, and also, you can view all the code class properties/attributes for a specified element.
For this tutorial:
...Imageview properties and attributes
....ScaleType for Imageview element
To add an image to your app's view you use the ImageView element.
We will edit the layout file of our App named - Tutorials located at
To add the image we will add the ImageView element with code to the main.xml file, and add the image to our res/drawable-hdpi folder:
Add text to the view; add a string to strings.xml
How To Code
To add the image to our app's activity view,
we use Imageview ,
element, and this is placed in our layout file
View code in this image.
To add the actual image to our app, we must add it to our resources folder for images, which is at:
res/drawable-hdpi. We need to place our image into this folder, then simply reference it from our
Imageview element that we code into our layout file as shown:
To download the image to your tablet, goto the Example Code section on this page, and Save As, to save it to your
tablet. Then place it at AppProjects/tutorials/res/drawable-hdpi folder.
For the text on the screen, Browse Codes,
we use TextView element
add the text, as shown in this image.
Then, reference the strings in the strings.xml file where you place the actual text you want shown on the view for
each named string.
Add a string to the strings.xml file for each string you create.
Adding an Image to Activity View
Android:textColorHighlight ="#eeeeee" - attribute can be used to add a background color to the text link when hovered - as shown in image and example code on this page.
Android:autoLink="web" - attribute can be used to make a domain name clickable, as shown in the code for this tutorial.
AndroidAppCoding.com/code-examples text is a domain name, therefore, the text is a clickable link because we added
the android:autolink="web" attribute to our code.
Each element you add to your Linear Layout,(like images, buttons, textview), are placed in the order they were coded.
To code them otherwise,(their placement on the screen) you can use specific attributes from the available attributes of the element you are coding.
In this tutorial's code, we added our Imageview first, then the TextViews.
Because we gave the ImageView a Top Margin,(layout_marginTop), it was placed more centered on the view. Had we not added the Layout Margin Top
the ImageView's image would be placed at top of the screen view.
For the TextViews we added a layout_marginTop. This is the space allotted not from the top of the screen, but from the
previous element. So in our first TextView, we coded a layout_marginTop of 15dp, which is 15dp from the Imageview, not from the
top of screen.
There are many attributes and values, you can choose to add to your ImageView element; mostly to do with how you want your
image to be shown within the view.
....read Imageview attributes and values here
This next image shows all changes made to the layout file for our App named - "Tutorials"
You can copy this code and place it in the app layout file to replace the code there now; GoTo our Example Code section on this page to get the code.
Having made our changes: We will now RUN our app to update the app files:
(To RUN your app, click the top right icon in AIDE, the choose RUN. Follow prompts to install, and update the app.)
Then, simply open the app to view it.
Code For This Tutorial
This is the code for all edits we have done to our app named Tutorials,
for this - Imageview tutorial; so you can just copy and paste to replace
the code you now have in your layout file:
App Name is Tutorials - located at AppProjects/tutorials in AIDE, open the AIDE app, then open App Projects,
once this code is placed in each page,
save each page, then RUN your code, INSTALL the app, to see the changes made.
This free script provided by