Android Tutorial Banner for Smartlink

Android Programming, Android Banner Example

New Tutorial 2023

Android Tutorial -
Banner Example

Added July 2023

For this tutorial, we are going to learn how to code a ImageButton in our layout at main.xml; with a web link attached to it. When clicked it goes to a web address url. For the url you can use any web link you like, simply swap out the url in the java class code. Because we want to use our 'button image' as a 'mobile advertising banner', we are putting it at the bottom of our view, and giving it a specified height. We don't want it too tall, but we do want its' width to match the screen width.
In our previous tutorial, we learned how to put a banner at the top of our layout view container.

And, like our previous tutorial, we are adding an advertising 'Smartlink' to our banner. A Smartlink is essentially a web link - a url. When a user clicks on the banner, they are taken to a landing page with offers of products or services. If they click on and goto one of those offers, and purchase any of the offers; you as an 'affiliate publisher', make a commission from the sale or service offered. To learn more about Smartlinks, read our previous tutorial, Implementing Smartlinks

Adding Images To Your Project

As we learned in our previous tutorials, screen density and screen size are important factors when deciding what image sizes to add to your app project. For smaller screen like cellphones, you add smaller images, and for larger devices like tablets, you should add larger images, so that they display properly for the screen size and density.

Image of Screen Densities with Device Sizes
This image shows the typical screen sizes and densities and how they might overlap each other.

Android typical screen sizes and densities

Android typical screen sizes and densities

ImageButton for Smartlink

To create our 'advertising banner', we use the ImageButton element, and add our image to it using the Android@drawable/ property. Then we simply link the 'ImageButton' element to our java class with the: (ImageButton)findViewById(R.id.bannerb_to_link) method;

Creating Images for ImageButton Banner

For mobile apps, on cell phones(smartphones); you want the top or bottom banner for advertising small; ideally, not more than 60-80px for height, and 350 for its' width. For tablets, you can make your images larger, 100-150px for height, and to 480px for width. Put any text towards the center of the banner, as this makes it appear best when shown; basically keep text not too close to the edges.

For best results:

Test Your Banner
First, run your app to view your banner, and make sure it looks ok. You can tweak it by trying the other 'android:ScaleTypes', at your ImageView element; however keeping your image width around 350px, and height around 60-80, should scale fine for a cell phone screen with using the 'centerCrop' value.
For larger screens like tablets, you probably want bigger images that scale properly and add different size images to the other 'android-res/drawable-hdpi' folders - xhdpi, xxhdpi, xxxhdpi.

Run your app code to add the banner to the app view. Then, once your banner is good, test your advert smartlink, by clicking on the banner, making sure the screen that displays loads properly for the smartphone screen size. For an actual publisher banner; 'Do not click' on any link at that point; just view it to see that it is compatible with your device screen size. To return to your previous page, just click your back button on your phone.

Dependencies and SDK Version Targets

For this app we are using the 'uri.parse' method in our java class code(MainActivity.java), which was introduced in earlier versions of the Android Platform, therefore we do not have to add any dependency code for this.

For the SDK versions we want to add the newer versions of Android, that way we can target as many users as we can. For this app we use 16 for the min SDK version, and 28 - 31, for our target Sdk version. These can be changed in the 'buildgradle' file of our app.

We are going to create a new app for this tutorial, and name is - BannerB Example

App Screenshot
Android Tutorial, Banner for Smartlink

Creating Our New App

Open AIDE, Select New Project, from the left menu, or center menu hierachy of files; and do the following:

Select
Create an Android app, choose java xml programming language

Create an Android app, choose java xml programming language

choose NEW ANDROID APP(Gradle/Android SDK/java/xml) if your using the newest version of AIDE.

Choose HELLO WORLD example app template(java/xml);if your using an older version of AIDE,

For app name; type 'BannerB Example'

For app package name type: com.aac.example_banner

Click Create

Your new app is now created for you - named 'BannerB Example'. You will have the 'little green Android image' as your app icon.
This is the default launcher icon used by the Android system.

AIDE automatically opens your new app in the editor for you.

Where Code is Coded

Main.xml

As mentioned, the image button element, ImageButton, is added at our layout, at main.xml. First we have to add the 'ImageButton" element; then we add the image we want to have in the button using the '@drawable/ property, coded as shown in this image.
The image name is
banner_win.jpg
background color around image, to blend out grey color

background color around image, to blend out grey color

