Saturday, 9 September 2017

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);
    }
}

No comments:

Post a Comment

HOW TO CREATE CIRCLE IMAGE VIEW

Step 1: implementation 'de.hdodenhof:circleimageview:3.0.0' Step 2: <de.hdodenhof.circleimageview.CircleImageView xmlns:ap...