Code An onClick Example, Android Tutorial

Develop Android Apps, how to code onclick with buttons

TUTORIALS III

Next Tutorial
Android, Coding A Shape Divider

Prev Page
View All Tutorials

ANDROID - OnClick EXAMPLES

For this tutorial, we are going to learn how to add 'onClick' to two buttons. The first button clicked goes to another view. The second button clicked will display a 'toast message'.

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

Android Tutorial, OnClick Examples, App

Creating Our New App

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

Create an Android app, choose java xml programming language

Create an Android app, choose java xml programming language

Choose HELLO WORLD example app template(java/xml);if your using an older version of AIDE,
choose NEW ANDROID APP(Gradle/Android SDK/java/xml) if your using the newest version of AIDE.
For app name; type 'OnClick Examples'

For app package name type: com.aac.exampleswithonclicks

Click Create

Now your new app has been created with the name 'OnClick Examples'.

This name will show on the left menu hierachy in AppProjects within AIDE.

To open your app just click on the app name(OnClick Examples) on the left menu; then browse to java folder for java class pages, like MainActivity.java, or choose res folder to view res/layout/activity_main.xml page. or res/layout/values has the strings.xml page.
Choose any of these and double click the filename to open the page in the AIDE coding editor. Now you can edit your app pages.

Where Code is Coded

The app name 'onClick Examples' is at the top of your screen and this text 'onClick Examples', is coded in the strings.xml. This is done automatically for you when you create your app using the 'create app template' in AIDE, as we are doing.
All app text is coded in the strings.xml file at res/values of the AppProject - onClick Examples, including the app name.

However, text for - Button 1, and Button 2, is added directly in the button element using the attribute android:hint="Button 1", and android:hint="Button 2".

The two buttons are added to our layout page, activity_main.xml, which is at res/layout/activity_main.xml. Each button is coded in its' own 'Button element', as shown here.

Button with onClick, Android Free Tutorial

Button with onClick, Android Free Tutorial

The layout view, activity_main.xml, is usually named main.xml,(created automatically when we create our app) but for this app we renamed it activity_main.xml. As mentioned in previous tutorials, you can name it as you like.

The 'activity_main.xml' has the buttons code and in each button we are going to add a resource id, which we learned about in our previous tutorial, and you can see that code in the image shown also.
We named the resource id for the first button as "Button1', and 'Button2', is the resource id name for the second button.

As we are making each button clickable, we need to add the resource id to each button, so the android system can find the buttons, and match them to the code in our java class page in order to perform the intended action, which is to execute the code so first button when clicked goes to another view(page), and the second button when clicked displays a Toast Message.

FYI

The names- View, Activity, ScreenView and page View are all used to describe an app screen, whether it is the first app screen or any others added to the app.

And, the word 'Widget', is often used to describe the elements we code in a View like a TextView, Button, ImageView, Radio Buttons, and so forth.
So, the phrase, 'adding a TextView widget to the app UI, means adding a TextView element to the app interface. Interface is of course the displayed view where a user interacts with the app; whether it is something simple like scrolling down the screen to view content or clicking on something like a button.

Coding MainActivity & FirstScreen Java Class

MainActivity is the first java class page in our app, and any new java pages you need to create must be attached to MainActivity. This is done by adding the 'intent' method in the code at MainActivity.java.

And, because MainActivity.java is the first java class page in our app, it must be defined at AndroidManifest.xml by coding the 'activity' and 'intent-filter' elements.
If we do not include these elements, your app won't launch or load the screen view.

These elements are created for us when we use the 'android template', to create a new app.

The template app we created names our first java page as MainActivity.java.
MainActivity is defined in the AndroidManifest.xml at the element 'activity'.

Each app can only have one 'launch' activity, and it is always matched with the first xml page of your app. That is why activity_main.xml is the first screen that loads in our app, because it is matched with MainActivity.java.

You can have numerous java class pages, and they all must be defined in the AndroidManifest.xml using the 'activity' element; but only one of them can be the apps' first java page, and that page, most often named MainActivity, is defined in an 'activity' and 'intent-filter' element.
This code snippet from 'intent-filter' element in the AndroidManifest tells the system to launch the MainActivity.java page.
action android:name="android.intent. action.MAIN"

The .MAIN simply means the main page of your app or the first screen that will launch. Like the homepage of a website.
And, since we defined MainActivity.java as our first java class page, the android system will load the xml page which is matched with the MainActivity, which we know is, activity_main.xml.

Button to New Screen Example, on.click example with buttons

This image of MainActivity.java coding for this app, shows the code to implement the intent that goes from MainActivity.java to FirstScreen.java.

This is how we attach the first screen of our app to the second screen, by coding the 'intent method' in the java class of the first java.page which is the MainActivity.java.

