question

MarcellZlyomi-6897 avatar image
0 Votes"
MarcellZlyomi-6897 asked RobCaplan edited

How can I make sliding tab pages under Xamarin.Android

I have been developing a store management program for Zebra Barcode readers, and I want to make the usage more easier with slidable pages. I working with two or three pages under the same Activity and I want to slide between them with finger slide movement. The most important thing, the whole project must be work on android 10. Somebody can help me?

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JarvanZhang-MSFT avatar image
1 Vote"
JarvanZhang-MSFT answered MarcellZlyomi-6897 commented

Hello,​

Welcome to our Microsoft Q&A platform!

I working with two or three pages under the same Activity and I want to slide between them with finger slide movement.

Try using Fragment to display the 'pages' in the same Activity. You could combine TabLayout with ViewPager to achieve sliding tab navigation.

<LinearLayout ...
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

Create a custom adapter for the ViewPager to populate the data. You could inflate the layout.xml for the fragment. Here is the sample code, please check it.

public class MainActivity : AppCompatActivity
{
    TabLayout tabLayout;
    ViewPager pager;
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);
        SetContentView(Resource.Layout.activity_main);

        tabLayout = FindViewById<TabLayout>(Resource.Id.tabLayout);
        pager = FindViewById<ViewPager>(Resource.Id.pager);

        PagerAdapter adapter = new PagerAdapter(this.SupportFragmentManager);

        adapter.AddFragment(new FragmentA(), "FragmentA");
        adapter.AddFragment(new FragmentB(), "FragmentB");
        adapter.AddFragment(new FragmentC(), "FragmentC");

        pager.Adapter = adapter;
        adapter.NotifyDataSetChanged();
        tabLayout.SetupWithViewPager(pager);
    }
}

//custom adapter
public class PagerAdapter : FragmentStatePagerAdapter
{
    public List<AndroidX.Fragment.App.Fragment> fragments = new List<AndroidX.Fragment.App.Fragment>();
    public List<string> fragmentTitles = new List<string>();
    public PagerAdapter(AndroidX.Fragment.App.FragmentManager fm) : base(fm)
    {
    }
    public void AddFragment(AndroidX.Fragment.App.Fragment fragment, string title)
    {
        fragments.Add(fragment);
        fragmentTitles.Add(title);
    }
    public override int Count => fragments.Count;
    public override AndroidX.Fragment.App.Fragment GetItem(int position)
    {
        return fragments[position];
    }
    public override ICharSequence GetPageTitleFormatted(int position)
    {
        return new Java.Lang.String(fragmentTitles[position]);
    }
}

//custom fragment
public class FragmentA : AndroidX.Fragment.App.Fragment
{
    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return inflater.Inflate(Resource.Layout.fragment_a_layout, container, false);
    }
}

Here is the working screenshot:
108051-screenshot-2021-06-22-151326.png

Related doc: https://docs.microsoft.com/en-us/xamarin/android/user-interface/controls/view-pager/viewpager-and-views

Best Regards,

Jarvan Zhang


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 6
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you for your help.

It worked in the separate app but when I implemented it my existed app I met with object null reference problems. So I think the program can't reach objects on my page form activity. Do you know a solution for this problem?

0 Votes 0 ·

but when I implemented it my existed app I met with object null reference problems

Hi, MarcellZlyomi. Could you please share more details about the problem? Please post the related code about your sample, it'll help to reproduce the issue to get a solution.

0 Votes 0 ·

I really appreciate your help! After two days of hard thinking I could solve the problem.

1 Vote 1 ·

It looks like I have to use ViewPager2 insted of ViewPager, because of the complexity of the task. Could you show me an implementation of ViewPager2 with fragments?

0 Votes 0 ·

What's the 'viewPager2'? This tutorial describes how to display fragments in the viewPager in detail.

And please Ask one question at a time. For the new problem, please start a new thread for it so that the professional members could help you better.

0 Votes 0 ·

Ok. Then I will open a new thread. By the way a ViewPager2 is an upgraded version of ViewPager. It has corrected a lot of problem of ViewPager.

0 Votes 0 ·
chbernard avatar image
1 Vote"
chbernard answered

Hello,
first you need to create a view pager, follow this article
https://www.c-sharpcorner.com/article/xamarin-android-create-viewpager-tablayout-floatingactionbutton-supportacti/

and for zebra device follow this and adapt to your solution if it possible
https://www.andrewhoefling.com/Blog/Post/xamarin-android-barcode-scanning-with-zebra-emdk-on-tc70x

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.