how to add a swipe view to these existing coding

Question

I need to add a swipe view in tab activity.In these below xml coding I just created a six tabs namely home,blog,audio,video,more and gallery.
The Tabs are created perfectly.But I cannot able to know how to add a swipe for that six tabs.I need to add a right to left swipe and left to right swipe.

layout_home.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

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

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

               <TabWidget
                android:id="@android:id/tabs"
                android:orientation="horizontal"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:background="@drawable/bottom_bar"
                android:layout_weight="0" />

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

                <FrameLayout
                    android:id="@+id/tab_home"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />

                <FrameLayout
                    android:id="@+id/tab_video"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />

                <FrameLayout
                    android:id="@+id/tab_audio"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                <FrameLayout
                    android:id="@+id/tab_blog"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                <FrameLayout
                    android:id="@+id/tab_gal"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                <FrameLayout
                    android:id="@+id/tab_more"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                </FrameLayout>

                <com.sit.gems.util.AppPromoPager 
                 android:id="@+id/pager" 
                 android:layout_width="fill_parent" 
                 android:layout_height="0dp" 
                 android:layout_weight="0" />

        </LinearLayout>

    </TabHost>

</LinearLayout>

AppPromoPager.java:

These is the AppPromopager.Here I am using the ViewPager.

 package com.sit.gems.util;

import java.net.URLDecoder;
import java.util.List;
import android.content.Context;
import android.os.Handler;
import android.os.Parcelable;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.RelativeLayout;
import com.gems.android.R;
import com.sit.gems.app.AppData;
import com.sit.gems.util.ImageCache.ImageCacheParams;

public class AppPromoPager extends RelativeLayout implements
        ViewPager.OnPageChangeListener {

    //private PromoPageIndicator indicator;
    private PromoPagerListener listener;
    private Handler trackerHandler = new Handler();
    private ImageFetcher mImageFetcher;

    public AppPromoPager(Context context) {
        super(context);
    }

    public AppPromoPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public AppPromoPager(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public void init(FragmentActivity context, List<String> promotions) {
        ImageCacheParams cacheParams = new ImageCacheParams(context, AppConstants.IMAGE_CACHE_DIR);
        mImageFetcher = new ImageFetcher(context, AppData.getScreenWidth(),(AppData.getScreenWidth()/2));
        mImageFetcher.setLoadingImage(R.drawable.ic_launcher);
        mImageFetcher.addImageCache(context.getSupportFragmentManager(), cacheParams);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        ViewPager pager = new ViewPager(context);
        ViewPagerAdapter adapter = new ViewPagerAdapter(context, promotions);
        pager.setAdapter(adapter);
        pager.setCurrentItem(0);
        pager.setOnPageChangeListener(this);
        addView(pager, params);
        //indicator = new PromoPageIndicator(context);
        RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params1.addRule(RelativeLayout.CENTER_HORIZONTAL);
        params1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        params1.setMargins(0, 0, 0, 3);
        //addView(indicator, params1);
        //if (promotions.size() > 1)
        //  indicator.addCircleImage(promotions.size());
        /*pager.setOnTouchListener(new OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {

                if (event.getAction() == MotionEvent.ACTION_MOVE
                        && scrollView != null) {
                    scrollView.requestDisallowInterceptTouchEvent(true);
                }
                return false;
            }
        });*/
    }
    class ViewPagerAdapter extends PagerAdapter {

        Context activity;
        List<String> promotions;

        public ViewPagerAdapter(Context context, List<String> promotions) {
            this.promotions = promotions;
            activity = context;
        }

        public int getCount() {
            return promotions.size();
        }

        public Object instantiateItem(View collection, final int position) {
            final ImageView view = new ImageView(activity);
            view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                    LayoutParams.MATCH_PARENT));
            view.setScaleType(ScaleType.CENTER);

            String imageUrl = promotions.get(position);


            if (imageUrl != null && imageUrl.length() > 0) {
                setImage(view, imageUrl);
            }

            view.setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View v) {
                    listener.selectedPromo(promotions.get(position),position);
                }
            });
            ((ViewPager) collection).addView(view, 0);
            return view;
        }

        @Override
        public void destroyItem(View arg0, int arg1, Object arg2) {
            ((ViewPager) arg0).removeView((View) arg2);
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == ((View) arg1);
        }

        @Override
        public Parcelable saveState() {
            return null;
        }
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        //listener.selectedPosition(arg0);
    }

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

    }

    @Override
    public void onPageSelected(int position) {
        listener.selectedPosition(position);
    }

    public interface PromoPagerListener {
        public void selectedPromo(String offer,int postion);
        public void selectedPosition(int postion);
    }

    public void setPromoPagerListener(PromoPagerListener listener) {
        this.listener = listener;
    }

    private void setImage(final ImageView view, final String imageUrl) {
        trackerHandler.post(new Runnable() {

            @Override
            public void run() {
                mImageFetcher.loadImage(URLDecoder.decode(imageUrl),view);
            }
        });
    }

}