And, since our java pages are matched with our layouts- activity_main.xml, and first_screen.xml; using the 'setContentView' method; these are the pages that load into our screen view.
And, because we are using a Button as our control method; once the button is clicked the java class page code is executed; allowing whatever layout is matched to get loaded into the view.

Implementing 'OnClickListener'

Another method we must implement within our Button1 coding, is the 'setOnClickListener'. The name mostly tells its' role; that is, to 'Listen' for an event to happen.
So, when we click the button, the onClickListener records the 'event'(the button click), and once that happens, the remaining code also executes and we are sent to screen_one.xml.

MainActivity.java
Java Class, Free Toast Tutorial

MainActivity.java, is also attached to the first xml page/screen; (activity_main.xml) the layout page of your app. As noted previously, this is done using the 'SetContentView' method also shown in the image.

Every app must have at least one layout (xml)and one .java class page, otherwise the app would not function.

This image of FirstScreen.java
shows the code that matches FirstScreen.java to screen_one.xml. The 'setContentView' method is used. The same method is used to match MainActivity.java to activity_main.xml. Any additional pages you add would be coded using the setContentView method.

Java Class, Toast Tutorial

Updating Code & Creating New Pages

We will be adding/updating some code to our java class page, which is MainActivity.java, located at AppProjects - OnClickExamples/app/src/java/MainActivity.java

For this, we added the code to make the buttons perform actions- 1st button to new view, 2nd button displays toast message. You can see the code in this image for the Toast Message.
Button 2 gets attached to the 'onClickListener' by coding the 'findViewbyId' method. Then the code to create the Toast is executed. Button to Toast Example, Tutorial Android Java XML

and in this image, the code for Button 1. (new activity).
The 'onClickListener' is used here also, and the 'findViewByID', attaches Button 1 to the listener. The code then executes to process the 'Intent', which is required to pass code information from MainActivity,(1st page), to FirstScreen.java (2nd page), which then displays screen_one.xml.
Button to New Screen Example, on.click example with buttons

For button 1, we must create two new pages; screen_one.xml, and FirstScreen.java. When you create a new xml page and it has a clickable Button a new java class page has to be created to match the new xml page. This is how actions are implemented. The xml page defines what you want to do, and the java page executes it.

You can name them as you like, however, the xml name and java must be 'lowercase', and if using -, they must be as _.
For the java class page, it must be camel cased, each word must have first letter capped. These pages must be matched to find each other, and this is done by coding the 'setContentView', method in the java page FirstScreen.java. See this image for the code.
Java Class, Toast Tutorial

Coding Toast Message

Our 'toast message", displays a message in our 'activity_main.xml' view, therefore we don't need to create a new view(page) for it.

The executable code for the Toast Message is coded at MainActivity java, because it is the matching java class for our activity_main.xml, and that is where our Toast Message is displayed.

Coding Intents

