Android Swipe Images Intro Screen on First Run - android

I've been looking around a lot lately but haven't really found much on this.
I'm making my third Android app and I'm looking to implement an intro screen on first run of the app where a series of images are shown explaining the apps functionality and the idea behind it; you can swipe the images left or right and at the last image you get to the app by swiping.
I really like the sort of thing they have done with the CamScanner app but despite my searching I have no idea how to implement it other knowing a little bit about some people referring to Fragments. Any help would be appreciated greatly and since we need better UI on Android, a good answer would help a lot of developers take the cue! :)

create a method to show popup window. show images in a scroll view in that popup. at last image set touch listener to dismiss that popup.
and call that method from onResume method of your Activity like this
protected void onResume(){
super.onResume();
SharedPreferences pref = getSharedPreferences(MyPrefs, MODE_PRIVATE);
boolean b = pref.getBoolean("FirstTime",true);
if(b)
{ new Handler().postDelayed(new Runnable() {
public void run() {
showIntroPopup();
}
}, 100);
}
}
in that popup set "FirstTime" boolean to false in SharedPreferences.

Related

Android drag and return to previous activity like Facebook and Google Photos

I have been finding a way to implement animation like Facebook and Google Photos. When in 2nd Activity, when dragging images the images follow and the 2nd Activity started to fade out and we see 1st Activity. Images of what I was trying to ask is here.
Was you able to find a full fledged solution for this ?
https://github.com/nickbutcher/plaid , It might give clues to entry transition and how that was accomplished . So it might help you there. But how about when you want to drag and dismiss that activity?
https://github.com/Commit451/ElasticDragDismissLayout , Its an interesting library. Does do drags . But doesn't remember the position where the thumbnail where it was launched from. Only handles 1 swipe direction and dismisses by sliding to the right. So its not that close to what they do in 2017 Jun Google Photos Android application. You might have to modify it.
If anyone knows a better solution to this please do share.
I have found some code from Nick Butcher sample code.
ElasticDragDismissFrameLayout.java
and when using it:
chromeFader = new ElasticDragDismissFrameLayout.SystemChromeFader(getWindow()) {
#Override
public void onDragDismissed() {
finishAfterTransition();
}
};

floating View displaying on hover in android

I am trying to implement some hints when a user is hovering a button or another view, I see that android have support for onHoverListener but I don't understand how it really works. However I did try to find a solution how to make a floating editText on a button hover but I didn't find any ideas.
I am thinking that hover in android is the same think with long click because you can't hover with finger without clicking the view.
OnHoverListener is only implemented in 2 specific situations: a) when a Bluetooth or USB mouse is plugged into the device, or b) on Galaxy Note devices, when the S-Pen (stylus) is hovering over the object.
In specific setups/situations this can be a very neat feature, but unfortunately, most users will never even know it exists. For your situation, you may want to implement an OnLongClickListener for showing hints/tips as that is pretty standard in Android.
This example will show a TextView or ImageView hint for 5 seconds when a long-click is initiated:
btn.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View view) {
findViewById(R.id.hint).setVisibility(View.VISIBLE);
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
findViewById(R.id.hint).setVisibility(View.GONE);
}
}, 5000);
return true;
}
});
Hope this helps,
I want to add up on Aaron's answer.
Some devices with sensitive screens - Samsung S5 comes to mind - don't even need an s-pen.
Just need to hold your finger 1/2 inch over the screen and it would trigger it.

How to implement first launch tutorial like Android Lollipop apps: Like Sheets, Slides app?

