Develop Reference

Design Issue - Launching new Fragment from TabLayout

I'm not quite sure if there's a "best way" to tackle the following design issue.
I have a Tablayout with 2 Tabs in my MainActivity. Each Tab is a different Fragment. I go to Tab1 and see Fragment1. I need to launch a new Fragment (1A) from Fragment 1 and am not sure the best way to do it? I was thinking about one of these.
A) Take the Tabs out of my MainActivity and place them in a separate MainFragment, which gets launched with the app. That way when the user launches Fragment 1A, it replaces just the 1 MainFragment with the Tabs.
or
B) Keep the Tabs in the MainActivity and find a way to replace Fragment 1 with Fragment 1A when under Tab1.
Any suggestions would be appreciated. Thank you.

I think you shouldn't do both of points... Frag1 visible under Tab1 should contain all the layout (including initialy hidden) and logic for this view. If you need to show smth new it may be smaller (then popup, dialog etc.) or expand some layout, maybe with some animation (you may still use ViewPager inside Fragment inside ViewPager, disable touch events and manipulate scrolling programmatically...).
When Action picked by user is intended to show smth so-much-improtant that previous screen is not needed at all then you should probably open new Activity
PS. If you insist to replace current "screen" (in fact Activitys content) note that title of Tab1 may not representing what contains Frag1A. It very depends what kind of content you have there. You may consider move TabLayout/RecyclerView to e.g. FrameLayout container and add to it you Frag1A covering whole previous view including Tabs. In current design guidelines you can even find suggested solution for way of showing new fragment - with circular reveal animation

I do not understand very well what you want, but possibly this.
Use FragmentPagerAdapter..
public class TabsPagerAdapter extends FragmentPagerAdapter {
private static final int NUM_TABS = 3;
public TabsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch(position){
case 0:
return Tab1Fragment.newInstance();
case 1:
return Tab2Fragment.newInstance();
default:
return Tab3Fragment.newInstance();
}
}
#Override
public int getCount() {
return NUM_TABS;
}
#Override
public CharSequence getPageTitle(int position) {
if (position == 0){
return "Tab 1";
}
if (position == 1){
return "Tab 2";
}
return "Tab 3";
}
In your activity...
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Tabs
TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
ViewPager pager = (ViewPager) findViewById(R.id.pager);
TabsPagerAdapter adapter = new TabsPagerAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);
tabs.setupWithViewPager(pager);
}

What's the difference between various Android tab navigation methods

I'm starting to write an Android app and want to have a tab navigation interface. It seems there are multiple choices, some of which may be deprecated:
Android TabHost (deprecated? but still available in Android Studio)
Tab Layout with Swipeable Views
Android Tab Activity
Material Design with Tabs
What is the best choice? Material Design with Tabs? How far back as far as APIs is this supported?
I know this isn't a pure coding question but it is probably a questions that others are pondering as well.
Thanks

extend your MainActivity to AppCompatActivity, and it will go till android version 7,
http://developer.android.com/reference/android/support/v7/app/AppCompatActivity.html
Use tabLayout and and View Pagers, To get the Swipe Effect on your Tabs
activity_main.xml
Add the Following to your MainActivity layout file.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:visibility="visible">
</android.support.v4.view.ViewPager>
MainActivity.java
public class MainActivity extends AppCompatActivity{
ViewPager viewPager;
FragmentPagerAdapter ft;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_viewpaggermain);
viewPager = (ViewPager) findViewById(R.id.vp_main);
ft = new FragmentPagerAdapter(getSupportFragmentManager()) {
String [] titles = {"Subscriber","Merchant"};
final int VIEW_COUNT = 2;
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new YourFirstFragment();
case 1:
return new YourSecondFragment();
}
return null;
}
#Override
public int getCount() {
return VIEW_COUNT;
}
#Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
};
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
viewPager.setAdapter(ft);
tabLayout.setupWithViewPager(viewPager);
}
}

Fragment with SlidingTabLayout