I thought with the help of viewpager I can able to get a Swipe view. ViewPager was added in AppPromoPager.
I added an AppPromoPager to that layout_home.xml file.But till now I didn't get a swipe view.Anybody can help me with these.Thank you.

you can check my code from http://stackoverflow.com/questions/18051271/android-sherlock-fragmenttab-clear-data i had used sherlockActionbar but you can use actionbar and this way u can swipe tab check it — PankajAndroid, May 07 '14 at 10:18
@PankajAndroid I already created 6 tabs.I think with the help of adding packagename.AppPromoPager in xml code I can able to solve the issue.Did you know how to do these? — Stephen, May 07 '14 at 10:34
Why did you create a custom RelativeLayout to implement a ViewPager? It might be better to use directly the ViewPager widget inside the TabHost. You can find [a great tutorial](http://thepseudocoder.wordpress.com/2011/10/13/android-tabs-viewpager-swipe-able-tabs-ftw/) with this feature. — Blo, May 07 '14 at 13:02
@Fllo Thank you for your suggestion.I tried what you said.I changed the xml code and edited it. — Stephen, May 08 '14 at 10:29

score 1 · Answer 1 · answered May 15 '14 at 08:10

1

Better to use the Scrollable Tabs which uses a combination of Swipe view pager with the action bar tabs.

answered May 15 '14 at 08:10

Kailas

7,350
3
47
63

score 0 · Answer 2 · answered May 12 '14 at 07:09

What I did is in each tabcontent, implement the swipe listener. In the tabhost, implement a swipe method.

tabcontent

layout.setOnTouchListener(new OnTouchListener() {
private PointerCoords mDownPos = new PointerCoords();
private PointerCoords mUpPos = new PointerCoords();

@Override
public boolean onTouch(View arg0, MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            event.getPointerCoords(0, mDownPos);
            return true;
        }
        case MotionEvent.ACTION_UP: {
            event.getPointerCoords(0, mUpPos);
            float dx = mDownPos.x - mUpPos.x;
            // Check for horizontal wipe
            if (Math.abs(dx) > SWIPE_MIN_DISTANCE) {
                if (dx > 0) {
                    mParent.swipe(DIRECTION_RIGHT);
                } else {
                    mParent.swipe(DIRECTION_LEFT);
                }
                return true;
            }
        }
    }
    return false;
}
});


protected void swipe(int direction) {
    int current = mTabHost.getCurrentTab();
    if (direction == DIRECTION_LEFT) {
    int newTab = --current % mTabHost.getTabWidget().getTabCount();
    mTabHost.setCurrentTab( (newTab < 0) ? mTabHost.getTabWidget().getTabCount()-1 :  newTab);
}
else {
    mTabHost.setCurrentTab(++current % mTabHost.getTabWidget().getTabCount());
}
}

score 0 · Answer 3 · answered May 12 '14 at 12:46

0

hey you should do this by actionBar tabs + viewpager here is a tutorial which let you make what you want. http://www.androidhive.info/2013/10/android-tab-layout-with-swipeable-views-1/

answered May 12 '14 at 12:46

Abhishek

119
7

Already I saw these tutorial,it doesn't helped me to solve my issue – Stephen May 13 '14 at 09:19
if you want tabs like google play you can use [PagerSlidingTabStrip](https://github.com/astuetz/PagerSlidingTabStrip) this also have a sample it is so easy to use you will definitely love this.. – Abhishek May 14 '14 at 05:01

how to add a swipe view to these existing coding

3 Answers3