I have Android 5.0 final build flashed in my Nexus 5. I noticed it has very beautiful, clean and elegant way of showing tutorial at first launch. Apps like "Sheets", "Slides" etc.
How can we implement that in our Android L compatible apps?
Also the app fades off the first launch screen and then shows the tutorial.
There is a pretty good library for emulating these first run tutorials:
https://github.com/PaoloRotolo/AppIntro
Click for larger image
First of all, there's no secret. The quality of the illustrations is the key to get this pretty result. So unless you're a designer yourself, you'll have to find a good designer for them.
Appart from that, I can see several ways to get close to this.
First, there's a very subtle parallax effect on the illustrations. You can achieve it by using this ParallaxTransformPage gist. I use it and it works pretty well.
Also, here's a lib that let you smoothly change the screen's background color while switching pages.
For the splashscreen fade out animation, you can do something like this :
final ImageView launchScreen = (ImageView) context.findViewById(R.id.launch_screen_view);
new Handler().postDelayed(new Runnable()
{
#Override
public void run()
{
Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.fade_out);
animation.setAnimationListener(new Animation.AnimationListener()
{
// ...
#Override
public void onAnimationEnd(Animation animation)
{
launchScreen.setVisibility(View.GONE);
}
});
launchScreen.startAnimation(animation);
}
}, 2000);
Follow linkas's answer for the use of a ViewPagerIndicator and how to launch the tutorial only the first time user launches the app.
This git should help you implement what you want:
https://github.com/spongebobrf/MaterialIntroTutorial,
This android Library demonstrating a material intro tutorial much like the ones on Google Sheets, as you mention.
In addition, this library takes the background color set for each page and when scrolling between the two pages, the two colors will fade into one another
Here are few more intro gits that can help you out:
https://github.com/HeinrichReimer/material-intro
https://github.com/PaoloRotolo/AppIntro
I found this library here:
CircleIndicator Library
It creates an Lollipop-like ViewPager with those circles. Just format the layout so that it's suitable for your app and then you should be fine. It doesn't contain an animation, but I think it's a start.
You can use ViewPagerIndicator here: http://viewpagerindicator.com/#download. Then, you should define SharedPreferences, to show that ViewPager only once. You can write:
public class MainActivity extends Activity {
public static final String MyPrefs = "MyPrefs";
...
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SharedPreferences sp = getSharedPreferences(MyPrefs, Context.MODE_PRIVATE);
if (!sp.getBoolean("first", false)) {
SharedPreferences.Editor editor = sp.edit();
editor.putBoolean("first", true);
editor.commit();
Intent intent = new Intent(this, SampleCirclesDefault.class); //call your ViewPager class
startActivity(intent);
}
}
}
Maybe you would like to use one of Roman Nurik solutions: https://github.com/romannurik/Android-WizardPager
If you do not want to use a library, it is pretty simple. I used to use a library before, but I started implementing a custom version. All you have to do is use a tabbed view and view pager. Then design all these pages in the tutorial as fragments. These fragments can have any buttons, in any position, and different styling as you like because you are implementing each fragment yourself. And it is not difficult. In the end, just use shared preferences, to check if it is the first run. If it is how the activity which has all the fragments. Else do not show that activity.

Moving between "pages" ( CCLayer ) in cocos2dx

I have 2 MyGameScreen objects that extends cocos2d::CCLayer. I am capturing the ccTouchesMove of the first screen so that I can create the moving effect exactly like sliding between pages of iOS application screen.
My class is like so:
class MyGameScreen: public cocos2d::CCLayer {
cocos2d::CCLayer* m_pNextScreen;
}
bool MyGameScreen::init() {
m_pNextScreen = MyOtherScreen::create();
}
void MyGameScreen::ccTouchesMoved(CCSet *touches, CCEvent *event){
// it crashes here... on the setPosition... m_pNextScreen is valid pointer though I am not sure that MyOtherScreen::create() is all I need to do...
m_pNextScreen->setPosition( CCPointMake( (fMoveTo - (2*fScreenHalfWidth)), 0.0f ) );
}
EDIT: adding clear question
It crashed when I try to setPosition on m_pNextScreen...
I have no idea why it crashed as m_pNextScreen is a valid pointer and is properly initialized. Could anybody explain why?
EDIT: adding progress report
I remodelled the whole system and make a class CContainerLayer : public cocos2d::CCLayer that contains both MyGameScreen and MyOtherScreen side by side. However, this looked like not an efficient approach, as when it grows I may need to have more than 2 pages scrollable side by side, I'd prefer to load the next page only when it is needed rather than the entire CContainerLayer that contains all the upcoming pages whether the user will scroll there or not... Do you have any better idea or github open source sample that does this?
Thank you very much for your input!
Use paging enable scrollview.download files from following link and place in your cocos2d/extenision/gui/ after that you have to set property of scrollview to enablepaging true with paging view size.
https://github.com/shauket/paging-scrollview
For Scene Transitions you can do this:
void MyGameScreen::ccTouchesMoved(CCSet *touches, CCEvent *event)
{
CCScene* MyOtherScene = CCTransitionFadeUp::create(0.2f, MyOtherScreen::scene());
CCDirector::sharedDirector()->replaceScene(MyOtherScene);
}

Android Homescreen using a button to scroll to the next screen as well as the slide bit

I am making an app that has a scrolling screen like the homescreen style. I have implemented this solution:
Android Homescreen
It works great but I also want there to be buttons on each page that you can click to go to the next page but I just can't figure out how to do it! can someone help? I've been staring at this code for days now!
Thanks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
UPDATE - HELP
I really don't understand how to get around the problem of calling the SetToScreen from the other activity, Can anyone help as if I try I do keep getting Static call errors.
Look at
public void setToScreen(int whichScreen) {}
Use this function to set to a screen on a click.
you should extend Draggablespace by adding a function to get the current space like:
public int getCurrentScreen() {
return this.mCurrentScreen;
}
then you can write your own functions in your activity like
public void nextScreen() {
draggableSpace.setToScreen(draggableSpace.getCurrentScreen() + 1));
}
The same for previous screen.
Now you only need to check if there is an additional screen waiting if you are going forward or backward.
(Of course draggableSpace is your object of the class draggablespace...not a static call!)

Categories

Resources