Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Thread Contributor: Ravishankar ChavareHow To Create App Intro Slider
#1
Hello friends app intro slider is the slider when first time user open app to show services and more short description about product and company today we are building App Intro slider using appintro library

DEMO




Step 1: First create a new project in android studio as named Appintroslider

Step 2:  Now open build.gradle(Project level) and add following code.
Code:
allprojects {
   repositories {
       maven { url 'https://jitpack.io' }
       google()
       jcenter()
   }
}

Step 3:  Now open build.gradle(Module level app) and add following code in dependencies.

Code:
compile 'com.github.apl-devs:appintro:v4.2.2'

Now click on sync now and wait to complete sync  gradle building


Step 4: Now create layout file for your slider as follows:

go to res/layout to add your slider xml files

1.app_intro1.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/main_layout"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_weight="10"
   android:background="#0385a3"
   android:orientation="vertical">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_gravity="center"
       android:layout_weight="3"
       android:gravity="center"
       android:paddingLeft="32dp"
       android:paddingRight="29dp"
       android:text="Welcome to ProTutr"
       android:textColor="#ffffff"
       android:textSize="27sp"
       android:textStyle="bold" />

   <LinearLayout
       android:layout_width="fill_parent"
       android:layout_height="0dp"
       android:layout_weight="5"
       android:gravity="center"
       android:orientation="vertical">

       //image link from drawable folder

       <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:paddingLeft="16dp"
           android:paddingRight="16dp"
           android:src="@drawable/coding" />
   </LinearLayout>

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_gravity="center"
       android:layout_weight="3"
       android:gravity="center"
       android:paddingLeft="64dp"
       android:paddingRight="64dp"
       android:text="The New Way To Learn Code.."
       android:textColor="#ffffff"
       android:textSize="26sp" />

   <TextView
       android:layout_width="fill_parent"
       android:layout_height="62dp" />
</LinearLayout>

OUTPUT:
[Image: OlhK7m0m.png]

2.app_intro2.xml

Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/main_layout"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_weight="10"
   android:background="#03a373"
   android:orientation="vertical">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_gravity="center"
       android:layout_weight="3"
       android:gravity="center"
       android:paddingLeft="32dp"
       android:paddingRight="29dp"
       android:text="Code Learning"
       android:textColor="#ffffff"
       android:textSize="27sp"
       android:textStyle="bold" />

   <LinearLayout
       android:layout_width="fill_parent"
       android:layout_height="0dp"
       android:layout_weight="5"
       android:gravity="center"
       android:orientation="vertical">

       <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:paddingLeft="16dp"
           android:paddingRight="16dp"
           android:src="@drawable/program" />
   </LinearLayout>

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_gravity="center"
       android:layout_weight="3"
       android:gravity="center"
       android:paddingLeft="64dp"
       android:paddingRight="64dp"
       android:text="Java,Android,Python,And more.."
       android:textColor="#ffffff"
       android:textSize="26sp" />

   <TextView
       android:layout_width="fill_parent"
       android:layout_height="62dp" />
</LinearLayout>

OUTPUT:
[Image: XPw7ho4m.png]


3.app_intro3.xml

Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/main_layout"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_weight="10"
   android:background="#b704c4"
   android:orientation="vertical">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_gravity="center"
       android:layout_weight="3"
       android:gravity="center"
       android:paddingLeft="32dp"
       android:paddingRight="29dp"
       android:text="Job Vacancies"
       android:textColor="#ffffff"
       android:textSize="27sp"
       android:textStyle="bold" />

   <LinearLayout
       android:layout_width="fill_parent"
       android:layout_height="0dp"
       android:layout_weight="5"
       android:gravity="center"
       android:orientation="vertical">

       <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:paddingLeft="16dp"
           android:paddingRight="16dp"
           android:src="@drawable/job" />
   </LinearLayout>

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_gravity="center"
       android:layout_weight="3"
       android:gravity="center"
       android:paddingLeft="64dp"
       android:paddingRight="64dp"
       android:text="Get Job Vacancies Details Posted By Topmost Companies"
       android:textColor="#ffffff"
       android:textSize="26sp" />

   <TextView
       android:layout_width="fill_parent"
       android:layout_height="62dp" />
</LinearLayout>

OUTPUT:
[Image: 6QtlhTem.png]


4.app_intro4.xml

Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/main_layout"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_weight="10"
   android:background="#02a155"
   android:orientation="vertical">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_gravity="center"
       android:layout_weight="3"
       android:gravity="center"
       android:paddingLeft="32dp"
       android:paddingRight="29dp"
       android:text="Teach To World"
       android:textColor="#ffffff"
       android:textSize="27sp"
       android:textStyle="bold" />

   <LinearLayout
       android:layout_width="fill_parent"
       android:layout_height="0dp"
       android:layout_weight="5"
       android:gravity="center"
       android:orientation="vertical">

       <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:paddingLeft="16dp"
           android:paddingRight="16dp"
           android:src="@drawable/teach" />
   </LinearLayout>

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_gravity="center"
       android:layout_weight="3"
       android:gravity="center"
       android:paddingLeft="64dp"
       android:paddingRight="64dp"
       android:text="Post Your Content On Protutr"
       android:textColor="#ffffff"
       android:textSize="26sp" />

   <TextView
       android:layout_width="fill_parent"
       android:layout_height="62dp" />
