[GUIDE] Holo-themed transparent demo overlays with ShowcaseView

Search This thread
By:
Advanced…
nikwen

nikwen

Senior Member
Feb 1, 2013
3,142
1,597
Berlin, Germany
www.nikwen.de
[GUIDE] Holo-themed transparent demo overlays

Lately I found a great tutorial by @marty331 explaining how to create transparent demo pages on Android.
I really liked his guide. Thanks again. :good:

However, I am no graphics designer. So the pages wouldn't look very good for me.
I did a little research on the internet and found the ShowcaseView library by Alex Curran. It is licensed under an Apache 2.0 License. You can find its source code here.

It is very easy to get stunning, holo-themed results with the library:

example.png

(Source: https://raw.github.com/amlcurran/ShowcaseView/master/example.png)

Demo app

The developer put a demo app on Google Play to showcase what you can do with the library:



Set-up

For the set-up I'll quote the developer:

For people who use Maven, ShowcaseView should work immediately without any issues. If you aren't, you'll need to download the NineOldAndroids library and add it as a dependency library to the ShowcaseView library. Then add ShowcaseView as a library dependency to your project, and you're done!

WARNING: Sometimes Eclipse/IDEA will automatically import the non-NineOldAndroid versions of the animation classes, which will cause crashes on versions of Android below 3.0. Check that your imports start with com.nineoldandroids.animation and not android.animation.
Click to expand...
Click to collapse
(Source: https://github.com/amlcurran/ShowcaseView#set-up)

Showcasing views

Showcasing views is really easy:

Code: 
public class MyActivity extends Activity {

    ShowcaseView sv;

 [user=439709]@override[/user]
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
        co.hideOnClickOutside = true;
        sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, this, R.string.showcase_title, R.string.showcase_message, co);
    }
}

That's it. :)

Showcasing views in Fragments

It is a bit different for Fragments though:

Code: 
public class ShowcaseFragment extends Fragment {

    ShowcaseView sv;

 [user=439709]@override[/user]
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_layout, container);
    }

 [user=439709]@override[/user]
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
        co.hideOnClickOutside = true;
        sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, getActivity(), R.string.showcase_title, R.string.showcase_message, co);
    }
}

To show the ShowcastView setContentView() needs to be called in the Activity first.
So you have to put the code into the onActivityCreated() method.

Setting listerners

You can also add listeners to the ShowcastView:

Code: 
sv.setOnShowcaseEventListener(new ShowcaseView.OnShowcaseEventListener() {
 [user=439709]@override[/user]
    public void onShowcaseViewHide(ShowcaseView showcaseView) {
        //The view is hidden/dismissed
    }

 [user=439709]@override[/user]
    public void onShowcaseViewShow(ShowcaseView showcaseView) {
        //The view is shown
    }
});

Animations

You can also add animations to your app, i.e. a virtual finger performing a gesture.

First you need to showcase the view as above. Then use this method of ShowcaseView:

Code: 
public void animateGesture(float offsetStartX,
                           float offsetStartY,
                           float offsetEndX,
                           float offsetEndY)

All values are relative to the center of the view.

For example this is a swipe upwards, beginning at the center of the view:

Code: 
sv.animateGesture(0, 0, 0, -400);

Showcasing parts of the ActionBar

Another possiblity is to showcase ActionItems:

C7upo-Cx63WFidih9txS-FXpprPd4YtmBim3yLd1YtYIm5m5fLytz-8EQg4qo0QAnw=h900

(Source: https://lh6.ggpht.com/C7upo-Cx63WFidih9txS-FXpprPd4YtmBim3yLd1YtYIm5m5fLytz-8EQg4qo0QAnw=h900)

This is how to do it:

Code: 
 [user=439709]@override[/user]
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu, menu);

    sv = ShowcaseView.insertShowcaseViewWithType(ShowcaseView.ITEM_ACTION_ITEM, R.id.menu_item1, this,
            R.string.showcase_title, R.string.showcase_message, new ShowcaseView.ConfigOptions());

    return super.onCreateOptionsMenu(menu);
}

(Replace "this" by "getActivity()" in a Fragment.)

There are also other things in the ActionBar which can be highlighted. Just replace ITEM_ACTION_ITEM in the example above with the proper constant:

  • ITEM_ACTION_ITEM: An ActionItem
  • ITEM_ACTION_OVERFLOW: The action overflow (The three dots at the right side of the ActionBar which appears if not all items can be shown as icons.)
  • ITEM_TITLE: The title
  • ITEM_ACTION_HOME: HOME arrow in the ActionBar
  • ITEM_SPINNER: A spinner in the ActionBar
Click to expand...
Click to collapse
 
Last edited:
  • Like
Reactions: afraaa, TheCardinal, Saenic and 24 others
nikwen

nikwen

Senior Member
Feb 1, 2013
3,142
1,597
Berlin, Germany
www.nikwen.de
Customization options

The ShowcaseView can be customized using the ShowcaseView.ConfigOptions object you pass to the ShowcaseView.insertShowcaseView() method.

For some strange reason, there are no getter/setter methods for that class. So you can access the fields of that class directly.

This is the basic code for the following code snippets:

Code: 
ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
co.hideOnClickOutside = true;
ShowcaseView sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, this, R.string.showcase_title, R.string.showcase_message, co);

Don't respond to touches outside the showcased area

Code: 
co.hideOnClickOutside = false;
co.block = true;

The field "block" determines whether the app will respond to touches outside the showcased area.

Don't hide the ShowcaseView on touches outside the showcased area

Code: 
co.hideOnClickOutside = false;

The field "hideOnClickOutside" determines whether the view will be hidden when the screen is touched outside the highlighted area.

Set a fade-in or fade-out duration

The proper fields:

Code: 
co.fadeInDuration = 1000;
co.fadeOutDuration = 1000;

Using these fields, you can set the time it will take the ShowcaseView to fade in or out.

Don't overlay the ActionBar

Code: 
co.insert = ShowcaseView.INSERT_TO_VIEW;

This field allows you to determine whether the ShowcaseView will overlay the ActionBar.

Possible values:

  • ShowcaseView.INSERT_TO_DECOR: Will overlay the ActionBar
  • ShowcaseView.INSERT_TO_VIEW: Will just overlay the content, but not the ActionBar
Click to expand...
Click to collapse


Hide the button

Code: 
co.noButton = true;

This field allows you to hide the button of the ShowcaseView.

Show the overlay only once

Code: 
co.shotType = ShowcaseView.TYPE_ONE_SHOT;

This field determines how often the overlay should be shown.

Possible values:

  • ShowcaseView.TYPE_NO_LIMIT: Every time the Activity is opened
  • ShowcaseView.TYPE_ONE_SHOT: Only once
Click to expand...
Click to collapse


Change the circle radius

Use the method setShowcaseIndicatorScale(float scaleMultiplier) of ShowcaseView for that:

Code: 
sv.setShowcaseIndicatorScale(1.5f);



Theming

The ShowcaseView library offers plenty of options to adjust the appearance of the ShowcaseView.

Fortunately, the library allows you to theme the ShowcaseView as a whole.

To theme the appearance of the ShowcaseView you need to create a style derived from either the ShowcaseView or ShowcaseView.Light style:

Code: 
<style name="CustomShowcaseTheme" parent="ShowcaseView.Light">
    <item name="sv_backgroundColor">#33ffbb33</item>
    <item name="sv_buttonBackgroundColor">#CF3119</item>
    <item name="sv_buttonText">Close</item>
    <item name="sv_titleTextAppearance">@style/CustomTitle</item>
    <item name="sv_detailTextAppearance">@style/CustomDetailText</item>
</style>

(Add this to your /res/values/styles.xml file.)

The different options allow you to change the colors of the View and the text of the button.

The text styling is done using TextAppearance styles like this:

Code: 
<style name="CustomTitle" parent="TextAppearance.ShowcaseView.Title">
    <item name="android:textColor">#00801A</item>
</style>

<style name="CustomDetailText" parent="TextAppearance.ShowcaseView.Detail">
    <item name="android:textColor">#00801A</item>
</style>

(Add this to your /res/values/styles.xml file.)

For a lighter theme, use "TextAppearance.ShowcaseView.Title.Light" and "TextAppearance.ShowcaseView.Detail.Light" as parent themes instead.

Then add this to the /res/values/styles.xml file as well:

Code: 
<style name="CustomAppTheme" parent="android:Theme.Light">
    <item name="showcaseViewStyle">@style/CustomShowcaseTheme</item>
</style>

(You might want to replace Theme.Light by another one.)

Furthermore, add this to the /res/values-v14/styles.xml file:

Code: 
<style name="CustomAppTheme" parent="android:Theme.Holo.Light">
    <item name="showcaseViewStyle">@style/CustomShowcaseTheme</item>
</style>

(You might want to replace Theme.Holo.Light by another one.)

