Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add UI buttons to the pages #56

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add UI buttons to the pages #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 35 additions & 6 deletions ...ample/src/main/java/com/ramotion/paperonboarding/examples/fragment/FragmentsActivity.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,41 @@ public void onRightOut() {

private ArrayList<PaperOnboardingPage> getDataForOnboarding() {
// prepare data
PaperOnboardingPage scr1 = new PaperOnboardingPage("Hotels", "All hotels and hostels are sorted by hospitality rating",
Color.parseColor("#678FB4"), R.drawable.hotels, R.drawable.key);
PaperOnboardingPage scr2 = new PaperOnboardingPage("Banks", "We carefully verify all banks before add them into the app",
Color.parseColor("#65B0B4"), R.drawable.banks, R.drawable.wallet);
PaperOnboardingPage scr3 = new PaperOnboardingPage("Stores", "All local stores are categorized for your convenience",
Color.parseColor("#9B90BC"), R.drawable.stores, R.drawable.shopping_cart);
PaperOnboardingPage scr1;
PaperOnboardingPage.Builder builder = new PaperOnboardingPage.Builder("Hotels", "All hotels and hostels are sorted by hospitality rating")
.setSkipText("Skip")
.setShowSkipButton(true)
.setShowNextButton(true)
.setShowPreviousButton(true)
.setContentIconRes(R.drawable.hotels)
.setBgColor(Color.parseColor("#678FB4"))
.setBottomBarIconRes(R.drawable.key);

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
builder.setNextButtonColor(Color.RED);
}
scr1 = builder.create();


PaperOnboardingPage scr2 = new PaperOnboardingPage.Builder("Banks", "We carefully verify all banks before add them into the app")
.setSkipText("Skip")
.setShowSkipButton(true)
.setShowNextButton(true)
.setShowPreviousButton(true)
.setContentIconRes(R.drawable.banks)
.setBgColor(Color.parseColor("#65B0B4"))
.setBottomBarIconRes(R.drawable.wallet)
.create();

PaperOnboardingPage scr3 = new PaperOnboardingPage.Builder("Stores", "All local stores are categorized for your convenience")
.setSkipText("Skip")
.setShowSkipButton(true)
.setShowNextButton(true)
.setShowPreviousButton(true)
.setContentIconRes(R.drawable.stores)
.setBgColor(Color.parseColor("#9B90BC"))
.setBottomBarIconRes(R.drawable.shopping_cart)
.create();

