CARA MEMBUAT SLIDE PADA EXCEL

Slide page merupakan salah satu konsep yang kekinian di dalam dunia digital. Banyak pengguna internet yang menyukai hal ini karena terlihat lebih modern dan responsif. Pada kesempatan kali ini, saya akan membahas tentang cara membuat slide page menggunakan tab layout dan view pager di Android Studio.

Baca Cepat show

Cara Membuat Slide Page Menggunakan Tab Layout dan View Pager di Android Studio

Sebelum memulai tutorial ini, pastikan bahwa kamu sudah memiliki instalasi Android Studio yang sudah terbaru dan siap untuk digunakan. Jika sudah, ikuti langkah-langkah berikut ini:

Buat project baru dengan nama “SlidePage” dan pilih “empty activity”.
Tambahkan dependensi untuk tab layout dan view pager di dalam build.gradle(Module: app):

dependencies 
    implementation 'com.google.android.material:material:1.2.1'

Buka file activity_main.xml dan tambahkan TabLayout dan ViewPager di dalamnya:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="-1dp" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tab_layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

Buka file MainActivity.java dan tambahkan kode berikut:

public class MainActivity extends AppCompatActivity 

    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = findViewById(R.id.view_pager);
        mTabLayout = findViewById(R.id.tab_layout);

        mViewPager.setAdapter(new SlidePageAdapter(getSupportFragmentManager()));
        mTabLayout.setupWithViewPager(mViewPager);
    

    private class SlidePageAdapter extends FragmentPagerAdapter 

        public SlidePageAdapter(FragmentManager fm) 
            super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
        

        @Override
        public Fragment getItem(int position) 
            switch (position) 
                case 0:
                    return new Fragment1();
                case 1:
                    return new Fragment2();
                case 2:
                    return new Fragment3();
                default:
                    return null;
            
        

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) 
            switch (position) 
                case 0:
                    return "Slide 1";
                case 1:
                    return "Slide 2";
                case 2:
                    return "Slide 3";
                default:
                    return null;
            
        

        @Override
        public int getCount() 
            return 3;

Pada kode di atas, kita mengatur adapter untuk ViewPager yang berisi tiga Fragment yang akan digunakan sebagai slide page. Setiap slide page akan ditampilkan di dalam Fragment yang berbeda.

Buat tiga file Fragment baru dengan nama Fragment1.java, Fragment2.java, dan Fragment3.java dan tambahkan kode berikut:

public class Fragment1 extends Fragment 

    public Fragment1() 

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        View view = inflater.inflate(R.layout.fragment_1, container, false);
        ImageView imageView = view.findViewById(R.id.imageView);
        Glide.with(getActivity()).load("https://1.bp.blogspot.com/-diGADF77u7M/XdiO3-WXQVI/AAAAAAAADcU/GGu9yBEulzYYdP_b09akZgCkS2MmNiqswCLcBGAsYHQ/s1600/Cara-Membuat-Slide-Page-Menggunakan-Tab-Layout-dan-View-Pager-di-Android-Studio.jpg").into(imageView);
        return view;
    


public class Fragment2 extends Fragment 

    public Fragment2() 

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        View view = inflater.inflate(R.layout.fragment_2, container, false);
        ImageView imageView = view.findViewById(R.id.imageView);
        Glide.with(getActivity()).load("https://i.ytimg.com/vi/dqgfx43i2sg/maxresdefault.jpg").into(imageView);
        return view;
    


public class Fragment3 extends Fragment 

    public Fragment3() 

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        View view = inflater.inflate(R.layout.fragment_3, container, false);
        ImageView imageView = view.findViewById(R.id.imageView);
        Glide.with(getActivity()).load("https://4.bp.blogspot.com/-SqQMVz8_vCA/Wuvv3OnyhZI/AAAAAAAAALo/c--zYQ0rJDkzczV9r-ymi46KBICYgCQkQCLcBGAs/s1600/membuatslideotomatispowerpoint%2B4-goliketrik.png").into(imageView);
        return view;

Pada kode di atas, kita menggunakan Glide untuk memuat gambar ke dalam ImageView yang berada di dalam masing-masing Fragment.

Buat tiga file layout baru dengan nama fragment_1.xml, fragment_2.xml, dan fragment_3.xml dan tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="Slide 1" />

</RelativeLayout>

Pada kode di atas, kita menggunakan ImageView sebagai placeholder untuk gambar yang akan ditampilkan pada slide page. Kamu dapat mengganti gambar pada masing-masing Fragment dengan menggunakan url gambar yang kamu inginkan.

Run project dan lihat hasilnya:

Itulah cara mudah untuk membuat slide page menggunakan tab layout dan view pager di Android Studio. Selamat mencoba!

FAQ

1. Apa itu slide page?

Slide page merupakan sebuah teknik desain yang menggabungkan beberapa slide menjadi satu tampilan yang responsif dan modern sehingga memudahkan interaksi pengguna dengan konten.

2. Mengapa slide page penting?

Slide page penting karena dapat membuat tampilan konten lebih menarik dan interaktif sehingga pengguna menjadi lebih tertarik untuk mengakses konten yang ada di dalamnya.

Video Tutorial

Berikut adalah video tutorial singkat yang akan membantu kamu memahami cara membuat slide page menggunakan tab layout dan view pager di Android Studio:

Baca Juga : CARA MEMBUAT RUNDOWN ACARA DI EXCEL