Android Studio IDE

Aplikasi android terdiri dari beberapa activity. Beberapa activity bisa kita bagi menjadi 3 bagian besar diantaranya Intro – Otentikasi User – Inti Activity – Outro. Dalam bagian Intro kita sering menemukan beberapa activity seperti Splash Screen dan Landing Page. Sedangkan Otentikasi user berisi login dan register. Inti activity adalah activity yang mana menjadi tujuan aplikasi ini dibuat misal aplikasi Shopee yang memiliki activity sebagai tempat belajan online. Sedangkan Outro sendiri merupakan aplikasi penutup ketika user akan logout dan user akan menguninstal aplikasi. Dalam artikel kali ini kita akan mencoba membuat Intro untuk aplikasi android yang menarik.

1. Splash Screen berisi logo aplikasi atau identitas aplikasi yang ditunjukkan secara sederhana dan singkat dalam satu tampilan. Biasanya tampilan akan muncul tidak lebih dari 5 detik. Berikut adalah langkah – langkah membuat splash screen.

a. Buat activity baru dengan nama SplashScreen

b. Masukan gambar logo aplikasi kamu ke folder drawable.

c. Tambahkan program pada activity_splash_screen.xml.

<?xml version="1.0" encoding="utf-8"?&gt;
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".SplashScreen"&gt;

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="280dp"
        android:src="@drawable/excv"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /&gt;

    <TextView
        android:id="@+id/supp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/englebert"
        android:text="find your exclusive design with us"
        android:textColor="#000000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo" /&gt;

</androidx.constraintlayout.widget.ConstraintLayout&gt;

d. Kemudian masuk ke SplashScreen.java dan tambahkan kode untuk memanggil tampilan activity_splash_screen.xml namun hanya 3 detik saja. Kemudian tambahkan activity tujuan setelah splash screen.

public class SplashScreen extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //untuk bisa menampilkan activity full di layar smartphone
getWindow().setFlags(WindowManager.LayoutParams.
FLAG_FULLSCREEN,WindowManager.LayoutParams.
FLAG_FULLSCREEN); 
        setContentView(R.layout.activity_splash_screen);

//program untuk menangani tampilan splash selama 3 detik / 3000ms
        new Handler().postDelayed(() -> {  
		//activity tujuan setelah splashscreen berjalan 3 detik 
            Intent i = new Intent(SplashScreen.this, LandingPage.class);
            startActivity(i);
            finish();
        }, 3000); //delay splashscreen 3 detik

    }
}

e. Jangan lupa atur di AndroidManifest.xml agar activity SplashScreen menjadi launcher activity. Hasil tampilan akan seperti ini :

2. Landing Page berisi informasi singkat terkait aplikasi dan penggunaannya. Biasanya terdapat tidak lebih dari 5 tampilan. Landing page juga akan ditampilkan sekali untuk user yang baru saja menginstal aplikasi. Langkah – langkah membuat landing page adalah sebagai berikut :

a. Siapkan layout yang berisi informasi singkat mengenai aplikasi/penggunaan aplikasi. Didalam artikel ini kita memakai 3 layout. Dalam artikel ini dibuat 3 layout dengan nama slide1.xml, slide2.xml, slide3.xml

b. Isikan 3 layout sesuai dengan informasi apa saja yang ingin anda jabarkan.

c. Kemudian tambahkan program ini di activity_landing_page.xml berikut :

<?xml version="1.0" encoding="utf-8"?&gt;
<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"
    tools:showIn="@layout/activity_landing_page"&gt;

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/&gt;

    <LinearLayout
        android:id="@+id/layoutDots"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dots_height"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="@dimen/dots_margin_bottom"
        android:gravity="center"
        android:orientation="horizontal"/&gt;

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:alpha=".5"
        android:layout_above="@id/layoutDots"
        android:background="@android:color/white" /&gt;

    <Button
        android:id="@+id/btn_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@null"
        android:text="NEXT"
        android:textColor="@android:color/white" /&gt;

    <Button
        android:id="@+id/btn_skip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@null"
        android:text="SKIP"
        android:textColor="@android:color/white" /&gt;

