Horizontal listview

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????

Posts

  • 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!

  • Sreeraj.0276Sreeraj.0276 USMember ✭✭

    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

  • CheesebaronCheesebaron DKInsider, University mod

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

  • IbrahimSusicIbrahimSusic BAMember

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

  • CheesebaronCheesebaron DKInsider, University mod

    Create a row layout which has three columns.

  • IbrahimSusicIbrahimSusic BAMember

    @Cheesebaron Pls sample code

  • CheesebaronCheesebaron DKInsider, University mod

    No thank you.

  • IbrahimSusicIbrahimSusic BAMember
    edited June 2015

    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);
                    };
                }
            }
        }
    
  • rmaciasrmacias USBeta, University ✭✭✭✭✭
    edited June 2015

    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/

  • JoaquinGrechJoaquinGrech ESMember ✭✭

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

  • rmaciasrmacias USBeta, University ✭✭✭✭✭

    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/

  • JoaquinGrechJoaquinGrech ESMember ✭✭

    @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

  • dansyodansyo KEMember

    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????

  • dansyodansyo KEMember

    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????

  • AmitGobare23AmitGobare23 USMember ✭✭

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

  • ShimmyWeitzhandlerShimmyWeitzhandler USMember ✭✭✭
    edited June 2017

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

Sign In or Register to comment.