The image itself is added to the drawable folder(s) at res in our app project- res/drawable. You must at least create res/drawable, and put your image there. Because we are targeting a small cell phone size we should put an image there. (res/drawable). If you are targeting different android device sizes, then you should add additional images to match those device densities as well. For this tutorial, we want to target cell phones; size - 5.2 inch to 5.5 inch, and to tablet size 8 inch.

We will create and add two images to support these device densities(screen sizes). One is 480x200, the other, 325x125. As you look at your res folder you see the 'drawable-mdpi', 'drawable-hdpi', 'drawable-xhdpi', and 'drawable-xxhdpi', have already been created for us when we made our app with the AIDE template app. So, we only have to put the images in the folder we want to use. We do however, have to create the res/drawable folder, because we are targeting a small cell phone size also.

First, Create the 'drawable' folder for smaller device densities. Put the banner_win_m.jpg, in the 'res/drawable' folder and the 'res/drawable-mdpi', and the 'res/drawable-hdpi' folder.

Put the larger image, 'banner_win_x.jpg' in the 'res/drawable-xhdpi' folder, and the 'res/drawable-xxhdpi' folder.

Basically, for small devices like cellphones we put the images in res/drawable, res/drawable-mdpi, res/drawable-hdpi; and for tablets, put larger images into res/drawable-xhdpi, res/drawable-xxhdpi, and res/drawable-xxxhdpi. There is overlapping amongst the densities, and the Android system can scale as needed.
If you do not put images in each folder to accommodate all the screen sizes you want to target, the Android system will use whatever is in each folder by scaling to the density required. This means if it does not have a proper size available it will scale what it does have, which could make your images look 'imperfect' on some devices.

Rename The Images

Once you have them all put in their folders, rename them all to banner_win.jpg; this is the name we used in our layout at the ImageButton, so we name all images the same even though they are in different folders and, even though they are all different sizes.
The Android system will display the appropriate image based on the device density and screen size. By using different size images and putting them in the folders for the different screen densities, your images will display and look better across all the device sizes your targeting.

This image shows the banner on the different android screen sizes:
Cellphone size 5.2, Cellphone 5.5, and 8" Tablet.
Android cellphones and tablet with bottom placed banner,smartlink banner

Android cellphones and tablet with bottom placed banner,smartlink banner

Grey Space Around Image Button

Sometimes when adding an image to an ImageView, the image doesn't perfectly adjust to the bounds of the ImageView area, and you might see a grey area around your image or the ImageView. To compensate you can add a 'android:background', to blend the background color so the grey color doesn't show. For this tutorial, I added the android:background="#ffffff" property with a white background. This blended out the grey making the imageview look better.
background color around image, to blend out grey color

Java Class Pages

We must link our ImageButton to the java class, MainActivity.java. We link the button to the java class by using the method findViewById(R.id.bannerb_to_link).Then, we simply add the 'bannerb_to_link,' to the onClickListener method. Now that we have connected them, when a user clicks on the banner, they are taken to the url you have specified in your code at the 'uri.parse' method.

uriParse Method Android

Adding Publisher Link to ImageButton Banner

For our image button banner, we can easily add the publisher link code to the coding, at the 'uri.parse' method in our java class; and we can change the link anytime we like.

Also, at AndroidManifest.xml, we add the 'uses property for Internet Permission'. This is required for app code where you use 'uri.parse', 'url load', a 'web view', or any other code where you add a web link.
And, at strings.xml, you only require the 'app_name' string. Also, at the buildgradle, set your SDK version targets to at least 28.

And, lastly, we are not adding a customized icon to this app, so we DO NOT have to edit our icon at the manifest; the system default - ic_launcher is used.

Import Statements Added

You must add the 'import statements' for the coding methods we are using at the MainActivity.java page. If you look at the code in the MainActivity.java class file, you'll see many imports have been added. If you do not add these, or don't add the proper ones, you will get build errors when you try to run your app code.

Looking at this next image of imports for this apps' code; you can see that for the 'uri.parse' class code, we added the required import - 'import android.net.Uri'; and for the 'onClickListener' method, we added the required import - 'import android.view.View.onClickListener'. And, since we are using the ImageButton element, we must add an import for that also, which is the 'android.widget.ImageButton' import.
Usually some word in the name of the import gives a clue to what code class it represents.
imports for uri parse android example

View Import Statement Examples by Code Class

In Summary

In this tutorial, we learned how to code an ImageButton and put it at the bottom of our view container. We used a typical screen banner size and added a smartlink to it. With this same code you can add a variety of image sizes to suit the purpose of your app.

