Accordion not working on Android

[aunanue]

Hello @GiusepeCasagrande this is a great control but I can't make it work on Android, the touch event void OnCellTouchUpInside(int cellIndex) is never triggered. On iOs it works awesome but do you have it working on Android as well I noted that there's no "Android" project in this solution.

[GiusepeCasagrande]

Hello @aunanue, I had it running on Android as well and used to work. Let's do this: I'll update this project and add a Android sample here so we can confirm that's still working, what do you say?

[aunanue]

That would be great @GiusepeCasagrande, I'll wait for the update and then I'll let you know how it goes.

[GiusepeCasagrande]

@aunanue Well, you are right. For a complete unknown reason to me, void OnCellTouchUpInside(int cellIndex) is never called. Looks like something changed in the Forms, I'll take a better look.

[aunanue]

@GiusepeCasagrande I've been working on an expandable control based on the RepeaterView from XLabs. It has a similar behavior to your Accordion in which a TapGestureRecognizer is added to the children and I found something interesting that might be related to this problem.

When my ViewCell has a StackLayout with more than one Grid/Stacklayout as children then the TapGestureRecognizer doesn't work on Android (it does on iOS) but if the ViewCell has only one child it does work on both iOS and Android.

All my viewCells have two children: The Header Grid that is always visible and the Detail Grid which is the one to display when the header is tapped.

To solve it, in my case I add the TapGestureRecognizer to the Header Grid, i.e to the first children of the ViewCell and with this I does works on the two platforms.

In my case due to my business rules this solution has a plus since I cannot collapse the Cell when the Detail is tapped, it can only be collapsed/expanded via the header.

I'm sharing this with you since maybe this TapGestureRecognizer is a XF's bug and can be solved via this workaround.

Cheers

Ariel

[GiusepeCasagrande]

@aunanue Hum...

I have added a Android version and I'm struggling to fix this. Really looks like a XF bug. As soon as I manage to make some time of it, I'll try your workaround, let's see if that can solve the problem.

I believe that the cell shouldn't be collapsed when the detail is tapped, because that will restrain a lot the possible interactions inside it, so no problem for me.

Thanks a lot for been so kind and share your possible solution.

Cheers,

Giusepe

[MichaelMcKinney]

It looks like Xamarin forms is having trouble with nested Grid objects and GestureRecognizers. A solution I found was making an clear button on the cell that calls the TouchUpInside method. It works, but it ended up being a bit ugly in terms of organization.

[BoobalanK]

@GiusepeCasagrande Hi We have Solved this Issue by designing Seperate XAML Pages for Cell and Item. Then We removed TapGesture from OncellTouchUpInside and Added it to Cell's xaml.cs Page. Hope it Helps. AnyWay Thanks to GiusepeCasagrande for Great Accordion.

[GiusepeCasagrande]

@MichaelMcKinney While it may work, it's not the way I would like to have this working. But thanks for the tip. @BoobalanK Nice to know!

It's I have been in some projects with crazy deadlines lately, so no time to invest here. But I still want to make this work again, improve it. Maybe rewrite from scratch with XAML and ReactiveUI, not sure sure yet.

[zinczinc]

Hello folks, Actually, I think the issue mentioned here has something to do with the Boxes background. The grid cell "Tap" event is, in my humble opinion, somehow "obstructed/blocked" by the green and black backgrounds!. Maybe someone has a better explanation.

I came up with two options to solve this issue (one can choose whichever looks more convenient for them):

FIRST OPTION (this option has the advantage of getting the Tap sound as well):

1. In the MainPage, I added a Button at the end of the GreateCell() method like this:

static Grid CreateCell()
{

       //...Existing code skipped for brevety.....

        cell.Children.Add(blackBox);
        cell.Children.Add(greenBox);
        cell.Children.Add(label);
    // add a button here...bonus: we get the tap sound as well, when the button is clicked....
        cell.Children.Add(new Button { TextColor = Color.FromHex("#f2f2f2"), Text = "You can touch this too!", BackgroundColor = Color.FromHex("607624") });
        return cell;
}

2. Then, in the Add method of the AccordionControl class, I wired the button Clicked event as follows:

public void Add(View cell, View view)
    {
         //............
        // Existing code left untouched; skipped for brevety....
       //****************** This code block is not needed anymore if this option is chosen *******
         var tapGestureRecognizer = new TapGestureRecognizer();

        if (CellTouched == null)
            tapGestureRecognizer.Tapped += (object sender, EventArgs e) => OnCellTouchUpInside(cellIndex);
        else
            tapGestureRecognizer.Tapped += (object sender, EventArgs e) => CellTouched(cellIndex);
       cell.GestureRecognizers.Add(tapGestureRecognizer);
        **************************************************************************************/

        //we just add this at the end of this Add method
        Grid grd = entry.Cell as Grid;
        if(grd != null)
        {
            var btn = grd.Children.FirstOrDefault(c => (c as Button) != null);

            if(btn != null)
            {
                if (CellTouched == null)
                    ((Button)btn).Clicked += (s, e) =>
                    {
                        OnCellTouchUpInside(cellIndex);
                    };
                else
                    ((Button)btn).Clicked += (s, e) =>
                    {
                        CellTouched(cellIndex);
                    };
            }
        }
    }

SECOND OPTION: Very simple and neat: just modify the CreateCell() method of the MainPage as follows (however, you will not get the Tap sound):

    static Grid CreateCell()
    {
        var topBlackBox = new BoxView()
        {
            BackgroundColor = Color.Black,
            HeightRequest = 2,   //100,
            HorizontalOptions = LayoutOptions.FillAndExpand,    //.FillAndExpand,
            VerticalOptions = LayoutOptions.Start   //LayoutOptions.FillAndExpand
        };

        var bottomBlackBox = new BoxView()
        {
            BackgroundColor = Color.Black,  //Color.FromHex("607624"),
            HeightRequest = 2,   //98,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.End   //.Center
        };

        var label = new Label()
        {
            Text = "You can touch here.",
            TextColor = Color.White,
            VerticalTextAlignment = TextAlignment.Center,
            HorizontalTextAlignment = TextAlignment.Center,
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center
            , BackgroundColor = Color.Transparent
            , HeightRequest = 98
        };

        var cell = new Grid()
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,

            Padding = new Thickness(0, 0, 0, 0),
            RowSpacing = 0,
            ColumnSpacing = 0,
            BackgroundColor = Color.FromHex("607624")
        };

        cell.Children.Add(topBlackBox);
        cell.Children.Add(bottomBlackBox);
        cell.Children.Add(label);
        return cell;
    }

I hope this can help someone.

[break7533]

@zinczinc I used your second method and it worked like a charm!

Was really looking for a solution for this problem! Thanks for your contribution!

[zinczinc]

@break7533 : You are most welcome!