How to Make Carouselview In Xamarin.Andriod

Question

How to make this CarouselView in Xamarin android any example Reference?

Answer 1

Android provides the ViewPager control which is a layout manager that lets you implement gestural navigation. You could use ViewPager to achieve the carousel function and display the views via Fragment.

For the indicator, try to use a textView to achieve the function. Detect the PageSelected event of the ViewPager to change the indicator when scrolling pages.

Check the code:

Activity class

public class Activity1 : AppCompatActivity
{
    private TextView[] _dots { get; set; }
    private LinearLayout _dotsLayout { get; set; }
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.layout2);


        List<Android.Support.V4.App.Fragment> fragments = new List<Android.Support.V4.App.Fragment>();
        fragments.Add(new MyFragment_1());
        fragments.Add(new MyFragment_2());
        fragments.Add(new MyFragment_3());


        var adapter = new MyPagerAdapter(SupportFragmentManager, fragments);
        ViewPager pager = (ViewPager)FindViewById(Resource.Id.pager);
        pager.Adapter = adapter;
        pager.PageSelected += Pager_PageSelected;


        _dotsLayout = FindViewById<LinearLayout>(Resource.Id.indicator);
        AddDotsIndicator(0);
    }


    private void Pager_PageSelected(object sender, ViewPager.PageSelectedEventArgs e)
    {
        AddDotsIndicator(e.Position);
    }
    private void AddDotsIndicator(int pos)
    {
        _dots = new TextView[3];
        _dotsLayout.RemoveAllViews();
        for (int i = 0; i < _dots.Length; i++)
        {
            _dots[i] = new TextView(this);
            _dots[i].Text = ".";
            _dots[i].TextSize = 35;
            _dotsLayout.AddView(_dots[i]);
        }
        if (_dots.Length > 0)
            _dots[pos].SetTextColor(Android.Graphics.Color.Red); //change indicator color on selected page
    }
}

layout.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/indicator"
    android:layout_alignParentBottom="true"
    android:gravity="center_horizontal"/>
<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:layout_gravity="top"
    android:textColor="#000"/>

Fragment class and FragmentPagerAdapter class:

public class MyPagerAdapter : FragmentPagerAdapter
{
    List<Android.Support.V4.App.Fragment> fragments;
    public MyPagerAdapter(Android.Support.V4.App.FragmentManager fm, List<Android.Support.V4.App.Fragment> fragments) : base(fm)
    {
        this.fragments = fragments;
    }
    public override int Count { get { return fragments.Count; } }
    public override Android.Support.V4.App.Fragment GetItem(int position)
    {
        return fragments[position];
    }
}


public class MyFragment_1 : Android.Support.V4.App.Fragment
{
    public MyFragment_1()
    {
    }


    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.Inflate(Resource.Layout.layout1, container, false);
        TextView text = (TextView)view.FindViewById(Resource.Id.text);
        text.Text = "view_1";
        return view;
    }
}

Tutorial: how-to-add-dot-indicators-with-viewpager

Here is the link for sample project.