Android Studio : Image button and button example


Tags : android-studioimage-button empty-activity java

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

configure new project in Android Studio

and select the "Empty Activity" template.

and select empty activity


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

see position 1 and enter the Java codes

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

toggle between design and text

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:

image button and basic button on empty Android app 1

One will launch browser to view website:

browser launched by clicking on button

Happy coding!

References:

https://developer.android.com/reference/android/widget/Button.html

https://developer.android.com/reference/android/widget/ImageButton.html

  See also : Android Studio : Hello World example



Tags : android-studioimage-button empty-activity java

By Adam Ng

IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.


Advertisement