All code edits are at the Example Code section on this page. Just copy and paste for the changes you have to make. Edit the pages, MainActivity.java, main.xml, strings.xml, buildgradle, AndroidManifest.xml, then save each page.

Save the two banners required for this app, and add them to the drawable folders as shown.

Renaming Images in AIDE

You must rename the images once you have added them to their drawable folders. This is easy to do.
You can rename images in AIDE, from the File Hierachy, Left Menu in AIDE, click to goto res/drawable folders, then, just click and press each image name, a popup appears, just choose RENAME; type the new name: 'banner_win.jpg', select OK. If preferred, you can use your device FileManager, to rename each image. Just goto each folder and use the rename feature in your device FileManager.

Also, make sure to include the file extension name when renaming them - banner_win without the file extension; banner_win.jpg with the file extension added. You DO NOT have to add the file extension when adding the image name at the @drawable/banner_win property at the ImageButton in your layout at main.xml.

Build and compile your APP code

Once you've updated all the code pages, you can RUN the code, to see the app.

All code for this tutorial is at the Example Code section on this page. Only copy and replace code for the pages mentioned that require updating.
At Example Code section on this page; any page notated as 'no edit required or view only', means you don't have to copy and paste that page - added only for you to view.

Additional Reading on coding 'uri Parse', at Android Developer website
Uri Parse - Android Developer

In Summary,
App Name is 'BannerB Example' - located at AppProjects/ in AIDE; OPEN the AIDE app, then open App Projects, THEN select the 'BannerB Example', app from your files hierachy(left menu); then DOUBLE CLICK on any file from the app, like strings.xml, to open it in AIDE.

Make sure at top of page, the app name 'BannerB Example' is there next to AppProjects like so: AppProjects/BannerB Example, then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, install, to Open your app.

You can open the app Simply by Clicking on the Android little green App Icon,with the wording 'BannerB Example', on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app again.

EXAMPLE CODE - Code For This Tutorial.

JUST copy the code for this tutorial from the Example Code in this section.

Example Code:
Copy Paste the Code

Copy and replace these codes into your app to replace the code on the pages there now
Save each page

tutorial - bannerB example

main.xml - copy and replace code
MainActivity.java - copy and replace code
strings.xml - app name string only delete the helloworld string
buildgradle - set targets sdk versions
AndroidManifest.xml - add the uses property for Internet Permission
Save the images to your device at the res/drawable folders
banner_win_m.jpg 
banner_win_x.jpg

________________

MainActivity.java

package com.aac.example_banner;

import android.app.*;
import android.os.*;
import android.widget.ImageButton;
import android.net.Uri;
import android.content.Intent;
import android.text.Html;
import android.widget.TextView;
import android.content.Context;
import android.view.View;
import android.view.View.OnClickListener;

public class MainActivity extends Activity 
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
		
		ImageButton bannerb_to_link = 
		(ImageButton)findViewById(R.id.bannerb_to_link);

bannerb_to_link.setOnClickListener(new 
		View.OnClickListener() {
				@Override
				public void onClick(View view) {
		
					Intent i = new Intent(Intent.ACTION_VIEW, 		
					Uri.parse("https://www.androidappcoding.com"));
					startActivity(i);
				}
			});

}
	}
	
	________________
	
	main.xml
	
	
	<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".MainActivity">

</RelativeLayout>

__________
	
	AndroidManifest.xml
	
	<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.aac.example_banner" >
	<uses-permission
		android:name="android.permission.INTERNET" />
	
	
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
		android:resizeableActivity = "true">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

</manifest>
	
	_____________
	
	buildgradle
	
	
	apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.0"

defaultConfig {
        applicationId "com.aac.example_banner"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
}

___________

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">BannerB Example </string>

</resources>

end of app code

App Images; Save as Named

This app has 2 images:

SAVE IMAGE(S): Save As

Save this first image as named to: drawable-xhdpi, and drawable-xxhdpi. Once added to these folders, rename the image in each folder to 'banner_win.jpg'
banner_win_x.jpg

and,

Save this image to the res/drawable folder(you must create res/drawable); and to res/drawable-hdpi; and res/drawable-mdpi; once added to these folders rename the image in all folders to banner_win.jpg
banner_win_m.jpg

This free script provided by
JavaScript Kit

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Golf with Lefties - Golf Instruction Tips & Videos Taste World Wines Flavours and Aromas