Langsung ke konten utama

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


Pada tutorial kali ini kita akan membuat Slide Page yang dibuat menggunakan kombinasi antara tab layout dengan view pager. Slide Page ini sudah biasa kita lihat pada aplikasi-aplikasi terkenal seperti WhatsApp, Youtube, google adsense, dan masih banyak lagi.



Untuk membuat Slide Page kita bisa memanfaatkan widget yang disediakan Android Studio yaitu Tab Layout dan View Pager. Tampilan yang nantinya kita buat akan tampak seperti berikut :



Sebelum memulai ada baiknya anda mengetahui struktur class, layout, drawable yang akan kita buat nantinya. Terdapat 4 class yang akan dibuat, satu class utama atau activity dan tiga class fragment yang nantinya akan dipanggil kedalam activity. Layout yang dibutuhkan ada 4 yaitu layout utama (activity_main) dan tiga layout fragment. Didalam drawable kita juga menambahkan ikon back untuk yang akan dipasang pada toolbar aplikasi nantinya, untuk menambahkan icon ini anda bisa menggunakan Vector Asset yang disediakan Android Studio.






Lanjut ke tahap pembuatan project baru :



Sebelum memulai menambahkan dan mengedit file, edit terlebih dahulu dependencies pada file build.grandle (Module.app) dan tambahkan kode dibawah. 
 
dependencies {
        ...
        implementation 'com.android.support:design:28.0.0'
        implementation 'com.android.support:support-v4:28.0.0'
 ...
}
Hal ini dimaksudkan untuk mengimport/mendownload library dari android studio sehingga widget Tab Layout dan View Pager dapat digunakan.

Buat FragmentSatu.java

 
public class FragmentSatu extends Fragment {
    public FragmentSatu(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_satu, container, false);

        return view;
    }
}

Buat FragmentDua.java

 
public class FragmentDua extends Fragment {
    public FragmentDua(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_dua, container, false);

        return view;
    }

}

Buat FragmentTiga.java

 
public class FragmentTiga extends Fragment {
    public FragmentTiga(){

    }
    @Override
    public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_tiga, container, false);
        return view;
    }
}

Buat Layout fragment_satu.xml

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/satu">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ini dalah tampilan"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="FRAGMENT SATU"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
    </LinearLayout>

</RelativeLayout>

Buat Layout fragment_dua.xml

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/dua">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ini dalah tampilan"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="FRAGMENT DUA"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
    </LinearLayout>

</RelativeLayout>

Buat Layout fragment_tiga.xml

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/tiga"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ini dalah tampilan"
        android:textColor="@color/white" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FRAGMENT TIGA"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:textStyle="bold" />
</LinearLayout>

Edit activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/biru">

            <android.support.v7.widget.Toolbar
                android:id="@+id/tol"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/ToolbarStyle"
                app:layout_scrollFlags="scroll|enterAlways"
                app:titleTextAppearance="@style/ToolbarStyle"></android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:tabIndicatorColor="@android:color/white"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="@color/grey">

                <android.support.design.widget.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab1" />

                <android.support.design.widget.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab2" />

                <android.support.design.widget.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab3" />
            </android.support.design.widget.TabLayout>
        </android.support.design.widget.AppBarLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

Edit MainActivity.java



 
public class MainActivity extends AppCompatActivity {

    private TabLayout tab;
    private ViewPager viewPager;
    private Toolbar toolbar;

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

        tab = findViewById(R.id.tab);
        viewPager = findViewById(R.id.view_pager);
        toolbar = findViewById(R.id.tol);

        setSupportActionBar(toolbar);
        toolbar.setTitle(R.string.app_name);
        toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_back));


        tab.setupWithViewPager(viewPager);
        SetupViewPager();
        tab.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    private void SetupViewPager() {
        MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager());
        adapter.AddFragment(new FragmentSatu(), "Tab1");
        adapter.AddFragment(new FragmentDua(), "Tab2");
        adapter.AddFragment(new FragmentTiga(), "Tab3");
        viewPager.setAdapter(adapter);
    }

    private class MyViewPagerAdapter extends FragmentPagerAdapter {
        private List<Fragment> fr = new ArrayList<>();
        private List<String> title = new ArrayList<>();
        public MyViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        public void AddFragment(Fragment fragment, String jd) {
            fr.add(fragment);
            this.title.add(jd);
        }

        @Override
        public Fragment getItem(int position){
            return fr.get(position);
        }

        @Override
        public CharSequence getPageTitle(int position){
            return title.get(position);
        }

        @Override
        public int getCount() {
            return 3;
        }
    }
}