ArrayList<PaperOnboardingPage> elements = new ArrayList<>();
elements.add(scr1);
Expand Down
80 changes: 80 additions & 0 deletions paper-onboarding/src/main/java/com/ramotion/paperonboarding/PaperOnboardingEngine.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.ColorStateList;
import android.os.Build;
import android.view.Gravity;
import android.view.LayoutInflater;
Expand All @@ -14,7 +15,9 @@
import android.view.ViewTreeObserver;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
Expand Down Expand Up @@ -43,6 +46,7 @@ public class PaperOnboardingEngine implements PaperOnboardingEngineDefaults {
private final FrameLayout mContentIconContainer;
private final FrameLayout mBackgroundContainer;
private final LinearLayout mPagerIconsContainer;
private final FrameLayout mContentButtonContainer;

private final RelativeLayout mContentRootLayout;
private final LinearLayout mContentCenteredContainer;
Expand Down Expand Up @@ -84,6 +88,7 @@ public PaperOnboardingEngine(View rootLayout, ArrayList<PaperOnboardingPage> con
mContentIconContainer = (FrameLayout) rootLayout.findViewById(R.id.onboardingContentIconContainer);
mBackgroundContainer = (FrameLayout) rootLayout.findViewById(R.id.onboardingBackgroundContainer);
mPagerIconsContainer = (LinearLayout) rootLayout.findViewById(R.id.onboardingPagerIconsContainer);
mContentButtonContainer = rootLayout.findViewById(R.id.onboardingButtonContainer);

mContentRootLayout = (RelativeLayout) mRootLayout.getChildAt(1);
mContentCenteredContainer = (LinearLayout) mContentRootLayout.getChildAt(0);
Expand Down Expand Up @@ -184,6 +189,10 @@ protected void initializeStartingState() {
mContentIconContainer.addView(initContentIcon);
// initial bg color
mRootLayout.setBackgroundColor(activeElement.getBgColor());

// Setup Buttons
ViewGroup initialContentButtons = createContentButtons(activeElement);
mContentButtonContainer.addView(initialContentButtons);
}

/**
Expand Down Expand Up @@ -228,12 +237,18 @@ protected void toggleContent(boolean prev) {
// 6 animate centering of all content
Animator centerContentAnimation = createContentCenteringVerticalAnimation(newContentText, newContentIcon);

// 7 animate buttons
ViewGroup newContentButton = createContentButtons(newElement);
mContentButtonContainer.addView(newContentButton);
Animator buttonAnimation = createContentButtonShowAnimation(mContentButtonContainer.getChildAt(mContentButtonContainer.getChildCount() - 2), newContentButton);

centerContentAnimation.start();
bgAnimation.start();
pagerMoveAnimation.start();
pagerIconAnimation.start();
contentIconShowAnimation.start();
contentTextShowAnimation.start();
buttonAnimation.start();

if (mOnChangeListener != null)
mOnChangeListener.onPageChanged(oldElementIndex, mActiveElementIndex);
Expand Down Expand Up @@ -434,6 +449,28 @@ public void onAnimationUpdate(ValueAnimator valueAnimator) {
return animations;
}

private AnimatorSet createContentButtonShowAnimation(final View currentContentButton, final View newContentButton) {
AnimatorSet animations = new AnimatorSet();
Animator currentContentFadeOut = ObjectAnimator.ofFloat(currentContentButton, "alpha", 1, 0);
currentContentFadeOut.setDuration(ANIM_CONTENT_TEXT_HIDE_TIME);
currentContentFadeOut.addListener(new AnimatorEndListener() {
@Override
public void onAnimationEnd(Animator animation) {
mContentButtonContainer.removeView(currentContentButton);
}
});
animations.playTogether(currentContentFadeOut);

Animator newContentFadeIn = ObjectAnimator.ofFloat(newContentButton, "alpha", 0, 1);
newContentFadeIn.setDuration(ANIM_CONTENT_TEXT_SHOW_TIME);

animations.playTogether(newContentFadeIn);

animations.setInterpolator(new DecelerateInterpolator());

return animations;
}

/**
* @param iconDrawableRes drawable resource for icon
* @param isActive is active element
Expand Down Expand Up @@ -486,6 +523,49 @@ protected ImageView createContentIconView(PaperOnboardingPage PaperOnboardingPag
return contentIcon;
}

protected ViewGroup createContentButtons(PaperOnboardingPage activeElement) {
LayoutInflater vi = LayoutInflater.from(mAppContext);
ViewGroup contentButtons = (ViewGroup) vi.inflate(R.layout.onboarding_button_layout, mContentButtonContainer, false);
Button skipButton = contentButtons.findViewById(R.id.onboardingButtonSkip);
skipButton.setText(activeElement.getSkipText());
skipButton.setVisibility(activeElement.getShowSkipButton()? View.VISIBLE: View.GONE);

ImageButton previousButton = contentButtons.findViewById(R.id.onboardingButtonPrevious);
previousButton.setVisibility(activeElement.getShowPreviousButton()?View.VISIBLE: View.GONE);

ImageButton nextButton = contentButtons.findViewById(R.id.onboardingButtonNext);
nextButton.setVisibility(activeElement.getShowNextButton()?View.VISIBLE: View.GONE);

skipButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mOnRightOutListener != null)
mOnRightOutListener.onRightOut();
}
});

nextButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
toggleContent(false);
}
});

previousButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
toggleContent(true);
}
});

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
previousButton.setImageTintList(ColorStateList.valueOf(activeElement.getPreviousButtonColor()));
nextButton.setImageTintList(ColorStateList.valueOf(activeElement.getNextButtonColor()));
}

return contentButtons;
}

/**
* @return index of currently active element
*/
Expand Down
Loading