How to achieve sliding between the left and right sides of the fade button in Android

First, let's look at the running effect:

Program structure:

Code in the MainActivity file:
Copy codeThe Code is as follows: package com. android. buttonpageflipper;
Import android. app. Activity;
Import android. graphics. PixelFormat;
Import android. OS. Bundle;
Import android. OS. Handler;
Import android. OS. Message;
Import android. view. Gravity;
Import android. view. MotionEvent;
Import android. view. View;
Import android. view. WindowManager;
Import android. view. WindowManager. LayoutParams;
Import android. widget. ImageView;
Import android. widget. ViewFlipper;
/**
* Android implements sliding between the left and right sides of the gradient button
* @ Description: The buttons are invisible in the natural state. The buttons are displayed when you touch the screen.
*
* @ FileName: MainActivity. java
*
* @ Package com. android. buttonpageflipper
*
* @ Author Hanyonglu
*
*/
Public class MainActivity extends Activity {
// Declare two buttons, which respectively represent sliding left and right
Private ImageView btnLeft = null;
Private ImageView btnRight = null;

// Set WindowManager
Private WindowManager wm = null;
Private WindowManager. LayoutParams wmParams = null;

// The alpha value of ImageView
Private int mAlpha = 0;
Private boolean isHide;

Private ViewFlipper viewFlipper = null;

/** Called when the activity is first created .*/
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );

SetTitle ("Android implements the sliding effect between the left and right sides of the gradient button ");
ViewFlipper = (ViewFlipper) this. findViewById (R. id. myViewFlipper );

// Initialize the left and right buttons
InitImageButtonView ();
}

/**
* Initialize the floating button
*/
Private void initImageButtonView (){
// Obtain WindowManager
Wm = (WindowManager) getApplicationContext (). getSystemService ("window ");

// Set parameters for LayoutParams
WmParams = new WindowManager. LayoutParams ();

// Set window type
WmParams. type = LayoutParams. TYPE_PHONE;

// Set the image format. The effect is transparent to the background.
WmParams. format = PixelFormat. RGBA_8888;

// Set Window flag Parameters
WmParams. flags = LayoutParams. FLAG_NOT_TOUCH_MODAL
| LayoutParams. FLAG_NOT_FOCUSABLE;
// Set the initial values of x and y
WmParams. x = 0;
WmParams. y = 0;

// Set the window length and width
WmParams. width = 50;
WmParams. height = 50;

// Create left and right buttons
CreateLeftButtonView ();
CreateRightButtonView ();
}

/**
* Set the button on the left
*/
Private void createLeftButtonView (){
BtnLeft = new ImageView (this );
BtnLeft. setImageResource (R. drawable. left );
BtnLeft. setAlpha (0 );

BtnLeft. setOnClickListener (new View. OnClickListener (){
Public void onClick (View arg0 ){
// Previous image
ViewFlipper. setInAnimation (MainActivity. this, R. anim. push_left_in );
ViewFlipper. setOutAnimation (MainActivity. this, R. anim. push_left_out );
ViewFlipper. showPrevious ();
}
});

// Adjust the window
WmParams. gravity = Gravity. LEFT | Gravity. CENTER_VERTICAL;

// Display the image
Wm. addView (btnLeft, wmParams );
}

/**
* Set buttons on the right
*/
Private void createRightButtonView (){
BtnRight = new ImageView (this );
BtnRight. setImageResource (R. drawable. right );
BtnRight. setAlpha (0 );

BtnRight. setOnClickListener (new View. OnClickListener (){
Public void onClick (View arg0 ){
// Next image
ViewFlipper. setInAnimation (MainActivity. this, R. anim. push_right_in );
ViewFlipper. setOutAnimation (MainActivity. this, R. anim. push_right_out );
ViewFlipper. showNext ();
}
});

// Adjust the window
WmParams. gravity = Gravity. RIGHT | Gravity. CENTER_VERTICAL;

// Display the image
Wm. addView (btnRight, wmParams );
}

