[Java for Android App Development] nikwen:
[GUIDE] Holo-themed transparent demo overlays

Lately I found a great tutorial by [MENTION=4153009]marty331[/MENTION] 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:

(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:

(Source: https://github.com/amlcurran/ShowcaseView#set-up)

Showcasing views

Showcasing views is really easy:

public class MyActivity extends Activity {

ShowcaseView sv;

[MENTION=439709]override[/MENTION]
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:

public class ShowcaseFragment extends Fragment {

ShowcaseView sv;

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

[MENTION=439709]override[/MENTION]
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:

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

[MENTION=439709]override[/MENTION]
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:

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:

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

Showcasing parts of the ActionBar

Another possiblity is to showcase ActionItems:

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

This is how to do it:

[MENTION=439709]override[/MENTION]
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: