Database Users

WebView - Handle JavaScript Pop Up ?

Hi,
I am new to Android Development. I am making an application with a WebView object. This loads a URL with some elements. However, I cannot get JavaScript PopUp to show up when the button is pressed.
My WebView has JavaScript enabled, but all other properties are disabled.
What is the property to enable WebView popups to show??

I had to do this. Override the onJSAlert() method in the WebChromeClient class:
Code:
public class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result)
{
final JsResult finalRes = result;
new AlertDialog.Builder(view.getContext())
.setMessage(message)
.setPositiveButton(android.R.string.ok,
new AlertDialog.OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which) {
finalRes.confirm();
}
})
.setCancelable(false)
.create()
.show();
return true;
}
}
Then add it to your webview:
Code:
MyWebChromeClient myWebChromeClient = new MyWebChromeClient();
webView.setWebChromeClient(myWebChromeClient);

Thanks. That did work!
One small thing, how do you set a Title for the pop-ups. Currently it shows the url in the Title.

I found a better example that sets the title:
http://lexandera.com/2009/01/adding-alert-support-to-a-webview/

footboydog said:
I found a better example that sets the title:
http://lexandera.com/2009/01/adding-alert-support-to-a-webview/
Click to expand...
Click to collapse
I tried that, but the Title is only displayed when the alert has one button/option. When there are multiple options, the Title shows the URL.

Sorry not sure how to fix that

footboydog said:
Sorry not sure how to fix that
Click to expand...
Click to collapse
Ok, I think I'll have to live with "file:///" showing as the Title for now...

you can convert to toast

LinearLayout Hyperlink

Hello!
First at all, I'm a beginner in android coding, I'm more a graphist with Photoshop as main tool.
A friend has made an app for my themes and is in holidays until september.
Beeing logical and understanding fast, with my friend Google we found the functions/codes I needed. Except one:
I have a horizontal scroll layout showing the apps needed to install the theme. Each app is showed in a linearlayout.
What I would like is make each linearlayout of apps clickable and make them show the app on the playstore when you click on it.
Thanks for reading

I assume you're using Textviews to add line by line the dependencies.. There is a property called autolink or very much like it that makes a link whenever it finds a url in the text...
But instead of Textviews in a linearlayout, why not use ListView? Then you can handle the click in the item to create an intent to open the browser with the url needed... it's a bit of more work but has a better esthetic than a bunch of TextViews... For instance, it makes it easier to use when in a ldpi device...
Sent from my LG-P350 using xda app-developers app

Sorry for the late.
I'm beginner in java coding so I don't undersand well what you mean dude.
In fact, what I have now is:
In res\layout\main.xml:
Code:
<HorizontalScrollView
android:id="@+id/layout5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/layout3"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
>
<LinearLayout
android:id="@+id/layout4"
android:background="#00000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
In MainActivity.java:
Code:
boolean apexInstalled = appInstalledOrNot("com.anddoes.launcher");
RelativeLayout apexApp = (RelativeLayout) getLayoutInflater().inflate(R.layout.item, null);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams((int) (125 * scale + 0.5f),(int) (150 * scale + 0.5f));
ImageView apexI = (ImageView) apexApp.findViewById(R.id.appIcon);
apexI.setBackgroundResource(R.drawable.apexicon);
TextView apexT = (TextView) apexApp.findViewById(R.id.appText);
if(apexInstalled){
apexT.setText(R.string.installe);
apexT.setTextColor(Color.parseColor("#5a925d"));
}
else{
apexT.setText(R.string.nninstalle);
apexT.setTextColor(Color.parseColor("#de3747"));
}
apexT.setTypeface(font);
TextView apexTitle = (TextView) apexApp.findViewById(R.id.appTitle);
apexTitle.setText("Apex Launcher"); // \n == retour a la ligne
apexTitle.setTypeface(font);
apexApp.setBackgroundColor(Color.argb(190, 0, 0, 0));
listApp.addView(apexApp, params);
And I have many blocks like this one but with other apps, and I would like them to point on the playstore, what do I have to add?

Use a ListView with a custom Adapter: http://www.vogella.com/articles/AndroidListView/
Then add an OnItemClickedListener to the ListView.
In its onItemClick method you can use an Intent like this one:
Code:
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + pkg); //Your package name here
if (getActivity().getPackageManager().queryIntentActivities(intent, 0).size() > 0) {
startActivity(intent);
} else {
Toast.makeText(getActivity(), "Google Play is not installed on the device.", Toast.LENGTH_LONG).show();
}

