[Android] Display images and characters on the ViewPager tab

[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.

Recommended Posts

[Android] Display images and characters on the ViewPager tab
Android app to select and display images from the gallery
[Introduction] Display Android Studio Hello World on the emulator
Save and display multiple images
[Android] Get the date on Monday
Display user-defined characters on the I2C 1602 LCD with Raspberry Pi 3 & Java
Get the acceleration and bearing of the world coordinate system on Android
Implement ripple representation on images on Android
How to narrow down the image format from the gallery on Android and then select and import multiple images
[Android] How to turn the Notification panel on and off using StatusBarManager
DOM example → Dynamically generate HTML tags and display data on the database
Implementation comparison of production that makes images shine on iOS and Android
Display text on top of the image
Try using the service on Android Oreo
Sample to display (head-up) notifications on Android
Display an image on the base64 screen
Pre-processing to display on the browser (compiler)
[Android] Get the tapped position (coordinates) on the screen
Display the System Monitor applet on the Ubuntu 20.04 taskbar
[Android] List all setting items on the setting screen
Compile and run Java on the command line