Visual challenge - bird atlas

[Depechie]

Tried creating design for app Bird Atlas ( https://dribbble.com/shots/5442850-Bird-Atlas-App )

Feedback

• Frame on iOS: how to set the styling for Material? The shadow is too big on the stories list.
• Title for shell section on android: how can I center it like iOS.
• Bottom tabbar on android: why is the unselected color not applied to the icon like iOS.
• Default labels color are not the same for iOS and android? See bird name in the Nearby birds flex layout list. iOS is black, android is grey.
• Flexlayout item template: can we bind the data template through use of a static resource?

Result

[davidortinau]

Thanks @Depechie! Great notes.

Styling options are coming for things like that card shadow.

TitleView would get your title centered on the ContentPage:

<Shell.TitleView>
        <StackLayout>
            <Label Text="My Title" VerticalOptions="Center" HorizontalOptions="Center" FontSize="32" TextColor="White"/>
        </StackLayout>
    </Shell.TitleView>

Bottom Tab Bar color inconsistency: xamarin/Xamarin.Forms#5075

Label colors - yes, they are not unified. Would you expect this to be the case b/c you're using Shell or Visual, or just in general?

FlexLayout - I think you should be able to. @StephaneDelcroix do you know for sure?

[Depechie]

So using

<Shell.TitleView>
    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Label Text="Discover" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" TextColor="Black"/>
    </StackLayout>        
</Shell.TitleView> 

Does improve the title on android, but it still shows the top shadow.
@davidortinau overall, I would think that if I'm using Visual and in this case specify Material as my base, the controls would indeed be more opinionated!
In other words ( like the team has done with the entry - the grey background ) my first thought would be, what I see on Android is what I should see on iOS.
So the Frame should behave the same, the default colors for label should be the same on each platform, ...
The endgoal would be unison between platforms and looking at my screenshot that is still not the case, although creating this page in shell and visual made it at least much easier and faster.

Side note, the images are clipped on Android frame rounded corners, but not on iOS... but I guess that is a general thing/issue and not something specific for Visual. But I would also expect same behaviour :)

If I use

<FlexLayout BindableLayout.ItemsSource="{Binding NearbyBirds}" 
            BindableLayout.ItemTemplate="{Binding NearbyBirdListItemTemplate}"
            Wrap="Wrap"
            Direction="Row"
            JustifyContent="Start"
            AlignItems="Start" AlignContent="Start"
            Padding="8" />

The binding is not working... I'm not getting intellisense either on VS for Mac 2017 for the BindableLayout properties so a bit in the dark here on how to get this working @StephaneDelcroix

[himanshu2024]

I am working on Xamarin forms app. I try to use Visual Material in my app it looks very nice, but i am facing some issue in bottom tabbed bar.
Before applying Visual Material

After applying Visual Material

How can i get my old BottomTabbedBar after applying Visual?

more info-
I am using TabbedPageRenderer with BottomNavigationItemView

[StephaneDelcroix]

@Depechie could you open a ticket here (https://github.com/xamarin/Xamarin.Forms/issues/new?assignees=&labels=t%2Fbug+%3Abug%3A&template=bug_report.md&title=) for the BindableLayout issue ? thanks

[Depechie]

hey @StephaneDelcroix and @davidortinau sorry about this!
Finally had some time to sit down and check the code again. I made a typo in the XAML and that was why the FlexLayout did not work. In the end everything is working out great now!

[StephaneDelcroix]

hey @Depechie,

glad you found out what was wrong. I'm curious about your typo. do you think this should have been caught and reported ?

S

[Depechie]

Well @StephaneDelcroix it's even shown above...
BindableLayout.ItemTemplate="{Binding NearbyBirdListItemTemplate}"
should have been
BindableLayout.ItemTemplate="{StaticResource NearbyBirdListItemTemplate}"

I know, shame on me, shame shame shame ;)

[StephaneDelcroix]

the issue should have been logged on the App output, but currently is not. @davidortinau we should fix that. compiled bindings would have caught it as well