Showing posts with label Button. Show all posts
Showing posts with label Button. Show all posts

Wednesday, May 11, 2016

Basic onClickListener


It's a very basic example to implement onClickListener for Button:
- Button A, define onClickListener as anonymous class.
- Button B1 and B2: define onClickListener class.
- Button C1 and C2: assign callback function in XML.


activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"
    android:onClick="onBackgroundClickedCallback"
    tools:context="com.blogspot.android_er.androidclicklistener.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:id="@+id/buttona"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button A: anonymous onClickListener"/>

    <Button
        android:id="@+id/buttonb1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button B1: onClickListener"/>

    <Button
        android:id="@+id/buttonb2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button B2: onClickListener"/>

    <Button
        android:id="@+id/buttonc1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onClickCallback"
        android:text="Button C1: define callback in XML"/>

    <Button
        android:id="@+id/buttonc2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onClickCallback"
        android:text="Button C2: define callback in XML"/>

    <TextView
        android:id="@+id/info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="28dp"/>
</LinearLayout>


MainActivity.java
package com.blogspot.android_er.androidclicklistener;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Button btnA, btnB1, btnB2, btnC1, btnC2;
    TextView textInfo;

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

        btnA  = (Button)findViewById(R.id.buttona);
        btnB1 = (Button)findViewById(R.id.buttonb1);
        btnB2 = (Button)findViewById(R.id.buttonb2);
        btnC1 = (Button)findViewById(R.id.buttonc1);
        btnC2 = (Button)findViewById(R.id.buttonc2);
        textInfo = (TextView) findViewById(R.id.info);

        btnA.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,
                        "Button A Clicked: implement anonymous onClickListener",
                        Toast.LENGTH_LONG).show();
                textInfo.setText(v.toString());
            }
        });

        btnB1.setOnClickListener(btnBOnClickListener);
        btnB2.setOnClickListener(btnBOnClickListener);
    }

    //set by calling setOnClickListener()
    View.OnClickListener btnBOnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            if(v.getId() == R.id.buttonb1){
                Toast.makeText(MainActivity.this,
                        "Button B1 Clicked: implement onClickListener",
                        Toast.LENGTH_LONG).show();
            }else if((v.getId() == R.id.buttonb2)){
                Toast.makeText(MainActivity.this,
                        "Button B2 Clicked: implement onClickListener",
                        Toast.LENGTH_LONG).show();
            }

            textInfo.setText(v.toString());
        }
    };

    //define in XML
    public void onClickCallback(View v){
        if(v.getId() == R.id.buttonc1){
            Toast.makeText(MainActivity.this,
                    "Button C1 Clicked: callback assign in XML",
                    Toast.LENGTH_LONG).show();
        }else if((v.getId() == R.id.buttonc2)){
            Toast.makeText(MainActivity.this,
                    "Button C2 Clicked: callback assign in XML",
                    Toast.LENGTH_LONG).show();
        }

        textInfo.setText(v.toString());
    }

    //define in XML
    public void onBackgroundClickedCallback(View v){
        Toast.makeText(MainActivity.this,
                "Background Clicked",
                Toast.LENGTH_LONG).show();
        textInfo.setText(v.toString());
    }
}


Wednesday, September 23, 2015

Example of using "?android:attr/selectableItemBackground" and "?android:attr/selectableItemBackgroundBorderless"


Example to apply "?android:attr/selectableItemBackground" and "?android:attr/selectableItemBackgroundBorderless" to android:background, in XML file.
  • ?android:attr/selectableItemBackground for a bounded ripple.
  • ?android:attr/selectableItemBackgroundBorderless for a ripple that extends beyond the view. It will be drawn upon, and bounded by, the nearest parent of the view with a non-null background. (introduced in API level 21)
reference: http://developer.android.com/training/material/animations.html#Touch