The last step is adding this to the <application> tag in your AndroidManifest.xml:

Code: 
<application
    android:theme="@style/CustomAppTheme"
    ... />

You're done. You successfully themed your ShowcaseView. :)

Attributions

  • Big thanks to Alex Curran for the library.
  • I wouldn't have got the idea to write this guide without @marty331's guide. Thank you, Marty.
  • Moreover, I got inspired by the sample folder of the ShowcaseView project.

This was featured on the XDA portal on August 31, 2013. :D
 
Last edited:
  • Like
Reactions: Masrepus, afraaa, Saenic and 10 others
O

out of ideas

Senior Member
Nov 10, 2012
99
31
cool guide, thanks. Nice work on the pull request too.

Question.

does this allow for showcasing an expanded action item(overflow for example), or do you have to showcase the overflow, have the user select it and keep the showcase highlight?
 
  • Like
Reactions: nikwen
nikwen

nikwen

Senior Member
Feb 1, 2013
3,142
1,597
Berlin, Germany
www.nikwen.de
out of ideas said:
cool guide, thanks. Nice work on the pull request too.

Question.

does this allow for showcasing an expanded action item(overflow for example), or do you have to showcase the overflow, have the user select it and keep the showcase highlight?
Click to expand...
Click to collapse

Thanks. :)

Well, I haven't tried that yet. Try it yourself and tell us. ;)
If it does not work, create an issue on Github.
 
Dr.Alexander_Breen

Dr.Alexander_Breen

Senior Member
Jun 17, 2012
439
1,072
So, it does not matter where the view belongs to? Can I use it to showcase a button of a View which was attached to the window by service?
 
nikwen

nikwen

Senior Member
Feb 1, 2013
3,142
1,597
Berlin, Germany
www.nikwen.de
Dr.Alexander_Breen said:
So, it does not matter where the view belongs to? Can I use it to showcase a button of a View which was attached to the window by service?
Click to expand...
Click to collapse

With the current sources you can't. Just have a look at the ShowcaseView class:

Code: 
    public static ShowcaseView insertShowcaseView(View viewToShowcase, Activity activity, int title,
                                                  int detailText, ConfigOptions options) {
        ShowcaseView sv = new ShowcaseView(activity);
        if (options != null)
            sv.setConfigOptions(options);
        if (sv.getConfigOptions().insert == INSERT_TO_DECOR) {
            ((ViewGroup) activity.getWindow().getDecorView()).addView(sv);
        } else {
            ((ViewGroup) activity.findViewById(android.R.id.content)).addView(sv);
        }
        sv.setShowcaseView(viewToShowcase);
        sv.setText(title, detailText);
        return sv;
    }

But you might be able to change the library with not too much effort to make that possible, too. ;)
 
Last edited:
V

vijai2011

Retired Recognized Developer
Oct 24, 2011
1,000
498
Hmmm....I feel time to apply for RC :cool:

Sent from my GT-N7000 using xda app-developers app
 
  • Like
Reactions: nikwen
Akshay (Aky)

Akshay (Aky)

Senior Member
Jul 10, 2012
925
723
Pune
Great tutorial.

Helped a lot.

I had one question, is there any way to use Showcase View in Preferences or Preferences Fragments??

Sent from my GT-I9300 using XDA Premium 4 mobile app
 
  • Like
Reactions: nikwen
nikwen

nikwen

Senior Member
Feb 1, 2013
3,142
1,597
Berlin, Germany
www.nikwen.de
Akshay (Aky) said:
Great tutorial.

Helped a lot.

I had one question, is there any way to use Showcase View in Preferences or Preferences Fragments??

Sent from my GT-I9300 using XDA Premium 4 mobile app
Click to expand...
Click to collapse

Thanks. :)

Well, there is a insertShowcaseView() method you can pass a View to. Try that one. And please report whether it works for you. ;)

If you cannot get it to work, I'll try it at the weekend.
 
  • Like
Reactions: Akshay (Aky)
T

T3K0

Senior Member
Jan 9, 2011
72
6
setTextColors() seems to be gone is there a new way to change them or is it only possible via Theme now?
 
You must log in or register to reply here.

Similar threads

S
What programming language do Android developers use??
Replies
48
Views
218K
Skyica
Skyica
A
[GUIDE] Android Client-Server Communication (PHP-MYSQL REST API)
Replies
112
Views
87K
C
Cooper Bryant
marty331
[GUIDE] Create Transparent Demo pages on Android
Replies
17
Views
11K
cascio97
cascio97
T
[Guide] Accessing all Build.prop values without Root
Replies
19
Views
45K
I
IacobIonut-DW
Quinny899
[GUIDE][IDEAS] Protecting your app from the main piracy circumvention methods
Replies
143
Views
54K
J
jamilshah20

