ImageButton Click on Change Background Image

step 1:
<ImageButton    
android:id="@+id/alarm"    
android:layout_width="25dp"    
android:layout_height="25dp"    
android:background="@drawable/alarm_on" />
step 2:
public class MainActivity extends AppCompatActivity {
ImageButton alarm;
int a;
@Overrideprotected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_remainter);

alarm= (ImageButton)findViewById(R.id.alarm);
View.OnClickListener imgButtonHandler = new View.OnClickListener() {

    public void onClick(View v) {
       boolean clicked = true;
public void onClick(View v) {
    if(!clicked){
        b1.setBackgroundColor(Color.RED);
        clicked = true;

        //here i will update the database
    }else{
        b1.setBackgroundColor(Color.BLUE);
        clicked = false;
        //here i will update the database    }
}
};alarm.setOnClickListener(imgButtonHandler);

Small Layout in whats app style

step 1:

activity_main.xml
    <FrameLayout
android:layout_width="match_parent"        
android:layout_height="match_parent"        
android:orientation="horizontal"        
android:layout_weight="1.1">
        <ImageView            
android:id="@+id/image_gallary"            
android:layout_width="40dp"            
android:layout_height="40dp"            
android:layout_gravity="center"            
android:layout_marginLeft="10dp"            
android:background="@drawable/folder"/>

<LinearLayout    

android:layout_width="290dp"    

android:id="@+id/visible"    

android:orientation="horizontal"    

android:layout_gravity="bottom"    

android:layout_marginLeft="20dp"   

android:visibility="gone"    

android:gravity="center"    

android:background="@drawable/visible_style"    

android:layout_height="80dp">
    <View        

android:layout_width="10dp"        

android:layout_height="match_parent"/>
    <LinearLayout        

android:layout_width="wrap_content"        

android:layout_height="wrap_content"        

android:orientation="vertical">

       <ImageView           

android:id="@+id/call"           

android:layout_width="40dp"           

android:layout_height="40dp"           

android:layout_weight="1"           

android:background="@drawable/galary"           />
    <TextView        

android:layout_width="wrap_content"        

android:layout_height="wrap_content"        

android:textColor="@android:color/black"        

android:text="Gallary"        

android:layout_gravity="center"        

android:textSize="13dp"/></LinearLayout>
    <View        

android:layout_width="20dp"        

android:layout_height="match_parent"/>
<LinearLayout    

android:layout_width="wrap_content"    

android:layout_height="wrap_content"    

android:orientation="vertical">
       <ImageView           

android:id="@+id/music"           

android:layout_width="40dp"           

android:layout_height="40dp"           

android:layout_weight="1"           

android:background="@drawable/music"/>
    <TextView        

android:layout_width="wrap_content"        

android:layout_height="wrap_content"        

android:textColor="@android:color/black"        

android:text="Music"        

android:textSize="13dp"        

android:layout_gravity="center"/>
</LinearLayout>
    <View        

android:layout_width="20dp"        

android:layout_height="match_parent"/>
    <LinearLayout        

android:layout_width="wrap_content"        

android:layout_height="wrap_content"        

android:orientation="vertical">
        <ImageView            

android:id="@+id/document"            

android:layout_gravity="center"            

android:layout_width="40dp"            

android:layout_height="40dp"            

android:layout_weight="1"            

android:background="@drawable/document"            />
        <TextView            

android:layout_width="wrap_content"            

android:layout_height="wrap_content"            

android:textColor="@android:color/black"            

android:text="Document"            

android:layout_gravity="center"            

android:textSize="13dp"/></LinearLayout>
    <View        

android:layout_width="20dp"        

android:layout_height="match_parent"/>
    <LinearLayout        

android:layout_width="wrap_content"        

android:layout_height="wrap_content"        

android:orientation="vertical">
        <ImageView            

android:id="@+id/Locate"            

android:layout_width="40dp"            

android:layout_height="40dp"            

android:layout_weight="1"            

android:background="@drawable/locate"            />
        <TextView            

android:layout_width="wrap_content"            

android:layout_height="wrap_content"            

android:textColor="@android:color/black"            

android:text="Locate"            

android:layout_gravity="center"            

android:textSize="13dp"/>
    </LinearLayout>   </FrameLayout>

step 2:

MainActivity.java

public class MainActivity extends AppCompatActivity {
   
  int a;
    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_message);
     
    final ImageView imageView=(ImageView)findViewById(R.id.image_gallary);
      final LinearLayout l=(LinearLayout)findViewById(R.id.visible);

imageView.setOnClickListener(new View.OnClickListener() {

    @Override    public void onClick(View v) {
        if (a==1){
           l.setVisibility(View.VISIBLE);
            a--;
        }
        else {
            l.setVisibility(View.INVISIBLE);
            a++;
        }
    }
});

Circle Reveal on Whats app style

step 1:

repositories {
    maven {
        url "https://jitpack.io"    }
}

step 2:
res/toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar    3

xmlns:android="http://schemas.android.com/apk/res/android"    

xmlns:app="http://schemas.android.com/apk/res-auto"    

android:id="@+id/toolbar"    

android:layout_width="match_parent"    

android:layout_height="?attr/actionBarSize"    

android:background="?attr/colorPrimary"
app:theme="@style/NoActionBarTheme" />

step 3:

res/media_attach_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout    
xmlns:android="http://schemas.android.com/apk/res/android"    
android:id="@+id/reveal_items"    
android:layout_width="match_parent"    
android:layout_height="wrap_content"    
android:orientation="vertical">

    <!--row 1 -->
    <LinearLayout        
android:layout_width="match_parent"        
android:layout_height="wrap_content"        
android:background="#F0EFED"        
android:orientation="horizontal"        
android:padding="16dp">

        <!--Gallery Icon -->        
<LinearLayout            
android:layout_width="0dp"            
android:layout_height="wrap_content"            
android:layout_weight="1"            
android:gravity="center"            
android:orientation="vertical">

            <ImageButton                
android:id="@+id/gallery_img_btn"                
android:layout_width="70dp"                
android:layout_height="70dp"                
android:background="@android:drawable/ic_menu_gallery" />

            <TextView                
android:layout_width="wrap_content"                
android:layout_height="wrap_content"                
android:layout_marginTop="16dp"                
android:text="Gallery" />
        </LinearLayout>

        <!--Photo Icon -->        
<LinearLayout            
android:layout_width="0dp"            
android:layout_height="wrap_content"            
android:layout_weight="1"            
android:gravity="center"            
android:orientation="vertical">

            <ImageButton                
android:id="@+id/photo_img_btn"                
android:layout_width="70dp"                
android:layout_height="70dp"                
android:background="@android:drawable/ic_popup_reminder" />

            <TextView                
android:layout_width="wrap_content"                
android:layout_height="wrap_content"                
android:layout_marginTop="16dp"                
android:text="Photo" />
        </LinearLayout>

        <!--Video Icon -->        
<LinearLayout            
android:layout_width="0dp"            
android:layout_height="wrap_content"            
android:layout_weight="1"            
android:gravity="center"            
android:orientation="vertical">

            <ImageButton                
android:id="@+id/video_img_btn"                
android:layout_width="70dp"                
android:layout_height="70dp"                
android:background="@android:drawable/btn_star" />

            <TextView                
android:layout_width="wrap_content"                
android:layout_height="wrap_content"                
android:layout_marginTop="16dp"                
android:text="Video" />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>
step 4:
res/activity_main.xml
<FrameLayout
    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:background="@color/colorAccent"    >

    <include layout="@layout/toolbar" />

    <FrameLayout
        android:layout_width="match_parent"        
android:layout_height="match_parent"        
android:layout_marginTop="?attr/actionBarSize">

        <io.codetail.widget.RevealFrameLayout            
android:layout_width="match_parent"            
android:layout_height="wrap_content">

            <include layout="@layout/media_attach_menu" />

        </io.codetail.widget.RevealFrameLayout>

    </FrameLayout>

</FrameLayout>
step 5:
res/menu/main_menu.xml
<menu 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"    
tools:context=".MainActivity">
    <item        
android:id="@+id/action_settings"        
android:orderInCategory="100"        
android:title="@string/action_settings"        
app:showAsAction="never" />
    <item        android:id="@+id/action_clip"        
android:icon="@android:drawable/ic_menu_slideshow"        
android:title="Media"        
app:showAsAction="ifRoom" />
</menu>
step 6:
res/values/string.xml
<resources>
    <string name="app_name">CircularReveal</string>
    <string name="action_settings">settingd</string>

</resources>
step 7:
res/values/style.xml
<style name="NoActionBarTheme" parent="Theme.AppCompat.Light.NoActionBar"> </style>
step 8:
MainActivity.java
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import io.codetail.animation.SupportAnimator;
import io.codetail.animation.ViewAnimationUtils;


public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private LinearLayout mRevealView;
    private boolean hidden = true;
    private ImageButton gallery_btn, photo_btn, video_btn;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


        mRevealView = (LinearLayout) findViewById(R.id.reveal_items);
        mRevealView.setVisibility(View.GONE);

        gallery_btn = (ImageButton) findViewById(R.id.gallery_img_btn);
        photo_btn = (ImageButton) findViewById(R.id.photo_img_btn);
        video_btn = (ImageButton) findViewById(R.id.video_img_btn);


        gallery_btn.setOnClickListener(this);
        photo_btn.setOnClickListener(this);
        video_btn.setOnClickListener(this);

    }

    @Override    public void onClick(View v) {

        hideRevealView();
        switch (v.getId()) {

            case R.id.gallery_img_btn:

                break;
            case R.id.photo_img_btn:

                break;
            case R.id.video_img_btn:

                break;

        }
    }

    private void hideRevealView() {
        if (mRevealView.getVisibility() == View.VISIBLE) {
            mRevealView.setVisibility(View.GONE);
            hidden = true;
        }
    }

        @Override        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.main_menu, menu);
            return true;

        }

    @Override    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {

            case R.id.action_clip:

       int cx = (mRevealView.getLeft() + mRevealView.getRight());
       int cy = mRevealView.getTop();
       int radius = Math.max(mRevealView.getWidth(), mRevealView.getHeight());

                //Below Android LOLIPOP Version                
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {


         SupportAnimator animator =ViewAnimationUtils.createCircularReveal(mRevealView,cx,cy,0,radius);
            
          animator.setInterpolator(new AccelerateDecelerateInterpolator());
                   
           animator.setDuration(700);

                    
           SupportAnimator animator_reverse = animator.reverse();

                    if (hidden) {
                        mRevealView.setVisibility(View.VISIBLE);
                        animator.start();
                        hidden = false;
                    } else {
   animator_reverse.addListener(new SupportAnimator.AnimatorListener() {
                            
@Override                            
public void onAnimationStart() {

                            }

 @Override                           
 public void onAnimationEnd() {
                                
mRevealView.setVisibility(View.INVISIBLE);
                               
hidden = true;  }
@Override                            
public void onAnimationCancel() {

            }

 @Override                           
 public void onAnimationRepeat() {

                            }
    });
                        
        animator_reverse.start();
                    }
                }
                // Android LOLIPOP And ABOVE Version               
         else {
                      
        if (hidden) {
                       
        Animator anim = android.view.ViewAnimationUtils.
                                
       createCircularReveal(mRevealView, cx, cy, 0, radius);
                        
        mRevealView.setVisibility(View.VISIBLE);
                       
        anim.start();
                       
        hidden = false;
                    
        } else {
                        
         Animator anim = android.view.ViewAnimationUtils.
                               
        createCircularReveal(mRevealView, cx, cy, radius, 0);
                       
        anim.addListener(new AnimatorListenerAdapter() {
                            
        @Override                           
        public void onAnimationEnd(Animator animation) {
                               
        super.onAnimationEnd(animation);
                               
        mRevealView.setVisibility(View.INVISIBLE);
                                
         hidden = true;
                          
       }
                       
        });
                       
        anim.start();
                     
        }
               
        }        
        return true;
 
        case android.R.id.home:
                
       supportFinishAfterTransition();
              
       return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Simple Dialog box

step 1:
dialog.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    

android:layout_width="match_parent"    

android:layout_height="match_parent"    

android:background="#eee7dd"    

android:layout_gravity="center"    

android:gravity="center"    

android:orientation="horizontal" >

    <LinearLayout        

android:layout_width="wrap_content"        

android:layout_height="wrap_content"        

android:layout_gravity="center"        

android:gravity="center"        

android:orientation="vertical">

    <ImageView        

android:layout_width="50dp"        

android:layout_height="50dp"        

android:background="@drawable/call"/>
        <View            

android:layout_width="match_parent"            

android:layout_height="5dp"/>
        <TextView            

android:layout_width="wrap_content"            

android:layout_height="wrap_content"            

android:text="Call"            

android:textColor="@android:color/black"            

android:textSize="15dp"/></LinearLayout>
    <View        

android:layout_width="20dp"        

android:layout_height="match_parent"/>
    <LinearLayout        

android:layout_width="wrap_content"        

android:layout_gravity="center"        

android:gravity="center"        

android:layout_height="wrap_content"        

android:orientation="vertical">

        <ImageView            

android:layout_width="50dp"            

android:layout_height="50dp"            

android:background="@drawable/chat_message"/>
        <View            

android:layout_width="match_parent"            

android:layout_height="5dp"/>
        <TextView            

android:layout_width="wrap_content"            

android:layout_height="wrap_content"            

android:text="Message"            

android:textColor="@android:color/black"            

android:textSize="15dp"/></LinearLayout>
    <View        

android:layout_width="20dp"        

android:layout_height="match_parent"/>
    <LinearLayout        

android:layout_width="wrap_content"        

android:layout_gravity="center"        

android:gravity="center"        

android:layout_height="wrap_content"        

android:orientation="vertical">

        <ImageView            

android:layout_width="50dp"            

android:layout_height="50dp"            

android:background="@drawable/whats_app"/>
        <View            

android:layout_width="match_parent"            

android:layout_height="5dp"/>
        <TextView            

android:layout_width="wrap_content"            

android:layout_height="wrap_content"            

android:text="WhatsApp"            

android:textColor="@android:color/black"            

android:textSize="15dp"/></LinearLayout>
    <View        

android:layout_width="20dp"        

android:layout_height="match_parent"/>
    <LinearLayout        

android:layout_width="wrap_content"        

android:layout_gravity="center"        

android:gravity="center"        

android:layout_height="wrap_content"        

android:orientation="vertical">

        <ImageView            

android:layout_width="50dp"            

android:layout_height="50dp"            

android:background="@drawable/profile_view"/>

        <View            

android:layout_width="match_parent"            

android:layout_height="5dp"/>
        <TextView            

android:layout_width="wrap_content"            

android:layout_height="wrap_content"            

android:text="Profile"            

android:textColor="@android:color/black"            

android:textSize="15dp"/></LinearLayout>
    </LinearLayout>

step 2:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"  
android:layout_width="match_parent"    
android:orientation="vertical"    
android:layout_height="match_parent">
 
            <ImageView                
android:id="@+id/click"                
android:layout_width="30dp"                
android:layout_height="30dp"                
android:layout_gravity="end"                
android:layout_marginRight="10dp"                
android:layout_marginBottom="40dp"                
android:background="@drawable/image"/>
       </LinearLayout>
step 3:
CustomCotactDialog.java
public class CustomContactDialog extends Dialog {
    public Context c;
    public Dialog d;
    public CustomContactDialog(@NonNull Context context) {
        super(context);
        c=context;
    }



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

    }
}
step 4:
DialogActivity.java
public class DialogActivity extends AppCompatActivity {
    Context context;
    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_message);
        final ImageView imageView=(ImageView)findViewById(R.id.click);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                CustomContactDialog customDialog=new CustomContactDialog(context);
                customDialog.show();
            }
        });
    }
}