How to set the icon of each tab in a fragmentpageradapter to a gif animation?

Question

I want to set the icon of each tab in a fragmentpageradapter to a gif animation. When the user swipes to each specific tab the animation will start.

For example:

The user starts on tab 1. Tab 1 animation will start. Now user swipes to tab 2. Tab 1 icon will pause and tab 2 icon will start. Next user swipes to tab 3. Tab 3 icon will start and tab 1 and tab 2 will be paused.. etc etc.

MyHome.java

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabContentFactory;
import java.util.List;
import java.util.Vector;


public class MyHome extends Fragment implements OnTabChangeListener, OnPageChangeListener {

private TabHost tabHost;
private ViewPager viewPager;
private MyFragmentPagerAdapter myViewPagerAdapter;
private String[] tabsTitles = {"About Me", "Connections", "Messages", "Open Forum", "Music", "Books", "Sports", "Title 8", "Title 9"};
private boolean flag = false;
int i = 0;
View v;


@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    ((MainActivity)getActivity()).getSupportActionBar().setTitle("Home");
    v = inflater.inflate(R.layout.tabs_viewpager_layout, container, false);
    i++;
    this.initializeTabHost(savedInstanceState);
    this.initializeViewPager();
    return v;
}
class FakeContent implements TabContentFactory {
    private final Context mContext;
    public FakeContent(Context context) {
        mContext = context;
    }
    @Override
    public View createTabContent(String tag) {
        View v = new View(mContext);
        v.setMinimumHeight(0);
        v.setMinimumWidth(0);
        return v;
    }
}
private void initializeViewPager() {
    List<Fragment> fragments = new Vector<Fragment>();
    fragments.add(new Home1Fragment());
    fragments.add(new Home2Fragment());
    fragments.add(new Home3Fragment());
    fragments.add(new Home4Fragment());
    fragments.add(new Home5Fragment());
    fragments.add(new Home6Fragment());
    fragments.add(new Home7Fragment());
    this.myViewPagerAdapter = new MyFragmentPagerAdapter(getChildFragmentManager(), fragments);
    this.viewPager = (ViewPager) v.findViewById(R.id.viewPager);
    this.viewPager.setAdapter(this.myViewPagerAdapter);
    this.viewPager.setOnPageChangeListener(this);
    //this.viewPager.setCurrentItem(4);
}


private void initializeTabHost(Bundle args) {
    tabHost = (TabHost) v.findViewById(android.R.id.tabhost);
    tabHost.setup();


    for (int i = 1; i <= 7; i++) {
        TabHost.TabSpec tabSpec;
        tabSpec = tabHost.newTabSpec("Home " + i);

//Here is where each tab is set to a particular icon from the drawable folder
        if(i == 1) {
            //tabSpec.setIndicator("");
            tabSpec.setIndicator("", getResources().getDrawable(R.drawable.aboutme));
        }else if(i == 2) {
            tabSpec.setIndicator("",getResources().getDrawable(R.drawable.connections));
        }else if(i == 3) {
            tabSpec.setIndicator("",getResources().getDrawable(R.drawable.messages));
        }else if (i == 4) {
            tabSpec.setIndicator("",getResources().getDrawable(R.drawable.mics));
        }else if(i == 5) {
            tabSpec.setIndicator("",getResources().getDrawable(R.drawable.music));
        }else if(i == 6) {
            tabSpec.setIndicator("",getResources().getDrawable(R.drawable.books));
        }else if(i == 7) {
            tabSpec.setIndicator("",getResources().getDrawable(R.drawable.sports));
        }
        tabSpec.setContent(new FakeContent(getActivity()));
        tabHost.addTab(tabSpec);
    }
    tabHost.setOnTabChangedListener(this);
}


@Override
public void onTabChanged(String tabId) {
    int pos = this.tabHost.getCurrentTab();
    this.viewPager.setCurrentItem(pos);
    HorizontalScrollView hScrollView = (HorizontalScrollView) v.findViewById(R.id.hScrollView);
    View tabView = tabHost.getCurrentTabView();
    int scrollPos = tabView.getLeft() - (hScrollView.getWidth() - tabView.getWidth()) / 2;
    hScrollView.smoothScrollTo(scrollPos, 0);
}

@Override
public void onPageScrollStateChanged(int arg0) {
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}



@Override
public void onPageSelected(int position) {
    this.tabHost.setCurrentTab(position);
        ((MainActivity)getActivity()).getSupportActionBar().setTitle(tabsTitles[position]);
}
}

tabs_viewpager_layout.xml

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

<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

        <HorizontalScrollView
            android:id="@+id/hScrollView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:scrollbars="none">

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

            </TabWidget>


        </HorizontalScrollView>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >


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

          </FrameLayout>
       </LinearLayout>
    </TabHost>

</LinearLayout>

Answer 1

I would have two drawables for each tab, an animated and a non-animated version.

Then I would register a page change listener on the ViewPager to alternate the drawables:

    viewPager.addOnPageChangeListener(new SimpleOnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {

            if (mLastPageSelected != -1) { // check for first time
                switch (mLastPageSelected) {
                    // case statements to set last tab icon to non-animated drawable
                }
            }

            switch (position) {
                // case statements to set current tab icon to animated drawable
            }

            mLastPageSelected = position;
        }
    });