Thanks trying to help me, but I understand aproximatively the intent, but the listview etc, no..
I'm just trying to modify a bit an app somebody made for me using my logic to understand what I have to do. The problem is that I don't understand how to apply what you tell me :/

Lyechee said:
Thanks trying to help me, but I understand aproximatively the intent, but the listview etc, no..
I'm just trying to modify a bit an app somebody made for me using my logic to understand what I have to do. The problem is that I don't understand how to apply what you tell me :/
Click to expand...
Click to collapse
OK, then let's forget about the ListView if you just want to modify your existing app with as little effort as possible.
Try that in your Java code:
Code:
LinearLayout layout = findViewById(R.id.layout4);
layout.setClickable(true);
layout.setOnClickListener(new View.OnClickListener() {
[user=439709]@override[/user]
public void onClick(View v) {
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + pkg); //Your package name here
if (getActivity().getPackageManager().queryIntentActivities(intent, 0).size() > 0) {
startActivity(intent);
} else {
Toast.makeText(getActivity(), "Google Play is not installed on the device.", Toast.LENGTH_LONG).show();
}
}
});
(The word Override has to be written with a capital letter at the beginning. XDA does not allow that.)

But if I understand well that code, it will make a "link case" in the whole scroll layout no?
Or a link for each app?
If it's not possible to cut the horizontal scroll in little squares (links), is that possible to put a hyperlink on each imageview? So that click on the icon shows the store.

Lyechee said:
But if I understand well that code, it will make a "link case" in the whole scroll layout no?
Or a link for each app?
If it's not possible to cut the horizontal scroll in little squares (links), is that possible to put a hyperlink on each imageview? So that click on the icon shows the store.
Click to expand...
Click to collapse
Yes, it does. I thought that the Linear layout was loaded as the layout for each app.
Ok. I think that the RelativeLayout in the MainActivity.java is your row, right?
If it is, that should work:
Code:
apexApp.setClickable(true);
apexApp.setOnClickListener(new View.OnClickListener() {
[user=439709]@override[/user]
public void onClick(View v) {
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + pkg); //Your package name here
if (getActivity().getPackageManager().queryIntentActivities(intent, 0).size() > 0) {
startActivity(intent);
} else {
Toast.makeText(getActivity(), "Google Play is not installed on the device.", Toast.LENGTH_LONG).show();
}
}
});

Yeah, each RelativeLayout is an app square. I'm not at home so I can't test it now, will later in the evening, thanks for your help!

Lyechee said:
Yeah, each RelativeLayout is an app square. I'm not at home so I can't test it now, will later in the evening, thanks for your help!
Click to expand...
Click to collapse
Welcome.

Hello! I'm in front of a problem.
I wanted to face it alone, but I don't manage it..
I have had a problem with "uri", and after googleing, I've found that I had to import it.
But my problem is that I get that error:
Code:
The method getActivity() is undefined for the type new View.OnClickListener(){}
Any idea?

Lyechee said:
Hello! I'm in front of a problem.
I wanted to face it alone, but I don't manage it..
I have had a problem with "uri", and after googleing, I've found that I had to import it.
But my problem is that I get that error:
Code:
The method getActivity() is undefined for the type new View.OnClickListener(){}
Any idea?
Click to expand...
Click to collapse
Ah, you're right. I'm sorry.
I copied the code from one of my fragments. Just delete the getActivity().
So it is:
Code:
apexApp.setClickable(true);
apexApp.setOnClickListener(new View.OnClickListener() {
[user=439709]@override[/user]
public void onClick(View v) {
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + pkg); //Your package name here
if (getPackageManager().queryIntentActivities(intent, 0).size() > 0) {
startActivity(intent);
} else {
Toast.makeText(MainActivtiy.this, "Google Play is not installed on the device.", Toast.LENGTH_LONG).show(); //replace the MainActivity by your Activity
}
}
});

Works like a charm, thank you a lot Exactly what I wanted
If you need a graphist, I'm your man
PS: Is there a tool in Eclipse to make blocks of code lines? I mean, put them in blocs and then hide what you don't need.

