Xamarin step by step wizard android views

Question

I want to build an android activity in Xamarin c# for step by step registration and/or information. How can I do something like this:

Can anyone give me a code sample or anything? Thanks.

Answer 1

Basically you need to use an element called a ViewPager , and every page will be a different Fragment . You can use this library to help you. Feel free to ask questions and guidance.

Edit - Detailed explanation:
Add two images to your drawable folder- one of the unselected dot, and one of the selected dot. Add these two NuGet packages (Right-Click your project in the Solution Explorer, click Manage NuGet Packages, and search): Xamarin.Android.Support.v4 and Xamarin.Android.Support.v7.AppCompat.

Then your Main.axml layout, put this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      app:popupTheme="@style/ThemeOverlay.AppCompat"
      app:titleMarginTop="15dp"/>
  <FrameLayout
     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"/>
    <LinearLayout
               android:id="@+id/viewPagerCountDots"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginBottom="10dp"
               android:layout_gravity="bottom|center_horizontal"
               android:orientation="horizontal">
      <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:src="@drawable/ViewPagerDotSelected"/>
      <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:src="@drawable/ViewPagerDotUnselected"/>
      <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:src="@drawable/ViewPagerDotUnselected"/>
    </LinearLayout>
  </FrameLayout>
</LinearLayout>

You can play around with the width, the height, and the margin later.

Next, create new Fragments that will each contain your different pages (or "steps"). For this example, I created three.

Do this three times, while changing the name of the files and their contents:
Right-Click Project >> Add >> New Item >> Fragment, post the following code as an example:

public class Fragment1 : Fragment
{
    public override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
    }

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        // Use this to return your custom view for this Fragment
        var view = inflater.Inflate(Resource.Layout.Fragment1Layout, container, false);

        //Here goes what you want to do within the fragment.

        return view;
    }
}

Replace the names of the class and layouts for each fragment.

Then Right-Click on your layout folder >> Add New Item >> Android Layout.
Post the following code as an example:

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

Do this three times while changing the name and contents.

Now, in you MainActivity.cs, post the following code after your Namespace name:

 [Activity(Label = "ViewPagerIndicator", MainLauncher = true, Icon = "@drawable/icon", Theme = "@style/Theme.AppCompat.Light.DarkActionBar")]
 public class MainActivity : AppCompatActivity
 {

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);
        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.Main);
        var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
        SetSupportActionBar(toolbar);
        SupportActionBar.Title = "ViewPager Indicator Dots";

        var pager = new ViewPagerAdapter(SupportFragmentManager);
        var viewPager = FindViewById<ViewPager>(Resource.Id.viewPager);
        viewPager.Adapter = pager;
        viewPager.PageSelected += ViewPager_PageSelected;
    }

    private void ViewPager_PageSelected(object sender, ViewPager.PageSelectedEventArgs e)
    {
        var viewPagerDotsLayout = FindViewById<LinearLayout>(Resource.Id.viewPagerCountDots);
        for (int i = 0; i < viewPagerDotsLayout.ChildCount; i++)
        {
            ImageView dotImage = (ImageView)viewPagerDotsLayout.GetChildAt(i);
            if (i == e.Position)
                dotImage.SetImageResource(Resource.Drawable.ViewPagerDotSelected);
            else
                dotImage.SetImageResource(Resource.Drawable.ViewPagerDotUnselected);
        } 
    }
}


public class ViewPagerAdapter : FragmentStatePagerAdapter
{
    int numberOfFragments = 3;

    public ViewPagerAdapter(Android.Support.V4.App.FragmentManager fm) : base(fm)
    {

    }
    public override int Count
    {
        get
        {
            return numberOfFragments;
        }
    }

    public override Android.Support.V4.App.Fragment GetItem(int position)
    {
        switch (position)
        {

            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            case 2:
                return new Fragment3();
            default: return new Fragment1();
        }
    }
}

Run it and see if it works...