/**
* Set the gradient effect of the button
*/
Private Handler mHandler = new Handler ()
{
Public void handleMessage (Message msg ){
If (msg. what = 1 & mAlpha <255 ){
// Set the gradient effect of the button by setting the opacity
MAlpha + = 50;

If (malphi> 255)
MAlpha = 255;

BtnLeft. setAlpha (mAlpha );
BtnLeft. invalidate ();
BtnRight. setAlpha (mAlpha );
BtnRight. invalidate ();

If (! IsHide & mAlpha <255)
MHandler. senddemptymessagedelayed (1,100 );
} Else if (msg. what = 0 & mAlpha> 0 ){
MAlpha-= 10;

If (mAlpha <0)
MAlpha = 0;
BtnLeft. setAlpha (mAlpha );
BtnLeft. invalidate ();
BtnRight. setAlpha (mAlpha );
BtnRight. invalidate ();

If (isHide & mAlpha> 0)
MHandler. senddemptymessagedelayed (0,800 );
}
}
};

Private void showImageButtonView (){
IsHide = false;
MHandler. sendEmptyMessage (1 );
}

Private void hideImageButtonView (){
New Thread (){
Public void run (){
Try {
Thread. sleep (1500 );
IsHide = true;
MHandler. sendEmptyMessage (0 );
} Catch (Exception e ){

}
}
}. Start ();
}

@ Override
Public boolean onTouchEvent (MotionEvent event ){
Switch (event. getAction ()){
Case MotionEvent. ACTION_MOVE:
Case MotionEvent. ACTION_DOWN:
ShowImageButtonView ();
Break;
Case MotionEvent. ACTION_UP:
HideImageButtonView ();
Break;
}

Return true;
}
@ Override
Public void onDestroy (){
Super. onDestroy ();
// Destroy window when the program exits (Activity destruction)
Wm. removeView (btnLeft );
Wm. removeView (btnRight );
}
}

Code in the main. xml file:
Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: orientation = "vertical">
<ViewFlipper
Android: id = "@ + id/myViewFlipper"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<! -- The first page -->
<LinearLayout
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: gravity = "center">
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/one"
Android: gravity = "center"/>
</LinearLayout>
<! -- Second page -->
<LinearLayout
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: gravity = "center">
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/two"
Android: gravity = "center"/>
</LinearLayout>
<! -- Third page -->
<LinearLayout
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: gravity = "center">
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/three"
Android: gravity = "center"/>
</LinearLayout>
<! -- Fourth page -->
<LinearLayout
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: gravity = "center">
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/four"
Android: gravity = "center"/>
</LinearLayout>
<! -- Fifth page -->
<LinearLayout
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: gravity = "center">
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/five"
Android: gravity = "center"/>
</LinearLayout>
</ViewFlipper>
</LinearLayout>

Code in the push_left_in.xml file:
Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Translate android: fromXDelta = "100% p" android: toXDelta = "0"
Android: duration = "500"/>
<Alpha android: fromAlpha = "0.1" android: toAlpha = "1.0"
Android: duration = "500"/>
</Set>

Code in the push_left_out.xml file:
Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Translate android: fromXDelta = "0" android: toXDelta = "-100% p"
Android: duration = "500"/>
<Alpha android: fromAlpha = "1.0" android: toAlpha = "0.1"
Android: duration = "500"/>
</Set>

Code in the push_right_in.xml file:
Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Translate android: fromXDelta = "-100% p" android: toXDelta = "0"
Android: duration = "500"/>
<Alpha android: fromAlpha = "0.1" android: toAlpha = "1.0"
Android: duration = "500"/>
</Set>

Code in the push_right_out.xml file:
Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Translate android: fromXDelta = "0" android: toXDelta = "100% p"
Android: duration = "500"/>
<Alpha android: fromAlpha = "1.0" android: toAlpha = "0.1"
Android: duration = "500"/>
</Set>

Finally, do not forget to set permissions in the configuration file.

Download example: Click to download