Lyechee said:
Works like a charm, thank you a lot Exactly what I wanted
If you need a graphist, I'm your man
PS: Is there a tool in Eclipse to make blocks of code lines? I mean, put them in blocs and then hide what you don't need.
Click to expand...
Click to collapse
Yeah, there should be a minus on the left side next to each method. Click on it to hide the method.
Want to be added? [INDEX] List of themers and designers

[GUIDE] Create Transparent Demo pages on Android

Have you seen those apps with the really cool hand drawn arrows that show the users how the app works the first time they run it? Yeah I have too and I wanted to figure out how to do that. So I did. Now I'm going to show you also.
This is going to be pretty easy and we'll do it for Activities and Fragments so all your apps will be covered.
The first thing you'll need to do is draw the pictures that we'll place over the Activity/Fragment. I draw mine on Gimp but you can use whatever drawing tool you want. I recommend you draw them 480 X 760 px. You'll want to set your background as Transparent. Here is a sample of what I've done.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
That's easy enough. I recommend you draw these as you go, I've found that I needed to edit the images to make sure they are pointing to the exact right place on the screen.
Next up we'll create an XML layout for each image that you want to use in your app. We'll create a LinearLayout with an embedded ImageView. The ImageView will display our beautiful art from above. Make sure to give the LinearLayout an ID, set the background to @null. As for the ImageView you'll need to give it an ID also and set the source to the image file you drew previously. Be sure to put the image in the res/drawable folder, make sure the image file name is all lower case and it is a .png file type. Again you will need to create as many of these XML layouts as you did images above.
overlay_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/llOverlay_activity"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background= @null"
androidrientation="vertical" >
<ImageView
android:id="@+id/ivOverlayEntertask"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/activity_overlay" />
</LinearLayout>
We are going to control when this is displayed to the user with SharedPreferences. Utilizing SharePreferences gives us the ability to show the tutorial on the first run of the app and also allows the user to see it again by selecting it in the apps Settings menu.
We'll need to create a folder under /res/ named /xml, so you'll end up with /res/xml. Now let's create a new XML layout for our preferences. In Eclipse you'll choose File New > Android XML file. Change the Resource Type to Preference, then name the file exactly this prefs.xml and click Finish.
Next we'll add a CheckBoxPreference with the following attributes:
android:defaultValue="true"
android:key="tutorial"
android:summary="Enable tutorial on device"
android:title="Tutorial"
So your final prefs.xml file will look exactly like this:
<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >
<CheckBoxPreference
android:defaultValue="true"
android:key="tutorial"
android:summary="Enable tutorial on device"
android:title="Tutorial" />
</PreferenceScreen>
Now let's look at how to show this to the user from our Activity or Fragment. First we'll determine if our tutorial CheckBoxPreferene is set to true and if so we'll display the drawing on top of the current Activity/Fragment.
Create and instance of SharedPreferences and a boolean to store the value:
SharedPreferences setNoti;
boolean showTut;
Then in our OnCreate we'll get the value for our tutorial CheckBoxPreference and if ti's true we'll overlay the image onto our Activity/Fragment:
setNoti = PreferenceManager.getDefaultSharedPreferences(this);
// SharedPref tutorial
showTut = setNoti.getBoolean("tutorial", true);
if (showTut == true) {
showActivityOverlay();
}
Now for the last part we'll create the method to display the overlay. We will create a Dialog and apply a translucent theme with no title bar, this provides a dialog that covers our activity but doesn't hide our notification bar.
private void showActivityOverlay() {
final Dialog dialog = new Dialog(this,
android.R.style.Theme_Translucent_NoTitleBar);
dialog.setContentView(R.layout.overlay_activity);
LinearLayout layout = (LinearLayout) dialog
.findViewById(R.id.llOverlay_activity);
layout.setBackgroundColor(Color.TRANSPARENT);
layout.setOnClickListener(new OnClickListener() {
@override
public void onClick(View arg0) {
dialog.dismiss();
}
});
dialog.show();
}
We'll use a method like this whereever we want to display the overlay to our users. When we get to the last overlay it is best to change the value in our SharedPreferences so we don't continue showing the overlays to the user. We do that with this variation on our above method where in the onClick we update the SharePreferences to set our tutorial to false.
private void showActivityOverlay() {
final Dialog dialog = new Dialog(getActivity(), android.R.style.Theme_Translucent_NoTitleBar);
dialog.setContentView(R.layout.overlay_activity);
LinearLayout layout = (LinearLayout) dialog
.findViewById(R.id.llOverlay_activity);
layout.setBackgroundColor(Color.TRANSPARENT);
layout.setOnClickListener(new OnClickListener() {
@override
public void onClick(View arg0) {
// Get SharedPrefs
PreferenceManager.setDefaultValues(getActivity(), R.xml.prefs, true);
SharedPreferences setNoti = PreferenceManager
.getDefaultSharedPreferences(getActivity());
setNoti.edit().putBoolean("tutorial", false).commit();
showTut = false;
dialog.dismiss();
}
});
dialog.show();
}
And there you have it! As I mentioned at the begging of this post, this can be applied to an Activity or a Fragment. You'll notice in the last method instead of using the context of "this" I'm using the context of "getActivity()", that is the only change you have to make for this to work with a Fragment.
I am publishing the full code on my GitHub. Please feel free to leave comments, questions or your own pointers below.
https://github.com/marty331/overlaytutorial
Thanks for reading!

Cool guide.
I suggest adding [GUIDE] or [HOW-TO] to the thread title to make it easier to find. I thought it was a question when I clicked on it.

marty331 said:
I recommend you draw them 480 X 760 px.
[...]
overlay_activity.xml
Code:
[/QUOTE]
Where's your code? :(
Personally, I'd use Inkscape to create them as a *.svg and convert them to a *.png file later. That way they will not look pixelated.
Click to expand...
Click to collapse

nikwen said:
Where's your code?
Personally, I'd use Inkscape to create them as a *.svg and convert them to a *.png file later. That way they will not look pixelated.
Click to expand...
Click to collapse
Somehow my post was corrupted, I edited it and re-pasted everything.
I haven't tried Inkscape, but am up for giving that a go.

marty331 said:
Somehow my post was corrupted, I edited it and re-pasted everything.
I haven't tried Inkscape, but am up for giving that a go.
Click to expand...
Click to collapse
Great. Thank you.
The only thing which would be even better now would be using
Code:
tags. ;)
I didn't do much with it. However, scaling SVGs looks much better because they consist of single lines and shapes which can be rendered for all densities.
The disadvantage is that it is more difficult to create good-looking graphic effects in SVG.

I just found the Showcaseview library. It looks very promising.
Homepage: http://espiandev.github.io/ShowcaseView/
Github code: https://github.com/Espiandev/ShowcaseView

nikwen said:
I just found the Showcaseview library. It looks very promising.
Homepage: http://espiandev.github.io/ShowcaseView/
Github code: https://github.com/Espiandev/ShowcaseView
Click to expand...
Click to collapse
nikwen,
ShowcaseView is really awesome, I agree. However, it does not work with Fragments yet. Super bummer!