</RelativeLayout&gt;

d. Kemudian beralih ke LandingPage.java

public class LandingPage extends AppCompatActivity {

    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
    private Button btnSkip, btnNext;
    private tim.excv.Preferences prefManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        // mengecek lauch activity - sebelum memanggil setContentView()
        prefManager = new Preferences(this);
        if (!prefManager.isFirstTimeLaunch()) {
            launchHomeScreen();
            finish();
        }

        // membuat transparan notifikasi
        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_landing_page);
        viewPager = findViewById(R.id.view_pager);
        dotsLayout = findViewById(R.id.layoutDots);
        btnSkip = findViewById(R.id.btn_skip);
        btnNext = findViewById(R.id.btn_next);


        // layout xml slide 1 sampai 4
        // add few more layouts if you want
        layouts = new int[]{
                R.layout.slide1,
                R.layout.slide2,
                R.layout.slide3};

        // tombol dots (lingkaran kecil perpindahan slide)
        addBottomDots(0);
        // membuat transparan notifikasi
        changeStatusBarColor();

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

        btnSkip.setOnClickListener(v -> launchHomeScreen());// membuat transparan notifikasi
        changeStatusBarColor();

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

        btnSkip.setOnClickListener(v -> launchHomeScreen());
        btnNext.setOnClickListener(v -> {
            // mengecek page terakhir (slide 4)
            // jika activity home sudah tampil
            int current = getItem(+1);
            if (current < layouts.length) {
                // move to next screen
                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 &gt; 0)
            dots[currentPage].setTextColor(colorsActive[currentPage]);
    }

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

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

    //  viewpager change listener
    ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            addBottomDots(position);

            // mengubah button lanjut 'NEXT' / 'GOT IT'
            if (position == layouts.length - 1) {
                // last page. make button text to GOT IT
                btnNext.setText(getString(R.string.start));
                btnSkip.setVisibility(View.GONE);
            } else {
                // still pages are left
                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) {

        }
    };

    /**
     * Making notification bar transparent
     */
    private void changeStatusBarColor() {
        if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
        }
    }

    /**
     * View pager adapter
     */
    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);
        }
    }
}

e. Pastinya nanti akan menemukan error dibagian R.array.array_dot_active dan R.array.array_dot_inactive. Maka tambahkan program di colors.xml dengan :

</color&gt;

    <!-- dots active colors --&gt;
    <color name="dot_light_screen1"&gt;#A9A9A9</color&gt;
    <color name="dot_light_screen2"&gt;#A9A9A9</color&gt;
    <color name="dot_light_screen3"&gt;#A9A9A9</color&gt;
    <color name="dot_light_screen4"&gt;#A9A9A9</color&gt;

    <array name="array_dot_active"&gt;
        <item&gt;@color/dot_light_screen1</item&gt;
        <item&gt;@color/dot_light_screen2</item&gt;
        <item&gt;@color/dot_light_screen3</item&gt;
        <item&gt;@color/dot_light_screen4</item&gt;
    </array&gt;

    <array name="array_dot_inactive"&gt;
        <item&gt;@color/dot_dark_screen1</item&gt;
        <item&gt;@color/dot_dark_screen2</item&gt;
        <item&gt;@color/dot_dark_screen3</item&gt;
        <item&gt;@color/dot_dark_screen4</item&gt;
    </array&gt;

f. Jalankan program dan akan menghasilkan tampilan seperti ini:

Nah bagaimana hasilnya? Sekian artikel tentang membuat Intro aplikasi yang menarik, semoga dapat memberimu pengetahuan dan manfaat untuk ide projek aplikasi kamu. Terima Kasih