<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:padding="30dp"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Normal Button"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="\?android:attr/selectableItemBackground"
            android:textAllCaps="false"
            android:background="?android:attr/selectableItemBackground" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="\?android:attr/selectableItemBackgroundBorderless"
            android:textAllCaps="false"
            android:background="?android:attr/selectableItemBackgroundBorderless" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:orientation="vertical"
        android:background="#80C0C0">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Normal Button"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="\?android:attr/selectableItemBackground"
            android:textAllCaps="false"
            android:background="?android:attr/selectableItemBackground" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="\?android:attr/selectableItemBackgroundBorderless"
            android:textAllCaps="false"
            android:background="?android:attr/selectableItemBackgroundBorderless" />
    </LinearLayout>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src="@mipmap/ic_launcher"
        android:clickable="true"
        android:background="?android:attr/selectableItemBackgroundBorderless" />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src="@mipmap/ic_launcher"
        android:clickable="true"
        android:background="?android:attr/selectableItemBackgroundBorderless" />
</LinearLayout>


Sunday, September 20, 2015

Simple buttons with drawable

Example of buttons with drawable/icon:


<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:padding="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Normal Button"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="borderlessButtonStyle"
        style="?android:attr/borderlessButtonStyle"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableRight="@android:drawable/ic_dialog_info"
        android:text="Normal Button with drawable"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="borderlessButtonStyle with drawable"
        android:drawableRight="@android:drawable/ic_dialog_info"
        style="?android:attr/borderlessButtonStyle"/>
    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_info"/>
    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="borderlessButtonStyle"
        android:src="@android:drawable/ic_dialog_info"
        style="?android:attr/borderlessButtonStyle"/>
</LinearLayout>


Sunday, September 13, 2015

Android pre-defined Button style - buttonStyle, borderlessButtonStyle, buttonStyleToggle and buttonStyleInset


Some example of pre-defined Button style, include buttonStyle, borderlessButtonStyle, buttonStyleToggle and buttonStyleInset.


<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:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="buttonStyle: Normal Button style"
        style="?android:attr/buttonStyle"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="borderlessButtonStyle: Style for buttons without an explicit border"
        style="?android:attr/borderlessButtonStyle"/>

    <ToggleButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textOn="ON - buttonStyleToggle: ToggleButton style"
        android:textOff="OFF - buttonStyleToggle: ToggleButton style"
        style="?android:attr/buttonStyleToggle"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="buttonStyleInset: Button style to inset into an EditText"
        style="?android:attr/buttonStyleInset"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button android:id="@+id/id_EditText_Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="OK"
            style="?android:attr/buttonStyleInset"/>
        <EditText
            android:id="@+id/id_EditText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/id_EditText_Button"
            android:layout_alignBottom="@+id/id_EditText_Button"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@id/id_EditText_Button"
            android:singleLine="true"
            android:hint="Enter Something" />

    </RelativeLayout>

</LinearLayout>




Related:
- Custom Color Button

Saturday, September 12, 2015

Create custom color button, in Android Studio


To create custom buton, create a XML file under drawable folder.


drawable/colorbutton.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <gradient
                android:angle="90"
                android:endColor="#000050"
                android:startColor="#0000E0" />
            <stroke
                android:width="3dp"
                android:color="#303030" />
            <corners
                android:radius="10dp" />
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>

    <item android:state_focused="true">
        <shape>
            <gradient
                android:angle="270"
                android:endColor="#500000"
                android:startColor="#E00000" />
            <stroke
                android:width="3dp"
                android:color="#303030" />
            <corners
                android:radius="10dp" />
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient
                android:angle="270"
                android:endColor="#005050"
                android:startColor="#00E0E0" />
            <stroke
                android:width="3dp"
                android:color="#303030" />
            <corners
                android:radius="10dp" />
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
</selector>

Use it in layout file, layout/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:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color Button"
        android:background="@drawable/colorbutton"
        android:textColor="@android:color/white"/>

</LinearLayout>



How to do it in Android Studio:




Related:
- Android pre-defined Button style - buttonStyle, borderlessButtonStyle, buttonStyleToggle and buttonStyleInset

Wednesday, June 11, 2014

Set opacity/alpha of Button or drawable

Example to change opacity/alpha of Button or its CompoundDrawables, also show how to display CompoundDrawables on Button programmatically.


Example code:

MainActivity.java
package com.example.androidsetimageopacity;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;

public class MainActivity extends Activity {
 
 SeekBar barOpacityButton;
 SeekBar barOpacityDrawableLeft, barOpacityDrawableTop, 
   barOpacityDrawableRight, barOpacityDrawableBottom;
 Button button;
 
 Drawable drawableLeft, drawableTop, drawableRight, drawableBottom;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  drawableLeft = getResources()
    .getDrawable(android.R.drawable.ic_menu_call);
  drawableTop = getResources()
    .getDrawable(android.R.drawable.ic_menu_agenda);
  drawableRight = getResources()
    .getDrawable(android.R.drawable.ic_menu_compass);
  drawableBottom = getResources()
    .getDrawable(android.R.drawable.ic_menu_camera);

  button = (Button)findViewById(R.id.button);
  
  //display CompoundDrawables on Button programmatically
  button.setCompoundDrawablesWithIntrinsicBounds(
   drawableLeft, drawableTop, drawableRight, drawableBottom);
  
  barOpacityButton = 
    (SeekBar)findViewById(R.id.opacitybutton);
  barOpacityDrawableLeft = 
    (SeekBar)findViewById(R.id.opacitydrawableleft);
  barOpacityDrawableTop = 
    (SeekBar)findViewById(R.id.opacitydrawabletop);
  barOpacityDrawableRight = 
    (SeekBar)findViewById(R.id.opacitydrawableright);
  barOpacityDrawableBottom = 
    (SeekBar)findViewById(R.id.opacitydrawablebottom);

  barOpacityButton.setOnSeekBarChangeListener(
    barOpacityButtonOnSeekBarChangeListener);
  
  barOpacityDrawableLeft.setOnSeekBarChangeListener(
    barOpacityDrawableOnSeekBarChangeListener);
  barOpacityDrawableTop.setOnSeekBarChangeListener(
    barOpacityDrawableOnSeekBarChangeListener);
  barOpacityDrawableRight.setOnSeekBarChangeListener(
    barOpacityDrawableOnSeekBarChangeListener);
  barOpacityDrawableBottom.setOnSeekBarChangeListener(
    barOpacityDrawableOnSeekBarChangeListener);
 }
 
 OnSeekBarChangeListener barOpacityButtonOnSeekBarChangeListener =
  new OnSeekBarChangeListener(){

   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) {
    float alpha = (float)progress/(float)seekBar.getMax();
    button.setAlpha(alpha); //for API Level 11+
   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {}

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {}
   
 };
 
 OnSeekBarChangeListener barOpacityDrawableOnSeekBarChangeListener =
  new OnSeekBarChangeListener(){
  
   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) {

    drawableLeft.setAlpha(
      barOpacityDrawableLeft.getProgress());
    drawableTop.setAlpha(
      barOpacityDrawableTop.getProgress());
    drawableRight.setAlpha(
      barOpacityDrawableRight.getProgress());
    drawableBottom.setAlpha(
      barOpacityDrawableBottom.getProgress());

   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {}

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {}
    
 };

}

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />
    
    <SeekBar
        android:id="@+id/opacitybutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="100"/>
    <SeekBar
        android:id="@+id/opacitydrawableleft"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"/>
    <SeekBar
        android:id="@+id/opacitydrawabletop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"/>
    <SeekBar
        android:id="@+id/opacitydrawableright"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"/>
    <SeekBar
        android:id="@+id/opacitydrawablebottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"/>
    <TextView
        android:id="@+id/opacitysetting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Opacity Button"/>

</LinearLayout>