marty331 said:
nikwen,
ShowcaseView is really awesome, I agree. However, it does not work with Fragments yet. Super bummer!
Click to expand...
Click to collapse
Why do you think so?
Shouldn't this work? Correct me if I am wrong.
Code:
ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
co.hideOnClickOutside = true;
sv = ShowcaseView.insertShowcaseView(R.id.buttonBlocked, getActivity(), R.string.showcase_main_title, R.string.showcase_main_message, co);
(Code based on this: https://github.com/Espiandev/Showca...andev/showcaseview/sample/SampleActivity.java)

I agree that it should, however it does not. I've emailed the developer and he said he will work on it. If you want to use ShowcaseView in an activity it works very well.

marty331 said:
I agree that it should, however it does not. I've emailed the developer and he said he will work on it. If you want to use ShowcaseView in an activity it works very well.
Click to expand...
Click to collapse
Ok, that's strange.

Thanks exactly what I was looking for!
Sent from my Galaxy Nexus using Tapatalk 4 Beta

marty331 said:
I agree that it should, however it does not. I've emailed the developer and he said he will work on it. If you want to use ShowcaseView in an activity it works very well.
Click to expand...
Click to collapse
I got it to work.
I will push my code to Github later, but I will improve it before.
Then I will write a tutorial for that.

Here is my pull request: https://github.com/Espiandev/ShowcaseView/pull/68

Guide for doing it using the ShowcaseView library: http://forum.xda-developers.com/showthread.php?t=2419939
This guide is great. Thanks again. Please understand that by posting this I don't want to criticise, offend or denigrate you.
You got mentioned in my guide.

marty331 said:
Somehow my post was corrupted, I edited it and re-pasted everything.
I haven't tried Inkscape, but am up for giving that a go.
Click to expand...
Click to collapse
I think you should also disable smiles in the OP!
androidrientation=„blahblahblah” is android(smile)rientation!

great tut.
thanks

cascio97 said:
I think you should also disable smiles in the OP!
androidrientation=„blahblahblah” is android(smile)rientation!
Click to expand...
Click to collapse
I always use another trick:
Code:
android:[B[I][/I]][/B[I][/I]]orientation
The result:
Code:
android:[B][/B]orientation
That allows you to use smileys in other parts of the post.

nikwen said:
I always use another trick:
Code:
android:[B[I][/I]][/B[I][/I]]orientation
The result:
Code:
android:[B][/B]orientation
That allows you to use smileys in other parts of the post.
Click to expand...
Click to collapse
Thank you! didn't know about this one!
Sent from my Galaxy Nexus using XDA Premium 4 mobile app

[GUIDE] Holo-themed transparent demo overlays with ShowcaseView

[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:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
(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:
(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

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.

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?

Good Tutorial, many thanks!
Inviato dal mio Galaxy Nexus

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.

CrotaNexus said:
Good Tutorial, many thanks!
Inviato dal mio Galaxy Nexus
Click to expand...
Click to collapse
marty331 said:
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.
Click to expand...
Click to collapse
Thanks.

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.

Added the first customization options.

Just finished the theming section and therefore the whole guide.

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?

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.

Did someone mention? You are on the portal, sir! Congratulations! I like this demo overlays, good way to explain apps, like a mini tutorial.
But to be mentioned on the portal is nothing new to you

benkxda said:
Did someone mention? You are on the portal, sir! Congratulations! I like this demo overlays, good way to explain apps, like a mini tutorial.
But to be mentioned on the portal is nothing new to you
Click to expand...
Click to collapse
Nobody mentioned that yet but I saw it this morning.
Thanks.

Due to a new update to the library I'll have to rewrite the styling section.

Hmmm....I feel time to apply for RC
Sent from my GT-N7000 using xda app-developers app

vijai2011 said:
Hmmm....I feel time to apply for RC
Sent from my GT-N7000 using xda app-developers app
Click to expand...
Click to collapse
Thanks.
However, you have to be a member for 9 months to apply for RC. So I'll have to wait two months.

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

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.

setTextColors() seems to be gone is there a new way to change them or is it only possible via Theme now?

nikwen said:
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.
Click to expand...
Click to collapse
Thanks, I will try it out.
Will report it.
Sent from my GT-I9300 using XDA Premium 4 mobile app

RecyclerView - recycle at specific position

I have a recyclerview in which I can remove items. When I remove an item, a new one replaces it, but this happens at the end/bottom of the recyclerview, whereas I would like the new item to replace the deleted item at its very position. I hope this makes sense!
Do you guys have any ideas as to how I can implement that?
This is my delete method:
Code:
public void deleteItem(int position) {
mProvider.removeItem(position);
notifyItemRemoved(position);
}

StrangerWeather said:
I have a recyclerview in which I can remove items. When I remove an item, a new one replaces it, but this happens at the end/bottom of the recyclerview, whereas I would like the new item to replace the deleted item at its very position. I hope this makes sense!
Do you guys have any ideas as to how I can implement that?
This is my delete method:
Code:
public void deleteItem(int position) {
mProvider.removeItem(position);
notifyItemRemoved(position);
}
Click to expand...
Click to collapse
Ok, I've worked it out. The idea is simply to first remove the item and then to swap it for the last item (here, item 25):
Code:
public void deleteItem(int position) {
mProvider.removeItem(getItemCount());
mProvider.swapItem(25, position);
notifyItemRemoved(position);
}

StrangerWeather said:
Ok, I've worked it out. The idea is simply to first remove the item and then to swap it for the last item (here, item 25):
Click to expand...
Click to collapse
Here is my solution in my RecylcerViewAdapter with an ArrayList:
Code:
public boolean removeAt(int position) {
if(position >= 0 && position < data.size()) {
data.remove(position);
notifyItemRemoved(position);
notifyItemRangeChanged(position, data.size());
return true;
}
return false;
}