Android uses floating windows to prompt users to operate _android

Last time we realized the use of Viewpager to implement a functional introduction to new users, today we will show the use of floating window to operate the user Guide. Look at the effect chart first.

Although the interface is ugly, but you can see that we can still achieve the user to do better operation tips, the following describes how to achieve this effect.

Integrated environment

This project, I am using tourguide Open source project, can go directly to the GitHub address for learning and downloading, here we simply introduce how to use him to achieve the guiding effect of the floating interface. The first is to add a reference:
Add the following dependencies to your Gradle file, and then click Sync to add dependencies to your project to use directly.

repositories {
 mavencentral ()
 maven () {
  url "https://oss.sonatype.org/content/repositories/snapshots"
 }
}
Compile (' Com.github.worker8:tourguide:1.0.17-snapshot@aar ') {
 transitive=true
}

Easiest to use.

Button button = (button) Findviewbyid (R.id.button);
Tourguide Mtourguidehandler = Tourguide.init (This). with (TourGuide.Technique.Click)
   . Setpointer (new pointer ())
   . SetToolTip (New ToolTip (). Settitle ("welcome!"). SetDescription ("Click on Get started to begin ..."))
   . Setoverlay (New Overlay ())
   . Playon (button);

With these lines of code, you can achieve a boot effect. The following is a brief introduction to the parameters:

* Setpointer ()-set indicator on how to change the appearance (the white dot in the image that prompts the user to click), refer to My code, and if you do not want to pointer, you can pass in null directly.
* SetToolTip-Set the content of the hint, about how to change its style, refer to the code behind me, if you do not want to ToolTip, you can pass in NULL.
* Setoverlay-Sets the overlay style, about if you change its style, refer to my later code, if you do not want to be able to pass in null.
* with-current use is TourGuide.Technique.Click, can be removed later.
* Mtourguidehandler-Returns the handler type, the user removes the hint information.

Custom hint Style

Custom ToolTip style, the annotation in the code is more detailed, should be able to read.

 Button button = (button) Findviewbyid (r.id.id_but);
  Sets the animation effect of the text Animation Animation = new Translateanimation (0f, 0f, 200f, 0f);/Translate animation animation.setduration (1000);//time interval

  Animation.setfillafter (TRUE);/set the position at which the animation is completed Animation.setinterpolator (new Bounceinterpolator ());//Set the rate at which the animation changes ToolTip ToolTip = new ToolTip ()//sets the style of the text hint. Settitle ("Welcome to use")/set the title. SetDescription ("Here's how to use the ...") Set the content hint. SetTextColor (Color.parsecolor ("#bdc3c7"))/Set the font color. SetBackgroundColor (Color.parsecolor ("#e74c3c"))// Sets the background color. Setshadow (TRUE)//sets whether there is a shadow effect. Setgravity (gravity.center)/set relative to the parent layout location. Setenteranimation (animation);//Set animation
    Effect MTourGuideHandler1 = Tourguide.init (This). with (TourGuide.Technique.Click). Setpointer (new pointer ())//Hint point button . SetToolTip (TOOLTIP)/Set the content of the hint. Setoverlay (new Overlay ())//Set overlay effect. Playon (button);//Set Bound control Button.setonclickli Stener (New View.onclicklistener () {@Override public void OnClick (View v) {mtourguidehandler1.cleanup ();//Turn off the Boot Interface Initsecondebutton ();

 }
  });

Custom overlay and pointer styles.

