Media Info: Android Studio: Cara Membuat Tabs

Selamat pagi semua, pada kali ini balidev akan share tentang cara membuat tabs pada aplikasi android menggunakan Android Studio.

Sebelum lebih lanjut mengenai pembuatan tabs, kalian sudah harus paham mengenai pembuatan fragment dan bagaimana fragment itu bekerja.

1# Buka android studio dan buatlah Empty Activity.

2# Buat 3 buah fragment masing-masing seperti di bawah ini:

buat file baru pada res->layout->dengan nama tabmenu.xml

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by ManInBack on 11/30/2016.
 */
public class tab1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v =inflater.inflate(R.layout.tabmenu,container,false);

        return v;

    }

}

Selanjutnya buat tab1.java yang akan memakai layout diatas

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by ManInBack on 11/30/2016.
 */

public class tab1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v =inflater.inflate(R.layout.tabmenu,container,false);

        return v;

    }

}

masuk lagi ke layout buat file baru dengan nama tabmenu2.xml

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

    <TextView
        android:text="Tab 2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView"
        android:textSize="24sp" />
</RelativeLayout>

Selanjutnya buat tab2.java yang akan menggunakan layout tabmenu2

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by ManInBack on 12/2/2016.
 */

public class tab2  extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v =inflater.inflate(R.layout.tabmenu2,container,false);

        return v;

    }
}

sekarang kita akan buat layout yang terakhir dengan nama tabmenu3.xml

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

    <TextView
        android:text="Tab 3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView2"
        android:textSize="24sp" />
</RelativeLayout>

Buat lagi tab3.java

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by ManInBack on 12/2/2016.
 */

public class tab3 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v =inflater.inflate(R.layout.tabmenu3,container,false);

        return v;

    }

}

Kita sudah membuat 3 buah fragment, sebelum lanjut saya melakukan pemilihan warna terlebih dahulu agar kelihatan lebih bagus tabsnya. Kalian bisa mengikuti silahkan masuk ke res->values->colors

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3498db</color>
    <color name="colorPrimaryDark">#2980b9</color>
    <color name="colorAccent">#FF4081</color>
    <color name="backgroundTab">#ecf0f1</color>
    <color name="tabIndicators">#3498db</color>
</resources>

Selanjutnya kita akan buat PagerAdapter yang berfungsi mengatur fragment-fragment yang sudah kita buat diatas. Buatlah dengan nama PagerAdapter.java dan berikut sintaksnya.

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

/**
 * Created by ManInBack on 11/30/2016.
 */

public class PagerAdapter extends FragmentStatePagerAdapter {
    int mNumOfTabs;

    public PagerAdapter(FragmentManager fm, int NumOfTabs) {
        super(fm);
        this.mNumOfTabs = NumOfTabs;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                tab1 tab1 = new tab1();
                return tab1;
            case 1:
                tab2 tab2 = new tab2();
                return tab2;
            case 2:
                tab3 tab3 = new tab3();
                return tab3;
            default:
                return null;
        }
    }

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

Sekarang kita akan masuk ke activity_main.xml untuk pembuatan tabsnya, pastikan kalian sudah menambahkan library android design. Caranya masuk ke build.gradle pada dependencies-nya tambahkan compile "com.android.support:design:23.4.0"

Masuk ke activity_main.xml, kita akan buat layoutnya, untuk konfigurasi saya sintaksnya seperti dibawah ini, silahkan sesuaikan dengan punya kalian jangan di copas.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.maninback.tab.MainActivity">

   <android.support.design.widget.TabLayout
       android:id="@+id/tablayout"
       android:clickable="true"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:background="@color/backgroundTab"
       app:tabIndicatorColor="@color/tabIndicators">

       <android.support.design.widget.TabItem
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="@string/tab1"/>
       <android.support.design.widget.TabItem
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="@string/tab2"/>
       <android.support.design.widget.TabItem
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="@string/tab3"/>

   </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tablayout"/>

</RelativeLayout>

Selanjutnya pada MainActivity.java buat sintaksnya seperti di bawah ini:

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;


public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        final PagerAdapter adapter = new PagerAdapter
                (getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.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) {

            }
        });
    }

}

Sampai disini coba kalian run projectnya semoga tidak ada error, di handphone saya bekerja dengan bagus di bawah ini Screenshootnya:

Sekian tutorialnya, bagi kalian yang ingin belajar yang dasar silahkan klik menu pemograman pada blog ini, sebelumnya saya sudah share yang dasar-dasar untuk pembuatan aplikasi android.

Baca juga artikel lainnya:

Media Info

Thursday, 1 December 2016

Android Studio: Cara Membuat Tabs

ARSIP BLOG

LABEL