Reveal Animation And Ripple Effect in Android Studio.
Creating New Project.
Open android studio and create a new project.
File => New => New Project => Configure your new project => Select the form factor yours app will run on => Add an Activity to Mobile => Customize the Activity => Finish.
First we need to add Library to our project.
compile 'com.android.support:design:25.3.1'
Create Xml file in project.
Open => app => res => layout - activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/app_bar" />
<LinearLayout
android:id="@+id/layView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:background="#b3e5fc"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/one"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="One" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/two"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Two" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/three"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Three" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/four"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Four" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/five"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Five" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/six"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Six" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@android:color/black" />
</LinearLayout>
</FrameLayout>
Create Xml file in project.
Open => app => res => layout - app_bar.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
Create the Java file in project.
Open app => main => src = MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.support.design.widget.Snackbar;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
Toolbar toolbar;
boolean hidden = true;
LinearLayout viewLinearLayout;
ImageButton oneImageButton, twoImageButton, threeImageButton, fourImageButton, fiveImageButton, sixImageButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
viewLinearLayout = (LinearLayout) findViewById(R.id.layView);
oneImageButton = (ImageButton) findViewById(R.id.one);
twoImageButton = (ImageButton) findViewById(R.id.two);
threeImageButton = (ImageButton) findViewById(R.id.three);
fourImageButton = (ImageButton) findViewById(R.id.four);
fiveImageButton = (ImageButton) findViewById(R.id.five);
sixImageButton = (ImageButton) findViewById(R.id.six);
//Using the click event here...
oneImageButton.setOnClickListener(this);
twoImageButton.setOnClickListener(this);
threeImageButton.setOnClickListener(this);
fourImageButton.setOnClickListener(this);
fiveImageButton.setOnClickListener(this);
sixImageButton.setOnClickListener(this);
setSupportActionBar(toolbar);
viewLinearLayout.setVisibility(View.INVISIBLE);
}
// Using the click even here...
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.one:
Snackbar.make(v, "One Clicked", Snackbar.LENGTH_SHORT).show();
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.two:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.three:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.four:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.five:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.six:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.attachment) {// attachment icon click event
// finding X and Y co-ordinates
int cx = (viewLinearLayout.getLeft() + viewLinearLayout.getRight());
int cy = (viewLinearLayout.getTop());
// to find radius when icon is tapped for showing layout
int startradius = 0;
int endradius = Math.max(viewLinearLayout.getWidth(), viewLinearLayout.getHeight());
// performing circular reveal when icon will be tapped
Animator animator = ViewAnimationUtils.createCircularReveal(viewLinearLayout, cx, cy, startradius, endradius);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(400);
//reverse animation
// to find radius when icon is tapped again for hiding layout
// starting radius will be the radius or the extent to which circular reveal animation is to be shown
int reverse_startradius = Math.max(viewLinearLayout.getWidth(), viewLinearLayout.getHeight());
//endradius will be zero
int reverse_endradius = 0;
// performing circular reveal for reverse animation
Animator animate = ViewAnimationUtils.createCircularReveal(viewLinearLayout, cx, cy, reverse_startradius, reverse_endradius);
if (hidden) {
// to show the layout when icon is tapped
viewLinearLayout.setVisibility(View.VISIBLE);
animator.start();
hidden = false;
} else {
viewLinearLayout.setVisibility(View.VISIBLE);
// to hide layout on animation end
animate.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
}
});
animate.start();
}
return true;
}
return super.onOptionsItemSelected(item);
}
}
May this code help you. Thanks!!!!!!
Screen Shot:-
Creating New Project.
Open android studio and create a new project.
File => New => New Project => Configure your new project => Select the form factor yours app will run on => Add an Activity to Mobile => Customize the Activity => Finish.
First we need to add Library to our project.
compile 'com.android.support:design:25.3.1'
Create Xml file in project.
Open => app => res => layout - activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/app_bar" />
<LinearLayout
android:id="@+id/layView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:background="#b3e5fc"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/one"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="One" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/two"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Two" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/three"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Three" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/four"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Four" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/five"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Five" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/six"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Six" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@android:color/black" />
</LinearLayout>
</FrameLayout>
Create Xml file in project.
Open => app => res => layout - app_bar.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
Create the Java file in project.
Open app => main => src = MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.support.design.widget.Snackbar;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
Toolbar toolbar;
boolean hidden = true;
LinearLayout viewLinearLayout;
ImageButton oneImageButton, twoImageButton, threeImageButton, fourImageButton, fiveImageButton, sixImageButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
viewLinearLayout = (LinearLayout) findViewById(R.id.layView);
oneImageButton = (ImageButton) findViewById(R.id.one);
twoImageButton = (ImageButton) findViewById(R.id.two);
threeImageButton = (ImageButton) findViewById(R.id.three);
fourImageButton = (ImageButton) findViewById(R.id.four);
fiveImageButton = (ImageButton) findViewById(R.id.five);
sixImageButton = (ImageButton) findViewById(R.id.six);
//Using the click event here...
oneImageButton.setOnClickListener(this);
twoImageButton.setOnClickListener(this);
threeImageButton.setOnClickListener(this);
fourImageButton.setOnClickListener(this);
fiveImageButton.setOnClickListener(this);
sixImageButton.setOnClickListener(this);
setSupportActionBar(toolbar);
viewLinearLayout.setVisibility(View.INVISIBLE);
}
// Using the click even here...
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.one:
Snackbar.make(v, "One Clicked", Snackbar.LENGTH_SHORT).show();
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.two:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.three:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.four:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.five:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
case R.id.six:
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
break;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.attachment) {// attachment icon click event
// finding X and Y co-ordinates
int cx = (viewLinearLayout.getLeft() + viewLinearLayout.getRight());
int cy = (viewLinearLayout.getTop());
// to find radius when icon is tapped for showing layout
int startradius = 0;
int endradius = Math.max(viewLinearLayout.getWidth(), viewLinearLayout.getHeight());
// performing circular reveal when icon will be tapped
Animator animator = ViewAnimationUtils.createCircularReveal(viewLinearLayout, cx, cy, startradius, endradius);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(400);
//reverse animation
// to find radius when icon is tapped again for hiding layout
// starting radius will be the radius or the extent to which circular reveal animation is to be shown
int reverse_startradius = Math.max(viewLinearLayout.getWidth(), viewLinearLayout.getHeight());
//endradius will be zero
int reverse_endradius = 0;
// performing circular reveal for reverse animation
Animator animate = ViewAnimationUtils.createCircularReveal(viewLinearLayout, cx, cy, reverse_startradius, reverse_endradius);
if (hidden) {
// to show the layout when icon is tapped
viewLinearLayout.setVisibility(View.VISIBLE);
animator.start();
hidden = false;
} else {
viewLinearLayout.setVisibility(View.VISIBLE);
// to hide layout on animation end
animate.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
viewLinearLayout.setVisibility(View.INVISIBLE);
hidden = true;
}
});
animate.start();
}
return true;
}
return super.onOptionsItemSelected(item);
}
}
May this code help you. Thanks!!!!!!
Screen Shot:-
 |
No comments:
Post a Comment