{
  pointer pointer = new
    pointer (). SetColor (color.red)/Set the color of the indicator
    . setgravity (Gravity.bottom);// Sets the indicator for the location of the parent container

  Overlay Overlay = new Overlay ()
    . SetBackgroundColor (Color.parsecolor ("#AAFF0000"))/Set the color of the overlay
    . Disableclick (TRUE)//settings cannot be clicked
    . SetStyle (Overlay.Style.Rectangle);//Set style

  button bu2 = (button) Findviewbyid (r.id.second_but);
   MTourGuideHandler2 = Tourguide.init (This). with (TourGuide.Technique.Click)
     . Setpointer (pointer)
     . SetToolTip (New ToolTip (). Settitle ("click him"). SetDescription ("We keep going down ..."). Setoverlay (
     Overlay)
     . Playon ( BU2);
  Bu2.setonclicklistener (New View.onclicklistener () {
   @Override public
   void OnClick (View v) {
    Mtourguidehandler2.cleanup ();}}
  );
 

Believe that the code has been commented more clearly.
Finally, copy the code for the entire project.

Package Students.userfloatdemo;
Import Android.graphics.Color;
Import Android.os.Bundle;
Import android.support.v7.app.AppCompatActivity;
Import android.view.Gravity;
Import Android.view.View;
Import android.view.animation.Animation;
Import Android.view.animation.BounceInterpolator;
Import android.view.animation.TranslateAnimation;

Import Android.widget.Button;
Import Tourguide.tourguide.Overlay;
Import Tourguide.tourguide.Pointer;
Import Tourguide.tourguide.ToolTip;

Import Tourguide.tourguide.TourGuide;
 public class Mainactivity extends Appcompatactivity {private tourguide mTourGuideHandler1;



 Private Tourguide MTourGuideHandler2;
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);


  Setcontentview (R.layout.activity_main);


 Initfisrtbutton (); The private void Initsecondebutton () {pointer pointer = new pointer (). SetColor (color.red)//second button sets the color of the indicator. Setgravity (Gravity.bottom);//Set the indicator for the location of the parent container Overlay oveRlay = new Overlay (). SetBackgroundColor (Color.parsecolor ("#AAFF0000"))/Set the color of the overlay. Disableclick (TRUE)//settings cannot be clicked
   . SetStyle (Overlay.Style.Rectangle);//Set the style of the overlay button BU2 = (Button) Findviewbyid (r.id.second_but); MTourGuideHandler2 = Tourguide.init (This). with (TourGuide.Technique.Click). Setpointer (pointer). SetToolTip (New T
  Ooltip (). Settitle ("Click on him"). SetDescription ("We keep going down ..."). Setoverlay (overlay). Playon (BU2); Bu2.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (View v) {mtourguidehandler2.c
   Leanup ();
 }
  });


  private void Initfisrtbutton () {button button = (button) Findviewbyid (r.id.id_but);
  Sets the animation effect of the text Animation Animation = new Translateanimation (0f, 0f, 200f, 0f);/Translate animation animation.setduration (1000);//time interval

  Animation.setfillafter (TRUE);/set the position at which the animation is completed Animation.setinterpolator (new Bounceinterpolator ());//Set the rate at which the animation changes
  ToolTip ToolTip = new ToolTip ()//sets the style of the text hint. Settitle ("Welcome to use")/Set Title  . SetDescription ("Here's how to use the ...") Set the content hint. SetTextColor (Color.parsecolor ("#bdc3c7"))/Set the font color. SetBackgroundColor (Color.parsecolor ("#e74c3c"))// Sets the background color. Setshadow (TRUE)//sets whether there is a shadow effect. Setgravity (gravity.center)/set relative to the parent layout location. Setenteranimation (animation);//Set animation
    Effect MTourGuideHandler1 = Tourguide.init (This). with (TourGuide.Technique.Click). Setpointer (new pointer ())//Hint point button . SetToolTip (TOOLTIP)/Set the content of the hint. Setoverlay (new Overlay ())//Set overlay effect. Playon (button);//Set Bound control Button.setonclickli Stener (New View.onclicklistener () {@Override public void OnClick (View v) {mtourguidehandler1.cleanup ();//Close the boot boundary
   Face Initsecondebutton ();

 }
  });

 }


}

Code in the XML file

<?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: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= "students.userfloatdemo.MainActivity" >

 <button
  android:id= "@+id/id_but"
  android:layout_width= "wrap_content"
  android:layout_height= "wrap_content"
  android:text= "first step"
 />
 <button
  android:layout_width= "wrap_content"
  android:layout_height= "Wrap_content"
  android:text= "The second step"
 android:id= "@+id/second_but"/>
</LinearLayout>

Finally, the last, the source: https://github.com/Reoger/StartUITest

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.