ShowcaseView
ShowcaseView copied to clipboard
amlcurran
How to chain multiple ShowcaseViews
Hello, Question on best practices. If I have a list of ShowcaseView.builder objects and I want to "chain" them together so that when the user clicks on the button to hide the first it shows the second, what is the best way of going about doing that?
I currently am trying to update after onShowcaseViewHide() is called, but it seems to not show the background color on the ones after the first. (IE, it shows the first one just fine, but once you get to the second+ showcaseviews, it only shows the button.)
Thanks for your time!
-Pgmac
You can chain using switch case as shown below in example. `final ShowcaseView showcaseView; showcaseView = new ShowcaseView.Builder(getActivity()) .withMaterialShowcase() .setContentTitle(R.string.ch_catalog_mark_fav_title) .setContentText(R.string.ch_catalog_mark_fav) .blockAllTouches() .setTarget(target) .setStyle(R.style.sv_background) .build(); if (!both) {
showcaseView.setButtonText(getString(R.string.ch_got_it));
}
favShowing = true;
showcaseView.setLayoutPosition(params);
showcase = showcaseView;
showcaseView.show();
showcaseView.overrideButtonClick(new View.OnClickListener() {
int count1 = 0;
@Override
public void onClick(View v) {
count1++;
switch (count1) {
case 1:
if (both) {
showcaseView.setContentText(getString(R.string.ch_catalog_share));
showcaseView.setContentTitle(getString(R.string.ch_catalog_share_title));
showcaseView.setShowcase(new ViewTarget(findViewById(R.id.btnProductShare)), false);
ContextualHelper.setContextualHelpPrefForMultipleItem(getActivity(), IPreferenceConstants.PREF_CH_SHARE);
if (!allThree) {
showcaseView.setButtonText(getString(R.string.ch_got_it));
}
} else {
showcaseView.hide();
}
break;
case 2:
if (allThree) {
if (mAdvertiseThisTextView.getVisibility() == View.VISIBLE) {
showcaseView.setContentText(getString(R.string.ch_catalog_advertise));
showcaseView.setContentTitle(getString(R.string.ch_catalog_advertise_title));
showcaseView.setShowcase(new ViewTarget(mAdvertiseThisTextView), false);
ContextualHelper.setContextualHelpPrefForMultipleItem(getActivity(), IPreferenceConstants.PREF_CH_AD_THIS);
} else if (mAdIsRunningTextView.getVisibility() == View.VISIBLE) {
showcaseView.setContentText(getString(R.string.ch_catalog_ad_created));
showcaseView.setContentTitle(getString(R.string.ch_catalog_ad_created_title));
showcaseView.setShowcase(new ViewTarget(mAdIsRunningTextView), false);
ContextualHelper.setContextualHelpPrefForMultipleItem(getActivity(), IPreferenceConstants.PREF_CH_AD_CREATED);
}
showcaseView.setButtonText(getString(R.string.ch_got_it));
} else {
showcaseView.hide();
}
break;
case 3:
showcaseView.hide();
break;
}
}
});
}
`
This is how I did mine, it works perfectly! (the only issue is that when you click the button to the next showcase the text instantly changes and it looks kind of ugly)
private void showcaseDialogTutorial(){
final SharedPreferences tutorialShowcases = getSharedPreferences("showcaseTutorial", MODE_PRIVATE);
boolean run;
run = tutorialShowcases.getBoolean("run?", true);
if(run){//If the buyer already went through the showcases it won't do it again.
final ViewTarget = new ViewTarget(R.id. , this);//Variable holds the item that the showcase will focus on.
final ViewTarget = new ViewTarget(R.id. , this);
final ViewTarget = new ViewTarget(R.id. , this);
final ViewTarget = new ViewTarget(R.id. , this);
final ViewTarget = new ViewTarget(R.id. , this);
final ViewTarget = new ViewTarget(R.id. , this);
final ViewTarget = new ViewTarget(R.id. , this);
final ViewTarget = new ViewTarget(R.id. , this);
final ViewTarget = new ViewTarget(R.id. , this);
final ViewTarget = new ViewTarget(R.id. , this);
final ViewTarget = new ViewTarget(R.id. , this);
//This code creates a new layout parameter so the button in the showcase can move to a new spot.
final RelativeLayout.LayoutParams lps = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
// This aligns button to the bottom left side of screen
lps.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
lps.addRule(RelativeLayout.CENTER_HORIZONTAL);
// Set margins to the button, we add 16dp margins here
int margin = ((Number) (getResources().getDisplayMetrics().density * 16)).intValue();
lps.setMargins(margin, margin, margin, margin);
//This creates the first showcase.
ShowCase = new ShowcaseView.Builder(this)
.withMaterialShowcase()
.setTarget()
.setContentTitle("")
.setContentText("")
.setStyle(R.style.CustomShowcaseTheme2)
.build();
ShowCase.setButtonText("next");
//When the button is clicked then the switch statement will check the counter and make the new showcase.
ShowCase.overrideButtonClick(new View.OnClickListener() {
int count1 = 0;
@Override
public void onClick(View v) {
count1++;
switch (count1) {
case 1:
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("next");
break;
case 2:
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("next");
break;
case 3:
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("next");
break;
case 4:
ShowCase.setButtonPosition(lps);
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("next");
break;
case 5:
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("next");
break;
case 6:
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("next");
break;
case 7:
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("next");
break;
case 8:
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("next");
break;
case 9:
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("next");
break;
case 10:
ShowCase.setTarget();
ShowCase.setContentTitle("");
ShowCase.setContentText("");
ShowCase.setButtonText("finish");
break;
case 11:
SharedPreferences.Editor tutorialShowcasesEdit = tutorialShowcases.edit();
tutorialShowcasesEdit.putBoolean("run?", false);
tutorialShowcasesEdit.apply();
ShowCase.hide();
break;
}
}
});
}
}
As far as I see you change the target but the showcaseDrawer radius is unchanged. I managed to do this by making a new showcase object each time but this highly affects performance, and does not allow you to make nice animations when changing the target. Does anyone have an idea how to change the radius for the same ShowcaseView object? (without using reflection of course :>)