[Android] Make ViewPager feel rich

Tabs can be easily implemented using ViewPager, and transitions between tabs can be done by swiping or tapping tabs.

If you want to make it look a little cool, the difficulty will increase. Even if I googled it, it was good because it was good.

Perhaps the goal can be achieved by copying and pasting.

** ★ Goal: Display images and text on the ViewPager tab **

1. Preparation of ViewPager layout

`layout_main_tab.xml`


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

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--Tab part-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.v4.view.ViewPager>

</RelativeLayout>

2. Prepare tab layout

`layout_custom_tab.xml`


<?xml version="1.0" encoding="utf-8"?>
<!--Custom tab-->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/customTab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <!--Tab icon-->
    <ImageView
        android:id="@+id/tabIcon"
        android:layout_marginTop="8dp"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerHorizontal="true" />
    
    <!--Tab text-->
    <TextView
        android:id="@+id/tabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:paddingBottom="6dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

3. Prepare the contents to be displayed while selecting each tab

3.1. Contents of Browser tab

`fragment_web_browser.xml`


<?xml version="1.0" encoding="utf-8"?>
<!--Web browser fragment-->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragmentWebBrowser"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.WebBrowserFragment">

    <!--Web browser-->
    <WebView
        android:id="@+id/webBrowser"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

3.2. Contents of Download List tab (Tekito)

`fragment_download_list.xml`


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

</android.support.constraint.ConstraintLayout>

4. Implement each tab in MainActivity.java

`MainActiity.java`



import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.content.res.ResourcesCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.support.design.widget.TabLayout;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import jp.jackall.androiddownloader.R;
import jp.jackall.androiddownloader.adapter.LayoutMainTabPagerAdapter;
import jp.jackall.androiddownloader.util.Constants;

public class MainActivity extends AppCompatActivity {

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

        initView();
    }

    /**
     *Main screen settings
     */
    private void initView() {
        //ViewPager settings
        LayoutMainTabPagerAdapter pagerAdapter = new LayoutMainTabPagerAdapter(getSupportFragmentManager());
        ViewPager viewPager = (ViewPager)findViewById(R.id.pager);
        viewPager.setAdapter(pagerAdapter);
        viewPager.setCurrentItem(Constants.TAB_POSITION.WEB.ordinal());

        //Tab settings
        tabSetup(viewPager);
    }

    /**
     *Settings for each tab
     * @param viewPager
     */
    private void tabSetup(ViewPager viewPager) {
        //Get LayoutInflater To get the layout file as View
        LayoutInflater inflater = LayoutInflater.from(this);
        //Get the base of the tab
        TabLayout tabLayout = (TabLayout)findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        //Settings for each tab
        //Browser tab
        View tabWeb = inflater.inflate(R.layout.layout_custom_tab, null);
        ((ImageView)tabWeb.findViewById(R.id.tabIcon)).setImageDrawable(getDrawableFromResource(R.drawable.browser_tab_icon));
        ((TextView)tabWeb.findViewById(R.id.tabText)).setText(MainActivity.getStringFromResource(R.string.tab_web));
        tabLayout.getTabAt(Constants.TAB_POSITION.WEB.ordinal()).setCustomView(tabWeb);

        //Download list tab
        View tabDownloadList = inflater.inflate(R.layout.layout_custom_tab, null);
        ((ImageView)tabDownloadList.findViewById(R.id.tabIcon)).setImageDrawable(getDrawableFromResource(R.drawable.download_list_tab_icon));
        ((TextView)tabDownloadList.findViewById(R.id.tabText)).setText(MainActivity.getStringFromResource(R.string.tab_download));
        tabLayout.getTabAt(Constants.TAB_POSITION.DOWNLOAD_LIST.ordinal()).setCustomView(tabDownloadList);
    }


    /**
     * String.Get string from xml
     * @return
     */
    private String getStringFromResource(int id) {
        return context.getResources().getString(id);
    }

    /**
     *Get drawable
     * @param id
     * @return
     */
    private Drawable getDrawableFromResource(int id) {
        return ResourcesCompat.getDrawable(context.getResources(), id, null);
    }
}

5. Implementation of Adapter set in ViewPager

`LayoutMainTabPagerAdapter.java`


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

import jp.jackall.androiddownloader.fragment.DownloadListFragment;
import jp.jackall.androiddownloader.fragment.WebBrowserFragment;
import jp.jackall.androiddownloader.util.Constants;

public class LayoutMainTabPagerAdapter extends FragmentPagerAdapter {

    //Total number of tabs
    private static final int TAB_NUM = 2;

    public LayoutMainTabPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch(Constants.TAB_POSITION.values()[position]) {
            case WEB:
                return WebBrowserFragment.newInstance();
            case DOWNLOAD_LIST:
                return DownloadListFragment.newInstance();
            default:
                return null;
        }
    }

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

6. Implementation of fragments returned by ViewPager adapter

6.1. Fragment of Browser tab contents

`WebBrowserFragment.java`


import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import jp.jackall.androiddownloader.R;
import jp.jackall.androiddownloader.util.Constants;

/**
 *Browser tab fragment
 */
public class WebBrowserFragment extends Fragment {

    private Context context = null;
    private View rootView = null;

    /**
     *Instance generation
     * @return
     */
    public static WebBrowserFragment newInstance() {
        WebBrowserFragment fragment = new WebBrowserFragment();
        return fragment;
    }

    /**
     *Fragment initialization
     * @param savedInstanceState
     */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    /**
     *Fragment initialization
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.fragment_web_browser, container, false);
        WebView webView = (WebView)rootView.findViewById(R.id.webBrowser);
        webView.setWebViewClient(new WebViewClient() {
                //Perform in-page transition on WebView
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    //Load the link into the same WebView
                    return false;
                }
        });

        //Load default page
        webView.loadUrl(Constants.DEFAULT_WEB_URL);

        //Settings for playing twitter and videos on WebView
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);

        return  rootView;
    }

    /**
     *Called when registering a fragment
     * @param context
     */
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        this.context = context;
    }

    /**
     *Called when the fragment leaves the Activity
     */
    @Override
    public void onDetach() {
        super.onDetach();
    }
}

6.2. Download List tab fragment

`DownloadListFragment.java`


import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import jp.jackall.androiddownloader.R;

public class DownloadListFragment extends Fragment {

    private Context context = null;
    private View rootView = null;

    /**
     *Instance generation
     * @return
     */
    public static DownloadListFragment newInstance() {
        DownloadListFragment fragment = new DownloadListFragment();
        return fragment;
    }

    /**
     *Fragment initialization
     * @param savedInstanceState
     */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    /**
     *Fragment initialization
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.fragment_download_list, container, false);
        return rootView;
    }

    /**
     *Called when registering a fragment
     * @param context
     */
    public void onAttach(Context context) {
        super.onAttach(context);
        this.context = context;
    }

    /**
     *Called when leaving Fragment Activity
     */
    public void onDetach() {
        super.onDetach();
    }
}

7. Bonus Constants.java

`Constants.java`


public class Constants {

    private Constants() {}

    /**
     *Tab position
     */
    public enum TAB_POSITION {
        WEB, //Web tab
        DOWNLOAD_LIST //Download list tab
    }

    public static final String DEFAULT_WEB_URL = "https://www.google.co.jp/";
}

You can easily display badges on tabs by playing with layout_custom_tab.xml.

[Android] Display images and characters on the ViewPager tab