Display a viewpager with 3 dots at the top in xamarin android

Question

I am new to xamarin.android. As per my requirement, we have a navigation drawer at the top. Below that we have another header that contains 3 dots at the right corner. The three dots are for 3 different pages. As it is a navigation drawer everything is a fragment. So I am trying to create a Viewpager in the fragment and should be able to swipe the screens. While swiping the dots at the top right corner has to change the color as selected accordingly. For this i am trying various examples but in xamarin.android mostly with supportfragmentmanager issues I am getting and getting stucked with every example.

Can anybody send me a sample link on creating a viewpager inside a fragment, and able to swipe the screens using xamarin.android. It will be really helpful.

    Code:

        Menu1.class:

        public class Menu1 extends Fragment {

            TextView tv;

            @Override
            public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
                //returning our layout file
                //change R.layout.yourlayoutfilename for each of your fragments
                View v = inflater.inflate(R.layout.fragment_menu_1, container, false);
                ViewPager pager = (ViewPager)v.findViewById(R.id.viewPager);
                pager.setAdapter(new ViewPagerAdapter(getChildFragmentManager()));

                TabLayout tabLayout = (TabLayout) v.findViewById(R.id.tab_layout);
                tabLayout.setupWithViewPager(pager, true);

                tv = (TextView)v.findViewById(R.id.textcheck);


                return v;
            }


            @Override
            public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
                super.onViewCreated(view, savedInstanceState);
                //you can set the title for your toolbar here for different fragments different titles
                getActivity().setTitle("Menu 1");
                tv.setText("FirstFragment");
            }
        }

        fragment_menu1.xml

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

            <LinearLayout
                android:id="@+id/main_linlayout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

            <LinearLayout
                android:id="@+id/lin_layout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="2">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Total"
                    android:textSize="20sp"
                    android:layout_weight="1"/>
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                app:tabBackground="@drawable/tab_selector"

        android:layout_weight="1"
                app:tabIndicatorHeight="0dp"/>


            </LinearLayout>



            </LinearLayout>

            <android.support.v4.view.ViewPager
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/viewPager"
                android:layout_below="@+id/main_linlayout"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                />
        </RelativeLayout>

        Menu2.class


        public class Menu2 extends Fragment {
            TextView tv;
            @Override
            public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
                View v = inflater.inflate(R.layout.fragment_menu2, container, false);

                tv = (TextView) v.findViewById(R.id.tvFragFirst);
                //tv.setText(getArguments().getString("msg"));

                return v;
            }

            @Override
            public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
                super.onViewCreated(view, savedInstanceState);
                //you can set the title for your toolbar here for different fragments different titles
                getActivity().setTitle("Menu 2");

            }

            public static Menu2 newInstance(String text) {

                Menu2 f = new Menu2();
                Bundle b = new Bundle();
                b.putString("msg", text);

                f.setArguments(b);

                return f;
            }
        }

    fragment_menu2
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_orange_dark" >

        <TextView
            android:id="@+id/tvFragFirst"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:textSize="26dp"
            android:text="fragment2" />
    </RelativeLayout>

ViewPagerAdapter.class

public class ViewPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int pos) {
        switch(pos) {

            case 0: return Menu2.newInstance("");
            case 1: return Menu3.newInstance("");
            default: return Menu3.newInstance("");
        }
    }

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

Answer 1

You can refer to this demo as well. https://developer.xamarin.com/samples/monodroid/UserInterface/FlashCardPager/

Then, you can override OnCreateOptionsMenu in MainActivity.cs

public override bool OnCreateOptionsMenu(IMenu menu)
{
        MenuInflater.Inflate(Resource.Menu.top_menus, menu);
        return true;
}

top_menus.axml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
 <item
  android:id="@+id/action_settings"
  android:orderInCategory="100"
  android:title="@string/action_settings"
  app:showAsAction="never" />
 </menu>

In the end, you changed tab to dots in FlashCardDeckAdapter.

 public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
{
        return new Java.Lang.String("⚪");
}

This is GIF of this demo.

If you want to fix the PagerTabStrip, you could refer to this link.

Answer 2

To add a view pager within a fragment you must use ChildFragmentManager instead of SupportFragmentManager.

You can refer this link : ViewPagerWithinFragment

This is a tabbed application containing three tabs [Home,Dashboard, Notification]. The home tab contains a fragment Home Fragment. There is a view pager containing 2 views [Fragment1 , fragment 2] added to the home fragment.