Membuat Intro Slider di Android

Menambahkan Introslides di aplikasi kita itu sangat bagus untuk menunjukan apa saja fitur yang ada di apikasi kita.

Di artikel kali ini saya akan menjelaskan dan membuat tutorial bagaimana cara membuat introslider .

1. Buat project baru dari file => new project dan pilih Empty Activity

2. Kemudian untuk pemilihan gambaa icon yang ada di slide, kalian bisa mendapatkannya di sini --> https://design.google.com/icons/  cari 4 gambar.

3. Setelah itu buka colors.xml dan tambahkan kode color dibawah ini.

4. kemudian buka strings.xml 

5. buka dimens.xml dan tambahkan kod dibawah ini

6. kemudian buka style



7. Buat java clasas dengan nama PrefManager.java dan lakukan perubahadibawah . isFirstTimeLaunch() return true, jika aplikasi ini pertama kali dijalankan

package blog.taufiqhidayah.introslider;

import android.content.Context;
import android.content.SharedPreferences;

/** * Created by Taufiq Hidayah on 01/08/16. */public class PrefManager {
    SharedPreferences pref;
    SharedPreferences.Editor editor;
    Context _context;

    int PRIVATE_MODE = 0;
    private static final String PREF_NAME = "androidhive-welcome";

    private static final String IS_FIRST_TIME_LAUNCH = "IsFirstTimeLaunch";

    public PrefManager(Context context) {
        this._context = context;
        pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);
        editor = pref.edit();
    }

    public void setFirstTimeLaunch(boolean isFirstTime) {
        editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime);
        editor.commit();
    }

    public boolean isFirstTimeLaunch() {
        
        return pref.getBoolean(IS_FIRST_TIME_LAUNCH, true);
    }

}

8. Buat 4 layout dengan nama welcome_slide1.xml, welcome_slide2.xml, welcome_slide3.xml dan welcome_slide4.xml do dalam folder res=> layout

welcomes_slide2.xml

welcome_slide3.xml

welcome_slide4.xml

9. kemudian buat new activity baru dengan nama WelcomeActivity.java untuk welcome slider
10. buka activity_welcome dan modify code dibawah ini. untuk membuat skip dan next
11. Buka Welcome_activity .java

package blog.taufiqhidayah.introslider;

import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

import blog.taufiqhidayah.introslider.PrefManager;

public class WelcomeActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
    private Button btnSkip, btnNext;
    private PrefManager prefManager;

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

        prefManager = new PrefManager(this);
        if (!prefManager.isFirstTimeLaunch()) {
            launchHomeScreen();
            finish();
        }

        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().getDecorView()

.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }

        setContentView(R.layout.activity_welcome);

        viewPager = (ViewPager) findViewById(R.id.view_pager);
        dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
        btnSkip = (Button) findViewById(R.id.btn_skip);
        btnNext = (Button) findViewById(R.id.btn_next);
        
        layouts = new int[]{
                R.layout.welcome_slide1,
                R.layout.welcome_slide2,
                R.layout.welcome_slide3,
                R.layout.welcome_slide4};

        addBottomDots(0);

        changeStatusBarColor();

        myViewPagerAdapter = new MyViewPagerAdapter();
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);

        btnSkip.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                launchHomeScreen();
            }
        });

        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                int current = getItem(+1);
                if (current < layouts.length) {
                    viewPager.setCurrentItem(current);
                } else {
                    launchHomeScreen();
                }
            }
        });
    }

    private void addBottomDots(int currentPage) {
        dots = new TextView[layouts.length];

        int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
        int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);

        dotsLayout.removeAllViews();
        for (int i = 0; i < dots.length; i++) {
            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("&#8226;"));
            dots[i].setTextSize(35);
            dots[i].setTextColor(colorsInactive[currentPage]);
            dotsLayout.addView(dots[i]);
        }

        if (dots.length > 0)
            dots[currentPage].setTextColor(colorsActive[currentPage]);
    }

    private int getItem(int i) {
        return viewPager.getCurrentItem() + i;
    }

    private void launchHomeScreen() {
        prefManager.setFirstTimeLaunch(false);
        startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
        finish();
    }

    ViewPager.OnPageChangeListener viewPagerPageChangeListener = 

new ViewPager.OnPageChangeListener() {

        @Override        public void onPageSelected(int position) {
            addBottomDots(position);
            if (position == layouts.length - 1) {
                btnNext.setText(getString(R.string.start));
                btnSkip.setVisibility(View.GONE);
            } else {
                btnNext.setText(getString(R.string.next));
                btnSkip.setVisibility(View.VISIBLE);
            }
        }

        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override        public void onPageScrollStateChanged(int arg0) {

        }
    };
    private void changeStatusBarColor() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
        }
    }

    public class MyViewPagerAdapter extends PagerAdapter {
        private LayoutInflater layoutInflater;

        public MyViewPagerAdapter() {
        }

        @Override        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(layouts[position], container, false);
            container.addView(view);

            return view;
        }

        @Override        public int getCount() {
            return layouts.length;
        }

        @Override        public boolean isViewFromObject(View view, Object obj) {
            return view == obj;
        }


        @Override        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }
    }
}

12. kemudian buka AndroidManifest.xml dan modifikasi code seperti dibawah ini

<activity android:name="blog.taufiqhidayah.introslider.WelcomeActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>
<activity    android:name="blog.taufiqhidayah.introslider.MainActivity"    

android:label="@string/title_activity_welcome"    

android:theme="@style/AppTheme.NoActionBar"></activity>

13. Kemudian Running

Terima kasih telah membaca artikel 'Membuat Intro Slider di Android' Semoga bermanfaat.

Bagikan Artikel ini di media sosial kamu:

• Tweet
• Share
• Share
• Share
• Share