I've got an app with left navigation drawer, switching between different fragments. Inside one of those fragment I want to implement SlidingTabLayout.
So, what I did is I copied the SlidingTabLayout.java and SlidingTabStrip.java from Google's iosched app. I used them inside my fragment:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<mynamespace.widget.SlidingTabLayout
android:id="#+id/home_fragment_tabs"
android:background="?attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="#+id/home_fragment_pager"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent" />
</LinearLayout>
And then in my Fragment class, inside onCreateView method, I instantiated my pager and SlidingTabLayout like this:
mPager = (ViewPager) view.findViewById(R.id.home_fragment_pager);
mPager.setAdapter(new HomePagerAdapter(getActivity().getSupportFragmentManager()));
mTabs = (SlidingTabLayout) view.findViewById(R.id.home_fragment_tabs);
mTabs.setViewPager(mPager);
And this is my FragmentPagerAdapter:
class HomePagerAdapter extends FragmentPagerAdapter
{
private String[] tabs = { "Today", "This week", "With star" };
private Fragment[] tabFragments = {
new TodayTabFragment(),
new WeekTabFragment(),
new StarTabFragment()
};
public HomePagerAdapter(FragmentManager fm)
{
super(fm);
}
#Override
public Fragment getItem(int i)
{
return tabFragments[i];
}
#Override
public int getCount()
{
return 3;
}
#Override
public CharSequence getPageTitle(int position)
{
return tabs[position];
}
}
Also I got separate Fragment class and layout for each tab, which is nothing special. And it works, but as soon as I switch to other fragment with my navigation drawer, when I get back, content of one of tabs just dissapears. Mostly it happens to second tab. Also, if I select the HomeFragment from navigation drawer, when is already displayed, I get a nullpointerexception inside SlidingTabLayout.java at this line: mViewPager.setCurrentItem(i);
Any way of fixing it? I have no idea what to do. I guess my code would work, but inside activity. Possible to make it work inside fragment?

I also faced the same issue. Please use FragmentStatePagerAdapter instead of FragmentPagerAdapter which will solve this issue.

Solution:
What I did is instead of implementing FragmentPagerAdapter, I implemented PagerAdapter then I overriden the instantiateItem(ViewGroup container, int position) method and destroyItem() method.
Link, that helped me: http://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.slidingtabsbasic/SlidingTabsBasicFragment.html

Can you try to change constructor of HomePagerAdapter to:
public HomePagerAdapter(SupportFragmentManager fm)
{
super(fm);
}

When you begin transaction instead of suuportfragmanager change it to childfragmentmanager

Switching tabs not working on click of tabs with PagerSlidingTabStrips

I've integrated PagerSlidingTabStrips in my application which runs as expected on Swipe of tabs.
But selecting tabs on PagerSlidingTabStrips doesn't switch to that fragment which works perfectly on swiping between tabs.
FragmentManager fm = getSupportFragmentManager();
mPager = (ViewPager) findViewById(R.id.pager);
ViewPagerAdapter viewpageradapter = new ViewPagerAdapter(fm);
mPager.setAdapter(viewpageradapter);
pagerSlidingTabStrp = (PagerSlidingTabStrip) findViewById(R.id.pager_sliding_tab_strip);
pagerSlidingTabStrp.setShouldExpand(true);
pagerSlidingTabStrp.setViewPager(mPager);
pagerSlidingTabStrp.setOnPageChangeListener(ViewPagerListener);
// Capture ViewPager page swipes
ViewPager.SimpleOnPageChangeListener ViewPagerListener = new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
super.onPageSelected(position);
switch(position)
{
case 0:
setMotherActionBarTitle(getString(R.string.str_all_contacts_fragment));
break;
case 1:
setMotherActionBarTitle(getString(R.string.str_group_contacts_fragment));
break;
case 2:
setMotherActionBarTitle(getString(R.string.str_call_logs_fragment));
break;
}
}
};
ViewPagerAdapter
public class ViewPagerAdapter extends FragmentPagerAdapter implements IconTabProvider {
final int PAGE_COUNT = 3;
private final int[] ICONS = { R.drawable.tab_icon_zname_contact_selector, R.drawable.tab_icon_zname_friends_selector,
R.drawable.tab_icon_zname_call_log_selector };
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int item) {
switch (item) {
case 0:
ContactsFragment homeFragment = new ContactsFragment();
return homeFragment;
case 1:
GroupsFragment groupsFragment = new GroupsFragment();
return groupsFragment;
case 2:
CallLogsFragment callLogsFragment = new CallLogsFragment();
return callLogsFragment;
}
return null;
}
#Override
public int getCount() {
return PAGE_COUNT;
}
#Override
public int getPageIconResId(int position) {
return ICONS[position];
}
}
How to make selecting tabs works with PagerSlidingTabStrips? Morever PagerSlidingTabStrips tabs are not even clickabe.
Did I missed out to implement something? Or to add pagerSlidingTabStrips.setClickable(true)? or something?
Again the selector of PagerSlidingTabStrips tabs not selected proper drawable with selector. What could be possible the reason for that?
Here's a picture of it.