Top Liked Posts

24 Hours All time
  • There are no posts matching your filters.
  • 27
    nikwen
    nikwen
    [GUIDE] Holo-themed transparent demo overlays

    Lately I found a great tutorial by @marty331 explaining how to create transparent demo pages on Android.
    I really liked his guide. Thanks again. :good:

    However, I am no graphics designer. So the pages wouldn't look very good for me.
    I did a little research on the internet and found the ShowcaseView library by Alex Curran. It is licensed under an Apache 2.0 License. You can find its source code here.

    It is very easy to get stunning, holo-themed results with the library:

    example.png

    (Source: https://raw.github.com/amlcurran/ShowcaseView/master/example.png)

    Demo app

    The developer put a demo app on Google Play to showcase what you can do with the library:



    Set-up

    For the set-up I'll quote the developer:

    For people who use Maven, ShowcaseView should work immediately without any issues. If you aren't, you'll need to download the NineOldAndroids library and add it as a dependency library to the ShowcaseView library. Then add ShowcaseView as a library dependency to your project, and you're done!

    WARNING: Sometimes Eclipse/IDEA will automatically import the non-NineOldAndroid versions of the animation classes, which will cause crashes on versions of Android below 3.0. Check that your imports start with com.nineoldandroids.animation and not android.animation.
    Click to expand...
    Click to collapse
    (Source: https://github.com/amlcurran/ShowcaseView#set-up)

    Showcasing views

    Showcasing views is really easy:

    Code: 
    public class MyActivity extends Activity {

    ShowcaseView sv;

 [user=439709]@override[/user]
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
        co.hideOnClickOutside = true;
        sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, this, R.string.showcase_title, R.string.showcase_message, co);
    }
}

    That's it. :)

    Showcasing views in Fragments

    It is a bit different for Fragments though:

    Code: 
    public class ShowcaseFragment extends Fragment {

    ShowcaseView sv;

 [user=439709]@override[/user]
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_layout, container);
    }

 [user=439709]@override[/user]
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
        co.hideOnClickOutside = true;
        sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, getActivity(), R.string.showcase_title, R.string.showcase_message, co);
    }
}

    To show the ShowcastView setContentView() needs to be called in the Activity first.
    So you have to put the code into the onActivityCreated() method.

    Setting listerners

    You can also add listeners to the ShowcastView:

    Code: 
    sv.setOnShowcaseEventListener(new ShowcaseView.OnShowcaseEventListener() {
 [user=439709]@override[/user]
    public void onShowcaseViewHide(ShowcaseView showcaseView) {
        //The view is hidden/dismissed
    }

 [user=439709]@override[/user]
    public void onShowcaseViewShow(ShowcaseView showcaseView) {
        //The view is shown
    }
});

    Animations

    You can also add animations to your app, i.e. a virtual finger performing a gesture.

    First you need to showcase the view as above. Then use this method of ShowcaseView:

    Code: 
    public void animateGesture(float offsetStartX,
                           float offsetStartY,
                           float offsetEndX,
                           float offsetEndY)

    All values are relative to the center of the view.

    For example this is a swipe upwards, beginning at the center of the view:

    Code: 
    sv.animateGesture(0, 0, 0, -400);

    Showcasing parts of the ActionBar

    Another possiblity is to showcase ActionItems:

    C7upo-Cx63WFidih9txS-FXpprPd4YtmBim3yLd1YtYIm5m5fLytz-8EQg4qo0QAnw=h900

    (Source: https://lh6.ggpht.com/C7upo-Cx63WFidih9txS-FXpprPd4YtmBim3yLd1YtYIm5m5fLytz-8EQg4qo0QAnw=h900)

    This is how to do it:

    Code: 
     [user=439709]@override[/user]
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu, menu);

    sv = ShowcaseView.insertShowcaseViewWithType(ShowcaseView.ITEM_ACTION_ITEM, R.id.menu_item1, this,
            R.string.showcase_title, R.string.showcase_message, new ShowcaseView.ConfigOptions());

    return super.onCreateOptionsMenu(menu);
}

    (Replace "this" by "getActivity()" in a Fragment.)

    There are also other things in the ActionBar which can be highlighted. Just replace ITEM_ACTION_ITEM in the example above with the proper constant:

    • ITEM_ACTION_ITEM: An ActionItem
    • ITEM_ACTION_OVERFLOW: The action overflow (The three dots at the right side of the ActionBar which appears if not all items can be shown as icons.)
    • ITEM_TITLE: The title
    • ITEM_ACTION_HOME: HOME arrow in the ActionBar
    • ITEM_SPINNER: A spinner in the ActionBar
    Click to expand...
    Click to collapse
    View
    13
    nikwen
    nikwen
    Customization options

    The ShowcaseView can be customized using the ShowcaseView.ConfigOptions object you pass to the ShowcaseView.insertShowcaseView() method.

    For some strange reason, there are no getter/setter methods for that class. So you can access the fields of that class directly.

    This is the basic code for the following code snippets:

    Code: 
    ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
co.hideOnClickOutside = true;
ShowcaseView sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, this, R.string.showcase_title, R.string.showcase_message, co);

    Don't respond to touches outside the showcased area

    Code: 
    co.hideOnClickOutside = false;
co.block = true;

    The field "block" determines whether the app will respond to touches outside the showcased area.

    Don't hide the ShowcaseView on touches outside the showcased area

    Code: 
    co.hideOnClickOutside = false;

    The field "hideOnClickOutside" determines whether the view will be hidden when the screen is touched outside the highlighted area.

    Set a fade-in or fade-out duration

    The proper fields:

    Code: 
    co.fadeInDuration = 1000;
co.fadeOutDuration = 1000;

    Using these fields, you can set the time it will take the ShowcaseView to fade in or out.

    Don't overlay the ActionBar

    Code: 
    co.insert = ShowcaseView.INSERT_TO_VIEW;

    This field allows you to determine whether the ShowcaseView will overlay the ActionBar.

    Possible values:

    • ShowcaseView.INSERT_TO_DECOR: Will overlay the ActionBar
    • ShowcaseView.INSERT_TO_VIEW: Will just overlay the content, but not the ActionBar
    Click to expand...
    Click to collapse


    Hide the button

    Code: 
    co.noButton = true;

    This field allows you to hide the button of the ShowcaseView.

    Show the overlay only once

    Code: 
    co.shotType = ShowcaseView.TYPE_ONE_SHOT;

    This field determines how often the overlay should be shown.

    Possible values:

    • ShowcaseView.TYPE_NO_LIMIT: Every time the Activity is opened
    • ShowcaseView.TYPE_ONE_SHOT: Only once
    Click to expand...
    Click to collapse


    Change the circle radius

    Use the method setShowcaseIndicatorScale(float scaleMultiplier) of ShowcaseView for that:

    Code: 
    sv.setShowcaseIndicatorScale(1.5f);



    Theming

    The ShowcaseView library offers plenty of options to adjust the appearance of the ShowcaseView.

    Fortunately, the library allows you to theme the ShowcaseView as a whole.

    To theme the appearance of the ShowcaseView you need to create a style derived from either the ShowcaseView or ShowcaseView.Light style:

    Code: 
    <style name="CustomShowcaseTheme" parent="ShowcaseView.Light">
    <item name="sv_backgroundColor">#33ffbb33</item>
    <item name="sv_buttonBackgroundColor">#CF3119</item>
    <item name="sv_buttonText">Close</item>
    <item name="sv_titleTextAppearance">@style/CustomTitle</item>
    <item name="sv_detailTextAppearance">@style/CustomDetailText</item>
</style>

    (Add this to your /res/values/styles.xml file.)

    The different options allow you to change the colors of the View and the text of the button.

    The text styling is done using TextAppearance styles like this:

    Code: 
    <style name="CustomTitle" parent="TextAppearance.ShowcaseView.Title">
    <item name="android:textColor">#00801A</item>
</style>

<style name="CustomDetailText" parent="TextAppearance.ShowcaseView.Detail">
    <item name="android:textColor">#00801A</item>
</style>

    (Add this to your /res/values/styles.xml file.)

    For a lighter theme, use "TextAppearance.ShowcaseView.Title.Light" and "TextAppearance.ShowcaseView.Detail.Light" as parent themes instead.

    Then add this to the /res/values/styles.xml file as well:

    Code: 
    <style name="CustomAppTheme" parent="android:Theme.Light">
    <item name="showcaseViewStyle">@style/CustomShowcaseTheme</item>