</LinearLayout>

OUTPUT:
[Image: 3TJXW3am.png]


Step 5: Now add permission of VIBRATE  inside manifest file


Code:
<uses-permission android:name="android.permission.VIBRATE"/>

Step 6: Now create a class called AppIntroSampleSlider extends to Fragment.

Code:
//Android App Intro Slider
package com.protutr.appintroslider;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
* Created by HP on 10/23/2016.
*/
public class AppIntroSampleSlider extends Fragment {
   //Layout id
   private static final String ARG_LAYOUT_RES_ID = "layoutResId";

   public static AppIntroSampleSlider newInstance(int layoutResId) {
       AppIntroSampleSlider sampleSlide = new AppIntroSampleSlider();

       Bundle bundleArgs = new Bundle();
       bundleArgs.putInt(ARG_LAYOUT_RES_ID, layoutResId);
       sampleSlide.setArguments(bundleArgs);

       return sampleSlide;
   }

   private int layoutResId;

   public AppIntroSampleSlider() {}

   @Override
   public void onCreate(@Nullable Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);

       if(getArguments() != null && getArguments().containsKey(ARG_LAYOUT_RES_ID))
           layoutResId = getArguments().getInt(ARG_LAYOUT_RES_ID);
   }

   @Nullable
   @Override
   public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
       return inflater.inflate(layoutResId, container, false);
   }

}
Step 7:Now create class MyIntro.java and extends it to AppIntro
Code:
package com.protutr.appintroslider;

import android.content.Intent;
import android.os.Bundle;
import android.widget.Toast;

import com.github.paolorotolo.appintro.AppIntro;

/**
* Created by HP on 10/23/2016.
*/
public class MyIntro extends AppIntro {
   // Please DO NOT override onCreate. Use init
   @Override
   public void init(Bundle savedInstanceState) {

       //adding the three slides for introduction app you can ad as many you needed
       addSlide(AppIntroSampleSlider.newInstance(R.layout.app_intro1));
       addSlide(AppIntroSampleSlider.newInstance(R.layout.app_intro2));
       addSlide(AppIntroSampleSlider.newInstance(R.layout.app_intro3));
       addSlide(AppIntroSampleSlider.newInstance(R.layout.app_intro4));

       // Show and Hide Skip and Done buttons
       showStatusBar(false);
       showSkipButton(false);

       // Turn vibration on and set intensity
       // You will need to add VIBRATE permission in Manifest file
       setVibrate(true);
       setVibrateIntensity(30);

       //Add animation to the intro slider
       setDepthAnimation();
   }

   @Override
   public void onSkipPressed() {
       // Do something here when users click or tap on Skip button.
       Toast.makeText(getApplicationContext(),
               getString(R.string.app_intro_skip), Toast.LENGTH_SHORT).show();
       Intent i = new Intent(getApplicationContext(), MainActivity.class);
       startActivity(i);
   }

   @Override
   public void onNextPressed() {
       // Do something here when users click or tap on Next button.
   }

   @Override
   public void onDonePressed() {
       // Do something here when users click or tap tap on Done button.
       finish();
   }

   @Override
   public void onSlideChanged() {
       // Do something here when slide is changed
   }
}



Step 8:Now in MainActivity Add following code
Code:
package com.protutr.appintroslider;

import android.content.Intent;
import android.content.SharedPreferences;
import android.preference.PreferenceManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
   public boolean isFirstStart;


   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       Thread t = new Thread(new Runnable() {
           @Override
           public void run() {
               //  Intro App Initialize SharedPreferences
               SharedPreferences getSharedPreferences = PreferenceManager
                       .getDefaultSharedPreferences(getBaseContext());

               //  Create a new boolean and preference and set it to true
               isFirstStart = getSharedPreferences.getBoolean("firstStart", true);

               //  Check either activity or app is open very first time or not and do action
               if (isFirstStart) {

                   //  Launch application introduction screen
                   Intent i = new Intent(MainActivity.this, MyIntro.class);
                   startActivity(i);
                   SharedPreferences.Editor e = getSharedPreferences.edit();
                   e.putBoolean("firstStart", false);
                   e.apply();
               }
           }
       });
       t.start();
   }
}


Step 9:Now add some codes inside 
styles.xml
Code:
<style name="FullscreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="android:windowActionBar">false</item>
       <item name="android:windowNoTitle">true</item>
</style>

strings.xml
Code:
   <string name="app_intro_skip">Skip</string>



Now Run android app 

Download From Github
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)