Edit colors.xml

 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="biru">#0056FF</color>
    <color name="grey">#DDDDDD</color>
    <color name="white">#FFFFFF</color>
    <color name="satu">#810000</color>
    <color name="dua">#E6AA00</color>
    <color name="tiga">#003091</color>
</resources>

Edit style.xml

 
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>

    </style>
    <style name="ToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="titleTextColor">@color/white</item>
        <item name="android:tint">@color/white</item>
        <item name="android:textSize">18sp</item>

    </style>

</resources>

Run Aplikasi








Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Panduan Rinci Cara Membuat Website

Website adalah suatu kumpulan halaman berbentuk digital yang dapat diakses menggunakan perangkat lunak yang disebut Browser, dengan bantuan jaringan Internet. Penjelasan mengenai apa itu website telah dijelaskan sebelumnya di dalam postingan : Mengenal Apa Itu Web dan Hal yang Perlu di Perhatikan dalam Membangun Web . Didalam postingan tersebut sudah dijelaskan apa saja yang perlu diperhatikan dalam pembuatan web atau website. Selanjutnya pada postingan ini akan dijelaskan secara rinci bagaimana cara membuat sebuah website. Sebelum membuat sebuah website anda harus memutuskan terlebih dahulu akan membuat website seperti apa. Jika anda sudah menentukan tema web anda sekarang anda perlu menentukan aplikasi apa yang ingin anda gunakan. Apakah anda akan membuatnya secara native, menggunakan framework, atau menggunakan CMS. Pada postingan ini yang dijelaskan adalah langkah-langkah membuat sebuah website baik secara native, framework, ataupun menggunkan CMS. Silahkan anda simak langkah demi ...
Posting Komentar
Baca selengkapnya

Mengenal Sejarah Bahasa Pemrograman C++

C++ merupakan bahasa pemrograman tingkat menengah yang banyak dijadikan sebagai dasar pembelajaran dalam dunia pemrograman. Bahasa ini bisa dibilang mudah dipelajari sebab sudah menggunakan bahasa yang mirip dengan bahasa manusia dibandingkan dengan bahasa Assemble yang merupakan bahasa tingkat rendah. Salah satu keunggulan dari bahasa ini adalah kecepatannya dalam melakukan kompilasi kedalam bahasa mesin, selain itu bahasa c++ banyak dijadikan sebagai acuan untuk bahasa-bahasa pemrograman baru. Sejarah Awal Pembuatan Bahasa Pemrograman C++ Bahasa C++ dibuat oleh Bjarne Stroustrup yaitu seorang ilmuwan komputer dan profesor di bidang ilmu komputer di Texas A&M University. Profesor yang berasal dari Denmark ini dulunya tergabung dalam Computer Research Institute of Cambridge University dimana dia menghabiskan hari-harinya mengabdikan diri untuk meneliti perangkat lunak yang berjalan pada sistem terdistribusi. Sistem terdistribusi merupakan sistem dimana banyak komputer yang terhubu...
Posting Komentar
Baca selengkapnya

Pengenalan Route dan View Laravel Plus Membuat Tampilan Website Pertama Dengan Laravel - Coding Rakitan

 ( Source : Dokumentasi Pribadi ) Hallo sobat CODING RAKITAN, bagaimana kabarnya? Semoga semuanya sehat ya :). Pada artikel kali ini, saya akan membagikan tentang Route dan View pada Laravel dengan membuat halaman website sederhana. Tujuan akhirnya adalah agar teman-teman tahu konsep Route dan view pada Laravel. Bagi teman-teman yang belum menginstal Laravel-nya, silahkan diinstal dulu artikel saya sebelumnya. (Baca : Cara Install Laravel Terbaru Via Composer ). Okey, saya akan bahas dulu satu persatu apa itu Route dan View. Route Route kalau diterjemahkan jadi rute atau jalan. Rute atau jalan itu merupakan alur yang bisa kita lalui untuk menuju ke tempat tujuan kita. Jadi kita harus melewati jalan tertentu untuk sampai pada tujuan tertentu. Hehehe. Ah, gitulah! :) Intinya Route ini digunakan untuk memaping atau memetakan atau membuat peta url yang bisa kita gunakan untuk mengakses website Laravel kita. View View dalam laravel artinya tampilan, yaitu tempat dimana kita menyimpan se...
Posting Komentar
Baca selengkapnya