</style>

    (You might want to replace Theme.Light by another one.)

    Furthermore, add this to the /res/values-v14/styles.xml file:

    Code: 
    <style name="CustomAppTheme" parent="android:Theme.Holo.Light">
    <item name="showcaseViewStyle">@style/CustomShowcaseTheme</item>
</style>

    (You might want to replace Theme.Holo.Light by another one.)

    The last step is adding this to the <application> tag in your AndroidManifest.xml:

    Code: 
    <application
    android:theme="@style/CustomAppTheme"
    ... />

    You're done. You successfully themed your ShowcaseView. :)

    Attributions

    • Big thanks to Alex Curran for the library.
    • I wouldn't have got the idea to write this guide without @marty331's guide. Thank you, Marty.
    • Moreover, I got inspired by the sample folder of the ShowcaseView project.

    This was featured on the XDA portal on August 31, 2013. :D
    View
    3
    F
    firetrap
    alex-p690 said:
    Is there any way yet to use the animateGesture() continuously so the finger will swipe the screen until the user dismiss it?
    Click to expand...
    Click to collapse

    nikwen said:
    No, there isn't one yet. And when I replied to your PM, I promised to implement it. But there are other things to do as well. ;)
    Click to expand...
    Click to collapse

    I changed the lib, to do continuously gesture, maybe it's not the best approach but it's not my code and i don't had the time to do some code art and i only changed what i need, if you use my code snippet the please give me some credits in the library i will appreciate ;)


    In ShowCaseView.java replace animateGesture by this one:

    Code: 
    public void animateGesture(final float offsetStartX,final float offsetStartY,
			final float offsetEndX, final float offsetEndY) {
		mHandy = ((LayoutInflater) getContext().getSystemService(
				Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.handy, null);
		addView(mHandy);
		moveHand(offsetStartX, offsetStartY, offsetEndX, offsetEndY,
				new AnimationEndListener() {
                                        @Override
					public void onAnimationEnd() {
						// PAUSE BETWEEN GESTURES
						new CountDownTimer(5000, 1000) {

                                                       @Override
							public void onTick(long miliseconds) {
							}

                                                        @Override
							public void onFinish() {
								removeView(mHandy);
								animateGesture(offsetStartX, offsetStartY,
										offsetEndX, offsetEndY);
							}
						}.start();

					}
				});
	}

    In AnimationUtils.java replace createMovementAnimation by this one:


    Code: 
    public static AnimatorSet createMovementAnimation(View view, float canvasX,
			float canvasY, float offsetStartX, float offsetStartY,
			float offsetEndX, float offsetEndY,
			final AnimationEndListener listener) {

		// BECAUSE IN EVERY GESTURE THE CANVAS CHANGE POSITION
		canvasX = -1;
		canvasY = -1;

		ViewHelper.setAlpha(view, INVISIBLE);

		ObjectAnimator alphaIn = ObjectAnimator.ofFloat(view, ALPHA, INVISIBLE,
				VISIBLE).setDuration(500);

		ObjectAnimator setUpX = ObjectAnimator.ofFloat(view, COORD_X,
				canvasX + offsetStartX).setDuration(INSTANT);
		ObjectAnimator setUpY = ObjectAnimator.ofFloat(view, COORD_Y,
				canvasY + offsetStartY).setDuration(INSTANT);

		ObjectAnimator moveX = ObjectAnimator.ofFloat(view, COORD_X,
				canvasX + offsetEndX).setDuration(1000);
		ObjectAnimator moveY = ObjectAnimator.ofFloat(view, COORD_Y,
				canvasY + offsetEndY).setDuration(1000);
		moveX.setStartDelay(1000);
		moveY.setStartDelay(1000);

		ObjectAnimator alphaOut = ObjectAnimator
				.ofFloat(view, ALPHA, INVISIBLE).setDuration(500);
		alphaOut.setStartDelay(2500);

		AnimatorSet as = new AnimatorSet();
		as.play(setUpX).with(setUpY).before(alphaIn).before(moveX).with(moveY)
				.before(alphaOut);

		Handler handler = new Handler();
		Runnable runnable = new Runnable() {
                        @Override 
			public void run() {
				listener.onAnimationEnd();
			}
		};
		handler.postDelayed(runnable, 3000);

		return as;
	}

    PS: don't forget to import the countDown
    View
    2
    marty331
    marty331
    Good job figuring this out, looks like it just needed to be called from onActivityCreated. I'm going to use this in my app instead of the Overlay View I came up with.
    View
    2
    nikwen
    nikwen
    Added the first customization options. :)
    View

New posts