[SOURCE CODE] PreferenceFragment dengan Tab dan ViewPager

- Monday, October 17, 2016

  1. Import Unofficial PreferenceFragment dari https://github.com/Machinarius/PreferenceFragment-Compat
  2. Buka layout activity_main.xml buat kodenya sebagai berikut :
    <?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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:id="@+id/linearlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:orientation="vertical">
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentInsetStart="16dp"/>
    
            <android.support.design.widget.TabLayout
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="40.0dp" />
        </LinearLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:background="#80000000" />
    </LinearLayout>
    
  3. Buat resource file dengan resource type xml meliputi theme_settings.xml, color_settings.xml dan about_settings.xml.
  4. Buat class Fragment, banyaknya fragment tergantung berapa tab yang akan kita buat. Sebagai contoh saya menggunakan 3 tab, maka dari itu saya membuat 3 fragment, yaitu FragmentTema, FragmentWarna, FragmentTentang.
    - FragmentTema.java
    package id.delta.settings.fragment;
    
    import android.os.Bundle;
    
    import com.github.machinarius.preferencefragment.PreferenceFragment;
    
    import id.delta.settings.R;
    
    /**
     * Created by Administrator on 10/17/16.
     */
    
    public class FragmentTema extends PreferenceFragment {
        // PreferenceFragment di sini menggunakan PreferenceFragment yang dari https://github.com/Machinarius/PreferenceFragment-Compat
        @Override
        public void onCreate(Bundle paramBundle) {
            super.onCreate(paramBundle);
            addPreferencesFromResource(R.xml.theme_settings);
        }
    }
    

    - FragmentWarna.java
    package id.delta.settings.fragment;
    
    import android.os.Bundle;
    
    import com.github.machinarius.preferencefragment.PreferenceFragment;
    
    import id.delta.settings.R;
    
    /**
     * Created by Administrator on 10/17/16.
     */
    
    public class FragmentWarna extends PreferenceFragment {
        // PreferenceFragment di sini menggunakan PreferenceFragment yang dari https://github.com/Machinarius/PreferenceFragment-Compat
        @Override
        public void onCreate(Bundle paramBundle) {
            super.onCreate(paramBundle);
            addPreferencesFromResource(R.xml.color_settings);
        }
    }
    

    - FragmentTentang.java
    package id.delta.settings.fragment;
    
    import android.os.Bundle;
    
    import com.github.machinarius.preferencefragment.PreferenceFragment;
    
    import id.delta.settings.R;
    
    /**
     * Created by Administrator on 10/17/16.
     */
    
    public class FragmentTentang extends PreferenceFragment {
        // PreferenceFragment di sini menggunakan PreferenceFragment yang dari https://github.com/Machinarius/PreferenceFragment-Compat
        @Override
        public void onCreate(Bundle paramBundle) {
            super.onCreate(paramBundle);
            addPreferencesFromResource(R.xml.about_settings);
        }
    }
    
  5. Buat class baru dengan nama SettingsAdapter.java dengan isi kode sebagai berikut :
    package id.delta.settings.adapter;
    
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentStatePagerAdapter;
    
    import id.delta.settings.fragment.FragmentTema;
    import id.delta.settings.fragment.FragmentTentang;
    import id.delta.settings.fragment.FragmentWarna;
    
    /**
     * Created by Administrator on 10/17/16.
     */
    
    public class SettingsAdapter extends FragmentStatePagerAdapter {
    
        public SettingsAdapter(FragmentManager fragmentManager){
            super(fragmentManager);
        }
    
        @Override
        public Fragment getItem(int position) {
            Fragment fragment = null;
            switch (position){
                case 0:
                    fragment=new FragmentTema();
                    break;
                case 1:
                    fragment=new FragmentWarna();
                    break;
                case 2:
                    fragment=new FragmentTentang();
                    break;
            }
    
            return fragment;
        }
    
        @Override
        public int getCount() {
            return 3;
        }
    
        @Override
        public CharSequence getPageTitle(int position) {
            String title=" ";
            switch (position){
                case 0:
                    title="THEME";
                    break;
                case 1:
                    title="COLOR";
                    break;
                case 2:
                    title="ABOUT";
                    break;
            }
    
            return title;
        }
    }
    
  6. Buka MainActivity.java edit seperti berikut :
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            setupView();
        }
    
        void setupView(){
            //Toolbar
            Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
    
            //ViewPager
            ViewPager mPager = (ViewPager) findViewById(R.id.pager);
            mPager.setAdapter(new SettingsAdapter(getSupportFragmentManager()));
            mPager.setOffscreenPageLimit(3);
    
            //TabLayout
            TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
            tabs.setupWithViewPager(mPager);
        }
    }
    
  7. Isi xml theme_settings, color_settings dan about_settings sesuai dengan yang anda inginkan.


EmoticonEmoticon

 

Start typing and press Enter to search