Comment on page
Customizing Rich Media appearance
This guide refers to customizing rich media appearance and animation styles
Customize the appearance of rich media pages to make them fit your app’s style perfectly. Change the background color of your in-app messages, add some animation, or adjust the loading view to the app layout. Improve user experience with in-apps looking like a native component of the app.
First, get an instance of the RichMediaStyle class:
PWRichMediaStyle *style = [PWRichMediaManager sharedManager].richMediaStyle;
RichMediaStyle style = RichMediaManager.getRichMediaStyle();
Make in-app messages look like an inherent part of your app by changing the background color of rich media pages displayed to the app's users.
style.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.2f];
style.setBackgroundColor(ContextCompat.getColor(getApplication(),R.color.balck));
That's it!
Enhance the effect of your in-app messages by animating rich media appearance.
Set the animation delegate to one of the default classes:
PWRichMediaStyleSlideLeftAnimation,PWRichMediaStyleSlideRightAnimation,PWRichMediaStyleSlideTopAnimation,PWRichMediaStyleSlideBottomAnimation,PWRichMediaStyleCrossFadeAnimation.
style.animationDelegate = [PWRichMediaStyleCrossFadeAnimation new];
By default, animation type value for iOS is
PWRichMediaStyleAnimationTypeSlideBottom.Set the animation delegate to one of the default classes:
RichMediaAnimationSlideTop,RichMediaAnimationSlideBottom,RichMediaAnimationSlideRight,RichMediaAnimationSlideLeft,RichMediaAnimationCrossFade.
richMediaStyle.setRichMediaAnimationType(new RichMediaAnimationSlideTop());
By default, animation type value for Android is
RichMediaAnimationSlideBottom.To set a custom animation, implement
PWRichMediaStyleAnimationDelegate method for iOS or RichMediaAnimation for Android as follows:1. Set the animation delegate:
style.animationDelegate = self;
2. Implement
PWRichMediaStyleAnimationDelegate methods (don't forget to call a completion block):- (void)runPresentingAnimationWithContentView:(UIView *)contentView parentView:(UIView *)parentView completion:(dispatch_block_t)completion {
contentView.transform = CGAffineTransformMakeTranslation(0, parentView.bounds.size.height);
[UIView animateWithDuration:0.6
delay:0
usingSpringWithDamping:0.4
initialSpringVelocity:0
options:0
animations:^{
contentView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
completion();
}];
}
- (void)runDismissingAnimationWithContentView:(UIView *)contentView parentView:(UIView *)parentView completion:(dispatch_block_t)completion {
[UIView animateWithDuration:0.3
animations:^{
contentView.alpha = 0.0f;
contentView.transform = CGAffineTransformMakeScale(2, 2);
} completion:^(BOOL finished) {
completion();
}];
}
Implement
RichMediaAnimation interface and set it for custom Rich Media close and open animation:richMediaStyle.setRichMediaAnimation(new RichMediaAnimation() {
//Allows to set rules and behavior for custom Rich Media open animation
@Override
public void openAnimation(View contentView, View parentView) {
AnimationSet fadeInAnimation = new AnimationSet(true);
fadeInAnimation.addAnimation(new TranslateAnimation(0.15f * parentView.getWidth(), 0, parentView.getHeight() / 2.5f, 0));
fadeInAnimation.addAnimation(new AlphaAnimation(0, 1));
fadeInAnimation.addAnimation(new ScaleAnimation(0.7f, 1.0f, 0.7f, 1.0f));
fadeInAnimation.setDuration(2000);
fadeInAnimation.setInterpolator(new DecelerateInterpolator(1f));
contentView.startAnimation(fadeInAnimation);
}
//Allows to set rules and behavior for custom Rich Media close animation
@Override
public void closeAnimation(View contentView, View parentView, Animation.AnimationListener endAnimationListener) {
// !IMPORTANT!
// endAnimationListener has to be added to your custom animation to let Pushwoosh SDK handle animation end event
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
alphaAnimation.setDuration(2000);
alphaAnimation.setAnimationListener(endAnimationListener);
alphaAnimation.setFillEnabled(true);
alphaAnimation.setFillAfter(true);
contentView.animate().translationY(parentView.getHeight() / 5).setDuration(250).start();
parentView.startAnimation(alphaAnimation);
}
});
Catch user attention from the first seconds with customized loading view of your In-App Messages.
1) Use
loadingViewBlock as follows:style.loadingViewBlock = ^PWLoadingView *{
return [[[NSBundle mainBundle] loadNibNamed:@"LoadingView" owner:self options:nil] lastObject];
};
2) "LoadingView" here must inherit from PWLoadingView (defined in PWRichMediaStyle.h):
3) Set outlets:
RichMediaStyle.LoadingViewCreatorInterface implements a method that returns a View to be used as a loading screen for Rich Media:richMediaStyle.setLoadingViewCreator(() -> {
View screenView = createYourScreenView();
return screenView;
});
Make sure the In-App Message is shown to users by disabling close button until the Rich Media is loaded.
style.closeButtonPresentingDelay = 3;
// set a value in milliseconds
richMediaStyle.setTimeOutBackButtonEnable(3000);
Last modified 4mo ago