I've found out why clicking tab was not working with PagerSlidingTabStrips after I've looked out for other options with sliding tabs functionality like SlidingTabsLayout which also was not able to click tabs.
Found out problem was with my xml layout which covers whole as ViewPager which doesn't make tabs clickable of eitherPagerSlidingTabStrips or SlidingTabsLayout works.
<com.netdoers.zname.utils.PagerSlidingTabStrip
android:id="#+id/pager_sliding_tab_strip"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:background="#android:color/white"
app:pstsDividerColor="#FFFFA500"
app:pstsIndicatorColor="#FFFFA500"
app:pstsTabPaddingLeftRight="14dip"
app:pstsUnderlineColor="#FFFFA500" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
Leaving same height in Viewpager as of PagerSlidingTabStips from top where PagerSlidingTabStrips rendered solved my issue.

Indeed the issue is in XML. The issue probably due to RelativeLayout is used om the XML. Consider using LinearLayout will ensure there's no overlap between views.

FragmentPagerAdapter Swipe to show ListView 1/3 Screen Width

EDIT: See my answer below-->
I am wanting to have a view that when swiped to the right, the listView is shown. Very much similar to what is implemented in the new Google Play Store (Sample image below). I think its a ViewPager but I tried duplicating it without prevail. I was thinking it may just be that the 'listView Page' width attribute was set to a specific dp but that doesn't work. I also tried modifying pakerfeldt's viewFlow and cant figure out how Google does this
Am I on the right track? If someone has an idea how to duplicate this, I would greatly appreciate it. I think this may become a popular new way of showing a navigation view on tablets....? Code would be best of help. Thank you!!
Swipe right:
Finnished swipe; the layout shows the list and PART OF THE SECOND FRAGMENT (EXACTLY AS SHOWN) The list fragment does not fill the screen:
When the user swipes left, the main page is only shown and if the user swipes left again the viewPager continues to the next page.

