Saturday, March 12, 2016

202 MyClub Apps Demo How To Create Walkthrough Screen In Android



.
202 MyClub Apps Demo How To Create Walkthrough Screen In Android
This tutorial demonstrate the steps to create Android Walkthrough Screen Screen based on the Tabbed Activity Templates available in Android Studio.
The Walkthrough basically displays…
...the apps title
...the first point
...the second point
...the third point
and then it loads the Next Activity.
The user can choose to skip the pages by tapping the Floating Action Button.

1) Create a new project using Tabbed Activity

Give a name “Walkthrough” to the activity.

2) Prepare the resources

2.1) Create/Edit the Apps Title image

We can use online services like www.flamingtext.com to create a simple logo for the apps title.
splashtitle_transparent.png
(File: splashtitle_transparent.png)

2.2) Create/Edit the image icons

We can use Image Online Editors like www.pixlr.com/editor to edit images and icons.
This apps uses one background image, three icon images and one title image as shown below. They are provided here so that you can download them as use in your project as well.
Download the zip file above and put the contents under your drawable folder as shown below.

2.3) Define the suitable Color Scheme

Use the Online Tools like www.materialpalette.com to generate a suitable Color Scheme for the apps.
File: res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#795548</color>
   <color name="colorPrimaryDark">#5D4037</color>
   <color name="colorAccent">#FF5722</color>
</resources>

3) Edit Layout Files

We want the page to appear full screen.
Therefore, delete the AppBarLayout widget element.
File: res/layout/activity_walkthrough.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/main_content"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:fitsSystemWindows="true"
   tools:context="com.notarazi.myclub1.Walkthrough">
   <android.support.design.widget.AppBarLayout
       android:id="@+id/appbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:paddingTop="@dimen/appbar_padding_top"
       android:theme="@style/AppTheme.AppBarOverlay">
       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           android:background="?attr/colorPrimary"
           app:layout_scrollFlags="scroll|enterAlways"
           app:popupTheme="@style/AppTheme.PopupOverlay">
       </android.support.v7.widget.Toolbar>
       <android.support.design.widget.TabLayout
           android:id="@+id/tabs"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />
   </android.support.design.widget.AppBarLayout>
   <android.support.v4.view.ViewPager
       android:id="@+id/container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:layout_behavior="@string/appbar_scrolling_view_behavior" />
   <android.support.design.widget.FloatingActionButton
       android:id="@+id/fab"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="end|bottom"
       android:layout_margin="@dimen/fab_margin"
       android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Modify the fragment layout so that it contains a background image, ImageView and TextView with additional attributes.
File: res/layout/fragment_walkthrough.xml
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:background="@drawable/splashbackground"
   tools:context="com.notarazi.myclub1.Walkthrough$PlaceholderFragment"
   >
   <ImageView
       android:id="@+id/ivw_walkthrough"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:background="@drawable/splashtitle_transparent"
       />
   <TextView
       android:id="@+id/tvw_walkthrough"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="..."
       android:textSize="15pt"
       android:textStyle="bold"
       android:layout_centerHorizontal="true"
       android:textAlignment="center"
       android:layout_below="@id/ivw_walkthrough"
       android:textColor="#ffffff"
       android:shadowColor="#000000"
       android:shadowDx="-2"
       android:shadowDy="-2"
       android:shadowRadius="1"
   />
</RelativeLayout>
OUTCOME.

4)  Edit the Controller File

