locked
Horizontal listview RRS feed

  • Question

  • User20964 posted

    Hi, I'm stuck with this stuff, I want to create an horizontal listview like in the attached file, but I don't know how to do it, is there any way to do this????

    Monday, September 9, 2013 10:48 PM

All replies

  • User209 posted

    You could try: https://github.com/Cheesebaron/Cheesebaron.HorizontalListView

    Tuesday, September 10, 2013 7:12 AM
  • User20964 posted

    Hi, I tried using what you commented, but I got a trouble, I want to put it between two controls, but it doesn't respond to width with "wrap content" value, it fills all the screen hidding another controls, I put a red color background to HorizontalListView to show it, hope you can help me, thanks!

    Tuesday, September 10, 2013 3:28 PM
  • User44771 posted

    Hi @Cheesebaron , I need to have a horizontal ListViewof circular images, in which items in centre are zoomed in comparing the items towards the edges. I could acehive horizontal scollView from your libaryand circular images from Xamarin Store App sample. Here is a screenshot of what has been acheived.

    This works fine. Now I want it to have images in the centre with zoom to have focus. Here is a screenshot of what has to be acheived. Please have a look and give proper suggestion

    Thank You

    Tuesday, March 24, 2015 5:50 AM
  • User209 posted

    My proper suggestion is that you create an adapter which can help you with that.

    Tuesday, March 24, 2015 5:28 PM
  • User84537 posted

    @Cheesebaron how I wrap my list in 3 column no use scroll ?

    Friday, April 10, 2015 9:37 AM
  • User209 posted

    Create a row layout which has three columns.

    Friday, April 10, 2015 10:42 AM
  • User84537 posted

    @Cheesebaron Pls sample code

    Friday, April 10, 2015 11:07 AM
  • User209 posted

    No thank you.

    Friday, April 10, 2015 11:43 AM
  • User84537 posted

    Hi @CheesebaronI did the changes on your class BindableHorizontalListView for new MvvmCross platfrom packages.

    Update class:

        using System.Collections;
        using System.Windows.Input;
        using Android.Content;
        using Android.Util;
        using Cirrious.MvvmCross.Binding.Droid.ResourceHelpers;
        using Cirrious.MvvmCross.Droid.Views;
        using Cirrious.CrossCore.Platform;
        using Android.Graphics;
        using System.Threading;
        using Android.Views.Animations;
        using Cirrious.MvvmCross.Binding.Droid.BindingContext;
        using Cirrious.MvvmCross.Binding.Droid.Views;
        using Cirrious.MvvmCross.Droid.Fragging.Fragments;
        using Android.Support.V4.App;
        using Cirrious.MvvmCross.Droid.Fragging;
        using Cirrious.CrossCore.Droid;
        using Cirrious.MvvmCross.Binding.Attributes;
        using Cheesebaron.HorizontalListView;
    
        namespace Cheesebaron.HorizontalListView
        {
            public class BindableHorizontalListView
                : HorizontalListView
            {
                public BindableHorizontalListView(Context context, IAttributeSet attrs) 
                    : this(context, attrs, new MvxAdapter(context))
                {
                }
    
                public BindableHorizontalListView(Context context, IAttributeSet attrs, MvxAdapter adapter)
                    : base(context, attrs)
                {
    
    
                    var itemTemplateId = MvxAttributeHelpers.ReadAttributeValue(context, attrs, MvxAndroidBindingResource.Instance.ListViewStylableGroupId, MvxAndroidBindingResource.Instance.ListItemTemplateId);
                    adapter.ItemTemplateId = itemTemplateId;
                    Adapter = adapter;
                    SetupItemClickListener();
                    SetupScreenChangedListener();
                }
    
                public new MvxAdapter Adapter
                {
                    get { return base.Adapter as MvxAdapter; }
                    set
                    {
                        var existing = Adapter;
                        if (existing == value)
                            return;
    
                        if (existing != null && value != null)
                        {
                            value.ItemsSource = existing.ItemsSource;
                            value.ItemTemplateId = existing.ItemTemplateId;
                        }
    
                        base.Adapter = value;
                    }
                }
    
    
                [MvxSetToNullAfterBinding]
                public IEnumerable ItemsSource
                {
                    get { return Adapter.ItemsSource; }
                    set { Adapter.ItemsSource = value; }
                }
    
                public int ItemTemplateId
                {
                    get { return Adapter.ItemTemplateId; }
                    set { Adapter.ItemTemplateId = value; }
                }
    
                public new ICommand ItemClick { get; set; }
    
                private void SetupItemClickListener()
                {
                    base.ItemClick += (sender, args) =>
                    {
                        if (null == ItemClick)
                            return;
                        var item = Adapter.GetItem(args.Position) as MvxJavaContainer;
                        if (item == null)
                            return;
    
                        if (item.Object == null)
                            return;
    
                        if (!ItemClick.CanExecute(item.Object))
                            return;
    
                        ItemClick.Execute(item.Object);
                    };
                }
    
                public new ICommand ScreenChanged { get; set; }
    
                private void SetupScreenChangedListener()
                {
                    base.ScreenChanged += (sender, args) =>
                    {
                        if (null == ScreenChanged)
                            return;
    
                        if (null == args)
                            return;
    
                        var cArgs = new {
                            CurrentScreen = args.CurrentScreen,
                            CurrentX = args.CurrentX
                        };
    
                        if (!ScreenChanged.CanExecute(cArgs))
                            return;
    
                        ScreenChanged.Execute(cArgs);
                    };
                }
            }
        }
    
    Thursday, June 18, 2015 11:43 AM
  • User1669 posted

    FYI, you can use a RecyclerView to give you a Horizontal list view. Just set the layout manager to linear & horizontal. You can even set the layout manager to a grid if you choose.

    http://sharpmobilecode.com/android-listviews-reinvented/

    Thursday, June 18, 2015 1:39 PM
  • User13437 posted

    The problem with RecyclerView is that it doesn't exist pre 4.4... meaning 50% of your user base won't see it

    Thursday, August 27, 2015 3:47 PM
  • User1669 posted

    Not true if you use Android Support v7 library, which will let it run on pre-4.4. I've tested on devices as far back as 4.0.

    https://developer.android.com/tools/support-library/features.html https://www.nuget.org/packages/Xamarin.Android.Support.v7.RecyclerView/

    Thursday, August 27, 2015 3:54 PM
  • User13437 posted

    @rmacias you are completely right. I misunderstood the documentation. It was introduced not long ago but it's compatible even with 2.x devices.

    As for the original post, I've just wrote my on version of an horizontal image gallery using RecyclerView and shared the code here: https://forums.xamarin.com/discussion/43565/anyone-here-used-recycler-view-in-forms-why-isnt-it-the-gridview-in-xlabs

    Friday, August 28, 2015 8:15 AM
  • User281032 posted

    I think this will definitely solve your issue.. http://whats-online.info/science-and-tutorials/87/Android-tutorial-Horizontal-RecyclerView-with-images-and-text-example/

    Monday, December 12, 2016 3:29 PM
  • User281032 posted

    I think this will definitely solve your issue.. http://whats-online.info/science-and-tutorials/87/Android-tutorial-Horizontal-RecyclerView-with-images-and-text-example/

    > @FranciscoNieves said:

    Hi, I'm stuck with this stuff, I want to create an horizontal listview like in the attached file, but I don't know how to do it, is there any way to do this????

    Friday, December 30, 2016 4:01 PM
  • User281032 posted

    I think this will definitely solve your issue.. http://whats-online.info/science-and-tutorials/87/Android-tutorial-Horizontal-RecyclerView-with-images-and-text-example/

    > @FranciscoNieves said:

    Hi, I'm stuck with this stuff, I want to create an horizontal listview like in the attached file, but I don't know how to do it, is there any way to do this????

    Friday, December 30, 2016 4:01 PM
  • User235482 posted

    @FranciscoNieves Are you getting what you expecting? @Cheesebaron When I run application then it said please install API 10?

    Tuesday, January 17, 2017 10:46 AM
  • User248484 posted

    This might be helpful, and have a look at this too.

    Wednesday, June 21, 2017 1:20 PM
  • User207282 posted

    try this...https://github.com/MigueldeIcaza1/HorizontalListView

    Friday, June 30, 2017 11:38 AM