Need some information / hints / help for a special UI-Design w/ Xamarin.Forms

Hi @all,
I'm currently struggling in the design of an ui which should look like this (attachment)

My questions are:

  • is this UI Design possible w/ Xamarin.Forms or has it to be designed for each platform separately?
  • how can I achieve such an UI, could anybody of you, give me some hints / help etc?

for simplicity it don't has to be an absolute / relative layout to be suitable for other devices

Kind Regards
Carsten

Answers

  • VictorHGarciaVictorHGarcia USUniversity ✭✭

    I highly suggest do not use Xamarin.Forms for that UI, you will probably at the end doing that platform specific.

    Just my grain of salt.

  • AdamWolfAdamWolf USMember, University ✭✭

    Hi @CarstenHerrmann you can use BoxViews for showing the fill level of the tanks. I did a blog post on how to use a bunch of BoxViews to make bar charts on my blog here

    If you want to make the one on the right, you could use an image of the tanks but have the inside of the tanks transparent and put 3 BoxViews behind the image using a relative layout. Watch out for resizing the image on different phone sizes.

    One other option you might look into, is using the NGraphics library and drawing the hole thing in one shot. Check out the github repo.

    Good luck.

  • AndrewMobileAndrewMobile USMember ✭✭✭✭
    edited May 2015

    I can't see any issues by doing this with Xamarin Forms.
    Depending on what you want to do, the productivity with Xamarin Forms is high.
    But it depends on what you need done. This mockup you show here is a very good fit for Xamarin Forms.

    You should get a more complete set of mockups of all screens you want to do, and then do an evaluation.
    This is just one or two screens, not sure.

  • GeorgeCookGeorgeCook PEUniversity ✭✭✭
    edited May 2015

    To reiterate the sage advice of others here : this is totally possible with a forms app.

    @AdamWolf's suggestions are all fairly easy to do. You could even abstract each tank into it's own layout class (extend absolute layout) and have that manage drawing the box underneath the tank image. That way you can easily do your tanks as a re-usable component.

    I think the days of just saying "Forms is not a good fit for this, because it doesn't look like the native-as-hell sample apps" are already gone. There's very little you can't do with Xamarin Forms. You can think of it as a set of gears. Forms gives you all the little gears, and every now and then you need a renderer to do some big thing or other (might be a custom view, a performance hack, a feature that isn't yet supported by XF), you might find you never ever need to engineer those big-cogs; but even if you do, you end up getting massive wins using XF (becuase you're always writing small cogs that turn big ones for you behind the scenes, if you catch my drift). It's going to be my number one platform for mobile dev for the time-being.

  • CarstenHerrmannCarstenHerrmann DEMember
    edited May 2015

    thx for your quick response!
    I will try my best, but honestly I'm definitely not a UI Designer and with the lack of a gui designing tool like blend, it ends up w/ lots of time w/out seeing progress.
    It doesn't has to be so complex especially to suit every single device...at the moment just an iPhone6 and a Nexus5, so imho a bunch of StackLayouts should be enough?.

    like in the picture at the next comment ;)

    What do you think?? how would you achieve this?..as I said, as simple as possible

  • CarstenHerrmannCarstenHerrmann DEMember

    the image

Sign In or Register to comment.