Our Controller File, ie Walkthrough.java will implement the following logic…
… ViewPager contains 4 fragment pages
… automatically switches the ViewPager fragment page in 3 seconds duration
… automatically loads the Image and Text according to the fragment page index
… automatically starts the Next Activity after the last fragment page is displayed
… the apps user can skip the fragment pages by tapping the Floating Action Button
We use a runnable class to handle the delay process.
File: Walkthrough.java
package com.notarazi.myclub1;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class Walkthrough extends AppCompatActivity {
   /**
    * The {@link android.support.v4.view.PagerAdapter} that will provide
    * fragments for each of the sections. We use a
    * {@link FragmentPagerAdapter} derivative, which will keep every
    * loaded fragment in memory. If this becomes too memory intensive, it
    * may be best to switch to a
    * {@link android.support.v4.app.FragmentStatePagerAdapter}.
    */
   private SectionsPagerAdapter mSectionsPagerAdapter;
   /**
    * The {@link ViewPager} that will host the section contents.
    */
   private ViewPager mViewPager;
   private Handler handler;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_walkthrough);
       // Create the adapter that will return a fragment for each of the three
       // primary sections of the activity.
       mSectionsPagerAdapter new SectionsPagerAdapter(getSupportFragmentManager());
       // Set up the ViewPager with the sections adapter.
       mViewPager = (ViewPager) findViewById(R.id.container);
       mViewPager.setAdapter(mSectionsPagerAdapter);
       handler new Handler();
       new Thread(new Task()).start();
       FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
       fab.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               Intent i = new Intent(Walkthrough.this, NextActivity.class);
               startActivity(i);
           }
       });
   }
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       // Inflate the menu; this adds items to the action bar if it is present.
       getMenuInflater().inflate(R.menu.menu_walkthrough, menu);
       return true;
   }
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       // Handle action bar item clicks here. The action bar will
       // automatically handle clicks on the Home/Up button, so long
       // as you specify a parent activity in AndroidManifest.xml.
       int id = item.getItemId();
       //noinspection SimplifiableIfStatement
       if (id == R.id.action_settings) {
           return true;
       }
       return super.onOptionsItemSelected(item);
   }
   /**
    * A placeholder fragment containing a simple view.
    */
   public static class PlaceholderFragment extends Fragment {
       /**
        * The fragment argument representing the section number for this
        * fragment.
        */
       private static final String ARG_SECTION_NUMBER "section_number";
       public PlaceholderFragment() {
       }
       /**
        * Returns a new instance of this fragment for the given section
        * number.
        */
       public static PlaceholderFragment newInstance(int sectionNumber) {
           PlaceholderFragment fragment = new PlaceholderFragment();
           Bundle args = new Bundle();
           args.putInt(ARG_SECTION_NUMBER, sectionNumber);
           fragment.setArguments(args);
           return fragment;
       }
       @Override
       public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                Bundle savedInstanceState) {
           int pageIndex=0;
           pageIndex=getArguments().getInt(ARG_SECTION_NUMBER);
           View rootView = inflater.inflate(R.layout.fragment_walkthrough, container,false);
           ImageView ivwWalkthrough=(ImageView)rootView.findViewById(R.id.ivw_walkthrough);
           TextView textView = (TextView) rootView.findViewById(R.id.tvw_walkthrough);
           if (pageIndex==1) {
               ivwWalkthrough.setBackgroundResource(R.drawable.splashtitle_transparent);
               textView.setText("");
           }else if (pageIndex==2) {
               ivwWalkthrough.setBackgroundResource(R.drawable.splashmeeting_lightprimary);
               textView.setText("...conducive seminar venues...");
           }else if (pageIndex==3) {
               ivwWalkthrough.setBackgroundResource(R.drawable.splashdine_lightprimary);
               textView.setText("...tasteful delights...");
           }else if (pageIndex==4) {
               ivwWalkthrough.setBackgroundResource(R.drawable.splashfitness_lightprimary);
               textView.setText("...healthy lifestyles...");
           }
           return rootView;
       }
   }
   /**
    * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
    * one of the sections/tabs/pages.
    */
   public class SectionsPagerAdapter extends FragmentPagerAdapter {
       public SectionsPagerAdapter(FragmentManager fm) {
           super(fm);
       }
       @Override
       public Fragment getItem(int position) {
           // getItem is called to instantiate the fragment for the given page.
           // Return a PlaceholderFragment (defined as a static inner class below).
           return PlaceholderFragment.newInstance(position + 1);
       }
       @Override
       public int getCount() {
           // Show 4 total pages.
           return 4;
       }
       @Override
       public CharSequence getPageTitle(int position) {
           switch (position) {
               case 0:
                   return "SECTION 1";
               case 1:
                   return "SECTION 2";
               case 2:
                   return "SECTION 3";
               case 3:
                   return "SECTION 4";
           }
           return null;
       }
   }
   class Task implements Runnable {
       @Override
       public void run() {
           mViewPager = (ViewPager) findViewById(R.id.container);
           for (int i = 0; i < 5; i++) {
               final int value = i;
               try {
                   Thread.sleep(3000);
               } catch (InterruptedException e) {
                   e.printStackTrace();
               }
               handler.post(new Runnable() {
                   @Override
                   public void run() {
                       mViewPager.setCurrentItem(valuetrue);
                   }
               });
           }
           Intent i = new Intent(Walkthrough.this, NextActivity.class);
           startActivity(i);
           //close this activity
           finish();
       }
   }
}
We also include an Empty Activity class, ie NextActivity.java to demonstrate the transition from the Walkthrough Activity to the next activity in the apps.
MyClub1-Splashscreen.gif

DOWNLOAD

FURTHER READING

No comments:

Post a Comment