As we mentioned, you must match your MainActivity.java to any additional java class pages you create. This is done using the 'intent method'.
Looking at the image of MainActivity.java code, you see the intent is added to Button1 coding. A new intent is defined, and then the file names are added,
Intent intent = new intent(MainActivity.this. FirstScreen.class startActivity(intent)
The code tells android system to go to FirstScreen.java page from MainActivity. Once it gets to FirstScreen.java it knows that the matched page for FirstScreen.java is screen_one.xml, and it then displays that page to us. Course, this all happens in a light speed second once we click on Button 1.

Coding Imports

When we create an app using the template the import code at MainActivity.java is created for us.
Typically, imports include: android.app, android.activity, android.bundle, android.view.
Imports Android Tutorial

When we code additional methods to our MainActivity.java page, we need to include the 'import code' for those also.
Looking at this image, you see we added import code for Button, Toast, and Intent; as these are the additional methods we added to our java class page, MainActivity.java.

If you do not add the import code or the proper import code, you will get 'errors' when you build your app code- RUN the app code, (or compiling your app package as it is known).

Coding AndroidManifest.xml

The java class pages of your app must be defined in your AndroidManifest.xml. Looking at this image of AndroidManifest for our tutorial, you see that an Activity element has been coded for MainActivity.java, and an 'intent' has been coded for it also.
(You do not need to add the file name extension).

This code tells android system that MainActivity.java is the first java class.of this app, and to add an intent to it. The android system processes this code and when the app is first opened the activity_main.xml is the first screen displayed because it is matched with - MainActivity.java.
Coding Android Manifest, onClicks Tutorial

Coding Android Manifest, onClicks Tutorial

Any additional java pages you create must also be defined here by coding the Activity element as we did for FirstScreen.java.
You do not need to add an "Intent' for every java page, just the main one - MainActivity.java. Intents for additional java pages are coded at MainActivity.java, as we did for FirstScreen.java.

Coding the Strings.xml

There are two strings for this app, coded at strings.xml, as shown in this image.
Coding Android Strings.xml, onClicks Tutorial

The first, is the 'app_name'. This is created for us when we create our new app using the template, and the code reference to 'app_name' is in the AndroidManifest.xml. Unlike your app package name, this name can be changed after you create your app project.

To do so, you must change it at your strings.xml, and in your file hierachy. For this, just highlight the app name, and select 'Rename'; type the new name you want to use.

You can also add a title to each xml screen you create. To do so; you must add the 'android:label', attribute at your AndroidManifest.xml, in.the '' element where you add your FirstScreen.java class.
And, if you do not want to add a 'Title' for any additional pages you create just omit the 'android:label', when coding the Activity at AndroidManifest.xml.

The other string for this app is the text for our 1st page view title(screen_one.xml); string name is screen_one, and text is 'Screen One Title'. This we must code ourselves because we created screen_one.xml, (and the corresponding FirstScreen.java.)
Also, text used for the Buttons is coded directly in the Button elements and reads; Button 1, Button 2.

And, lastly, we coded text in our TextView element at screen_one.xml, that reads, 'This is Screen One'. As mentioned previously, when the text you need to add is short, it is easier just to code it directly in an element rather than creating a string for it.
Once the text is added to the strings.xml file, save the file.

Navigating The App Project Hierachy

To view A FILE do either: from right menu choose FILES or GOTO, this will show the apps files along the top of editor, dropdown, and left side menu. After editing a file, SAVE it, right side menu, choose SAVE.

Just double click a file to open it in the coding editor. Once file is opened they also show as tabs at top of editor.

To return to prev folder, just click on ORANGE colored FOLDER at top of files hierachy left side menu; to return to AppProjects (where you can see all apps you created) just click orange folder till you see AppProject, or from dropdown menu right side, or middle editor, choose, Show - View All Projects.

To build- Run your app choose the arrow at top of AIDE editor; older version select right side menu (dots) from selections,Choose RUN.

Update Pages- Copy Paste

Copy paste the code into the appropriate pages: activity_main.xml, MainActivity.java, AndroidManifest.xml, and strings.xml. Save each page.

Then, create your new xml page,and java page. - screen_one.xml, FirstScreen.java; the corresponding java class page, Add the codes to each and save each page.

And, Remember: You must create new pages in the same folder as the page type you are creating.
For your screen_one.xml, create it at the res/ folder of your app project name. For java class pages you must be in the java/ folder of your app project.

Tip: check for the filename extensions of page your creating. If for example, your creating a new Java page, you want to see pages already created in that folder that have the .java file extension.

Additional Reading on coding, at Android Developer website
Gohere

In Summary,
App Name is 'onClick Examples' - located at AppProjects/onClick Examples in AIDE; OPEN the AIDE app, then open App Projects, THEN select the 'onClick Examples', 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 'onClick Examples' is there next to AppProjects like so: AppProjects/onClickExamples, 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 'onClickExamples' 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

Example Code
	
	activity_main.xml

LinearLayout 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"
	android:background="#ebbb44"
	tools:context=".MainActivity">

</LinearLayout>

MainActivity.java

package com.aac.exampleswithonclicks;

import android.app.*;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.content.Intent;

public class MainActivity extends Activity 
{
	Button b1, b2;
	
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
		
		
        setContentView(R.layout.activity_main);
		
		b1 = (Button) findViewById(R.id.Button1);
		b1.setOnClickListener(new View.OnClickListener()
		{
			@Override public void onClick(View view)
			{
				Intent intent = new Intent(MainActivity.this, FirstScreen.class);
				startActivity(intent);
				}});
				
				b2 = (Button) findViewById(R.id.Button2);
				b2.setOnClickListener(new View.OnClickListener()
				{
					@Override public void onClick(View view)
					{
						Toast.makeText(getApplicationContext(),
						"This is a Toast Message with Text", Toast.LENGTH_LONG).show();
						}
						});
						
    }
}
	
	
	screen_one.xml
	
	
	LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res/auto/"
	xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
	tools:context=".FirstScreen"
    android:orientation="vertical">
	
	<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:textSize="25dp"
		android:text="This is Screen 1"/>
    
</LinearLayout>

FirstScreen.java

package com.aac.exampleswithonclicks;

import android.app.*;
import android.app.Application;
import android.view.View;
import android.os.Bundle;
import android.app.Activity;

public class FirstScreen extends Activity

{
@Override protected void onCreate(Bundle savedInstanceState)
{
	super.onCreate(savedInstanceState);
	setContentView(R.layout.screen_one);
	}}
	
	
	AndroidManifest.xml
	
	
	<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.aac.exampleswithonclicks" >

</manifest>

strings.xml

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

<string name="app_name">onClickExamples</string>
	<string name="screen_one">Screen One Title</string>

</resources>

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:
Make Sushi Rolls Taste World Wines Flavours and Aromas

AndroidAppCoding.com, All Rights Reserved