unknown os platform
Android java: How to create Android responsive image background button | Whats-online.info
whats-online-info

Android java: How to create Android responsive image background button


Android
2016:06:20 / Science and Tutorials

How to create a responsive android button with a background image on java.The button background changes on click listener or touch listener.







Have you ever downloaded an android application from the play store or any other android apps store that has unresponsive buttons on click or touch? 
Sometimes it hurts the app user to a point of commenting against the app "I hate it, why to waste my Mbs downloading such a stagnant application which does not even respond on touch, I'm uninstalling it." These hurting, annoying and sometimes it may make the user bang his/her phone on the ground when
he/she recalls how many Mbs she/he has wasted for the same.

For this tutorial, we will embark on creating a sample application, with a custom button, i.e, the button background is an image. The button background changes to another image background on touch and reverts to the initial on touch release or key action up as shown on Image1 and Image2.

Image 1



Image2


Note that, as a Programmer, it is compulsory to be conversant with any graphic designing tool. These because the interface of an application determines the look and feel of the application, that is, the outward presentation of the app. You may be a good programmer, but your app may lack great impact to its
users. Let me ask. How can an artist draw a classic wall deco without his/her tools? Masonry can build a house without his/her work kits but how many will be willing to buy the house? Ask yourself that before uploading your application with that poorest interface to the store. Do you know the app users feel like
spitting on it after wasting all those Mbs and finally finding the app being weird and cumbersome to use? These guide will help you escape curses from your app followers.

For our tutorial, we will use Java to illustrate this, and as time goes on, I will release another tutorial on how to do the same with only XML.

First, let's create our MainActivity.java and our activity.XML (Style up and lay out our custom button).

Our MainActivity.java contains the touch Listeners that listens on event performed.That is, on keyEvent Action up and down, the button background images changes as show on image1 and image2.

activity_main.XML code

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/btn1"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="167dp" />
</RelativeLayout>


MainActivity.java code


package com.whatsonline.customandroidbutton;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn=(Button) findViewById(R.id.button);
        btn.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                // TODO Auto-generated method stub
                if (event.getAction() == KeyEvent.ACTION_DOWN) {
                    btn.setBackgroundResource(R.drawable.btn2);
                } else if (event.getAction() == KeyEvent.ACTION_UP) {
                    btn.setBackgroundResource(R.drawable.btn1);
                }
                return false;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}


 Also see: Change button background color and text color on click












You may also like:


Leave a comment












Subscribe to get replies direct to your mailbox

Submit comment