The following code achieves the desired effect:
In PageAdapter :
#Override
public float getPageWidth(int position) {
if (position == 0) {
return(0.5f);
} else {
return (1.0f);
}

Reading your question one last time... make sure you also set up specific layouts for each size device. In your screenshots it looks like your trying to run this on a tablet. Are you getting the same results on a phone?
Setting up your Layout
Make sure your layout is simular to this and has the ViewPager:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/body_background">
<include layout="#layout/pagerbar" />
<include layout="#layout/colorstrip" />
<android.support.v4.view.ViewPager
android:id="#+id/example_pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>
Setting up your Activity
Setup your PagerAdapter in your "FragmentActivity" and make sure you implement "OnPageChangeListener". Then properly setup your PagerAdapter in your onCreate.
public class Activity extends FragmentActivity
implements ViewPager.OnPageChangeListener {
...
public void onCreate(Bundle savedInstanceState) {
PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
pager = (ViewPager) findViewById(R.id.example_pager);
pager.setAdapter(adapter);
pager.setOnPageChangeListener(this);
pager.setCurrentItem(MyFragment.PAGE_LEFT);
...
}
/* setup your PagerAdapter which extends FragmentPagerAdapter */
static class PagerAdapter extends FragmentPagerAdapter {
public static final int NUM_PAGES = 2;
private MyFragment[] mFragments = new MyFragment[NUM_PAGES];
public PagerAdapter(FragmentManager fragmentManager) {
super(fragmentManager);
}
#Override
public int getCount() {
return NUM_PAGES;
}
#Override
public Fragment getItem(int position) {
if (mFragments[position] == null) {
/* this calls the newInstance from when you setup the ListFragment */
mFragments[position] = MyFragment.newInstance(position);
}
return mFragments[position];
}
}
...
Setting up your Fragment
When you setup your actual ListFragment (your listViews) you can create multiple instances with arguments like the following:
public static final int PAGE_LEFT = 0;
public static final int PAGE_RIGHT = 1;
static MyFragment newInstance(int num) {
MyFragment fragment = new MyFragment();
Bundle args = new Bundle();
args.putInt("num", num);
fragment.setArguments(args);
return fragment;
}
When you reload the listViews (how ever you decide to implement this) you can figure out which fragment instance you are on using the arguments like so:
mNum = getArguments() != null ? getArguments().getInt("num") : 1;
If you step through your code you will notice that it will step through each instance so the above code is only needed in your onCreate and a reload method may look like this:
private void reloadFromArguments() {
/* mNum is a variable which was created for each instance in the onCreate */
switch (mNum) {
case PAGE_LEFT:
/* maybe a query here would fit your needs? */
break;
case PAGE_RIGHT:
/* maybe a query here would fit your needs? */
break;
}
}
Few Sources that may help you out with examples that you could build from rather then starting from scratch:
More explanation and example from playground.
http://blog.peterkuterna.net/2011/09/viewpager-meets-swipey-tabs.html
which is references to:
http://code.google.com/p/android-playground/
More info and some good linkage.
http://www.pushing-pixels.org/2012/03/16/responsive-mobile-design-on-android-from-view-pager-to-action-bar-tabs.html
If you have more specific questions post and I can always Edit (update) my answer to address your questions. Good Luck! :)

Sorry for the late update. I implemented this from walkingice on Gethub with very little modification. Just use a conditional statement for a GestureDetector to swipe it into view only when a ViewPager id of '0' is in view. I also added a toggle whithin my ActionBar

ViewPager is a part of the Compatibly Package
If you're using Fragments, then you can use ViewPager to swipe between them.
Here's an example of combining Fragments and ViewPager
In your particular case, you would want to create a ListFragment and then implement ViewPager.

I think you are looking to implement a "side navigation" beside a standard ViewPager.
I've read 2 different articles on this pattern:
The first one on the pattern itself:
Android Ui Pattern Emerging UI Pattern - Side Navigation
The second on a more detailed way of who to build it:
Cyril Mottier Fly-in app menu #1 #2 #3
This second article is referenced in Android Ui Pattern blog.

With a little Trick, the behavior can be achieved with the ScrollView-Behavior inside the ViewPager. If you only want to restrict the area of the most left fragment, you can restrict the scroll limits of the ScrollView.
In your case:
in the onPageChangeListener of the ViewPager do something like that:
#Override
public void onPageScrollStateChanged(int arg0) {
restrictLeftScroll();
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
restrictLeftScroll();
}
#Override
public void onPageSelected(int arg0) {
}
private void restrictLeftScroll() {
if (display != null) {
/* get display size */
Point size = new Point();
display.getSize(size);
/* get desired Width of left fragment */
int fragmentWidth = getResources().getDimensionPixelSize(R.dimen.category_fragment_width);
if (mViewPager.getScrollX() < size.x - fragmentWidth) {
mViewPager.scrollTo(size.x - fragmentWidth, mViewPager.getScrollY());
}
}
}
This piece of code worked for me without problems. ;)