Skip to content

Instantly share code, notes, and snippets.

@MizzleDK
Last active September 27, 2019 13:46
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save MizzleDK/4e16582b259134b55d7c to your computer and use it in GitHub Desktop.
Save MizzleDK/4e16582b259134b55d7c to your computer and use it in GitHub Desktop.
Android intro screen
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/intro_background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/title"
android:gravity="center"
android:textColor="@android:color/white"
android:layout_gravity="top|center"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="32dp"
android:textSize="28sp"/>
<ImageView
android:id="@+id/computer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_computer_white_48dp" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/description"
android:gravity="center"
android:textColor="@android:color/white"
android:layout_gravity="bottom|center"
android:maxEms="18"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="32dp"
android:textSize="20sp"/>
</FrameLayout>
</FrameLayout>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/intro_background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/title"
android:gravity="center"
android:textColor="@android:color/white"
android:layout_gravity="top|center"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="32dp"
android:textSize="28sp"/>
<ImageView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_live_tv_white_48dp" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/description"
android:gravity="center"
android:textColor="@android:color/white"
android:layout_gravity="bottom|center"
android:maxEms="18"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="32dp"
android:textSize="20sp"/>
</FrameLayout>
</FrameLayout>
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
public class IntroActivity extends ActionBarActivity {
private ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.intro_layout);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
// Set an Adapter on the ViewPager
mViewPager.setAdapter(new IntroAdapter(getSupportFragmentManager()));
// Set a PageTransformer
mViewPager.setPageTransformer(false, new IntroPageTransformer());
}
}
public class IntroAdapter extends FragmentPagerAdapter {
public IntroAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return IntroFragment.newInstance(Color.parseColor("#03A9F4"), position); // blue
default:
return IntroFragment.newInstance(Color.parseColor("#4CAF50"), position); // green
}
}
@Override
public int getCount() {
return 2;
}
}
public class IntroFragment extends Fragment {
private static final String BACKGROUND_COLOR = "backgroundColor";
private static final String PAGE = "page";
private int mBackgroundColor, mPage;
public static IntroFragment newInstance(int backgroundColor, int page) {
IntroFragment frag = new IntroFragment();
Bundle b = new Bundle();
b.putInt(BACKGROUND_COLOR, backgroundColor);
b.putInt(PAGE, page);
frag.setArguments(b);
return frag;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (!getArguments().containsKey(BACKGROUND_COLOR))
throw new RuntimeException("Fragment must contain a \"" + BACKGROUND_COLOR + "\" argument!");
mBackgroundColor = getArguments().getInt(BACKGROUND_COLOR);
if (!getArguments().containsKey(PAGE))
throw new RuntimeException("Fragment must contain a \"" + PAGE + "\" argument!");
mPage = getArguments().getInt(PAGE);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Select a layout based on the current page
int layoutResId;
switch (mPage) {
case 0:
layoutResId = R.layout.intro_fragment_layout_1;
break;
default:
layoutResId = R.layout.intro_fragment_layout_2;
}
// Inflate the layout resource file
View view = getActivity().getLayoutInflater().inflate(layoutResId, container, false);
// Set the current page index as the View's tag (useful in the PageTransformer)
view.setTag(mPage);
return view;
}
@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
// Set the background color of the root view to the color specified in newInstance()
View background = view.findViewById(R.id.intro_background);
background.setBackgroundColor(mBackgroundColor);
}
}
public class IntroPageTransformer implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
// Get the page index from the tag. This makes
// it possible to know which page index you're
// currently transforming - and that can be used
// to make some important performance improvements.
int pagePosition = (int) page.getTag();
// Here you can do all kinds of stuff, like get the
// width of the page and perform calculations based
// on how far the user has swiped the page.
int pageWidth = page.getWidth();
float pageWidthTimesPosition = pageWidth * position;
float absPosition = Math.abs(position);
// Now it's time for the effects
if (position <= -1.0f || position >= 1.0f) {
// The page is not visible. This is a good place to stop
// any potential work / animations you may have running.
} else if (position == 0.0f) {
// The page is selected. This is a good time to reset Views
// after animations as you can't always count on the PageTransformer
// callbacks to match up perfectly.
} else {
// The page is currently being scrolled / swiped. This is
// a good place to show animations that react to the user's
// swiping as it provides a good user experience.
// Let's start by animating the title.
// We want it to fade as it scrolls out
View title = page.findViewById(R.id.title);
title.setAlpha(1.0f - absPosition);
// Now the description. We also want this one to
// fade, but the animation should also slowly move
// down and out of the screen
View description = page.findViewById(R.id.description);
description.setTranslationY(-pageWidthTimesPosition / 2f);
description.setAlpha(1.0f - absPosition);
// Now, we want the image to move to the right,
// i.e. in the opposite direction of the rest of the
// content while fading out
View computer = page.findViewById(R.id.computer);
// We're attempting to create an effect for a View
// specific to one of the pages in our ViewPager.
// In other words, we need to check that we're on
// the correct page and that the View in question
// isn't null.
if (pagePosition == 0 && computer != null) {
computer.setAlpha(1.0f - absPosition);
computer.setTranslationX(-pageWidthTimesPosition * 1.5f);
}
// Finally, it can be useful to know the direction
// of the user's swipe - if we're entering or exiting.
// This is quite simple:
if (position < 0) {
// Create your out animation here
} else {
// Create your in animation here
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment