Android Studio : Image button and button example

Continuing from previous tutorial on how to develop a "Hello World" application in Android Studio. The next logical step for me to learn Android Studio is to learn how to add button that will trigger action such as launching browser, taking a picture or show simple "toast" message.

For this tutorial, we will learn how to add two buttons onto a blank Android app.

When the first button is clicked, it will fire up a browser to an URL specified in the code and when the second button is clicked, it will prompt a toast message that will fade away after couple of seconds.

First, create a new project

and select the "Empty Activity" template.

Based on the image below, on position 1, dig down to MainButtons.java

and fill the file up with:

  package com.example.sweetlogic.buttonsexample;

  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.View;
  import android.widget.Toast;
  import android.widget.ImageButton;
  import android.widget.Button;
  import android.content.Intent;
  import android.net.Uri;


  public class MainButtons extends AppCompatActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main_buttons);

 addListenerOnButton();
 }

 public void addListenerOnButton() {
 Button button = (Button) findViewById(R.id.buttonClickToBrowse);

 button.setOnClickListener(new View.OnClickListener() {

 @Override
 public void onClick(View arg0) {

 Intent browse = new Intent(Intent.ACTION_VIEW, Uri.parse("https://www.socketloop.com"));
 startActivity(browse);
 }
 });

 ImageButton imgbutton = (ImageButton) findViewById(R.id.imageButtonClickForFun);

 imgbutton.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View arg0) {
 Toast.makeText(MainButtons.this, "This is a Toast Message!", Toast.LENGTH_SHORT).show();
 }

 });
 }

  }

and go to position 2 and dig down to activity_main_buttons.xml. Go to position 3, toggle from Design tab to Text tab

and fill up with:

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout 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="match_parent"
 android:layout_height="match_parent"
 tools:context="com.example.sweetlogic.buttonsexample.MainButtons"
 tools:layout_editor_absoluteY="81dp"
 tools:layout_editor_absoluteX="0dp">


  <Button
 android:id="@+id/buttonClickToBrowse"
 android:layout_width="300dp"
 android:layout_height="80dp"
 android:fontFamily="sans-serif-condensed"
 android:text="Click me!"
 android:textColor="?android:attr/textColorPrimary"
 android:textSize="18sp"
 tools:text="Will launch browser"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

  <ImageButton
 android:id="@+id/imageButtonClickForFun"
 style="@style/Widget.AppCompat.ImageButton"
 android:layout_width="300dp"
 android:layout_height="0dp"
 android:adjustViewBounds="false"
 android:baselineAlignBottom="true"
 android:cropToPadding="false"
 android:elevation="0dp"
 android:scaleType="fitCenter"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/buttonClickToBrowse"
 app:srcCompat="@android:drawable/presence_offline" />

  </android.support.constraint.ConstraintLayout>

Save all files, hit the Run button to build the app and deploy the APK to your AVD(emulator). If everything goes smoothly, you should see that the buttons will work as advertised as per images that follow.

Two buttons on app: