Tomasz Cielecki: iOS WebView insets

I have been battling some UI constraints on iOS and I have finally found a solution to how to solve this specific problem and just wanted to share.

My problem was that I had a UIWebView, which kept laying itself out underneath the NavigationBar in my controller. A quick fix would be to just set edges for the extended layout to none like so:


However, this will make you lose the nice effect of views scrolling behind the NavigationBar, for instance if the web page you are displaying scrolls.
Enter insets. As the name kind of indicates you add some spacing into your view. There is a property called AutomaticallyAdjustsScrollViewInsets. However, for some reason it does not do anything in my case, so I had to manually adjust the inset, which I did in ViewWillLayoutSubviews as in ViewDidLoad the TopLayoutGuide is not ready yet and will give you 0 for its Length. Basically this is what I had to do:


This tells both the UIWebView’s internal ScrollView and the scroll bar that you want some space in the top equals to the height of the NavigationBar.

Details
IOS, Navigation, Xamarin Community Bloggers

Daniel Hindrikes: Xamarin.Forms Android CardView

When Google introduced Material Design for Android they introduced a new view called CardView. Xamarin.Forms doesn’t have support for CardView by default but you can easily create your own view that renderers a CardView on Android. First step is to create a Xamarin.Forms control in your shared project. public class CardContentView : ContentView {   […]
Details
Android, IOS, ListView, lollipop, material design, Xamarin Community Bloggers, Xamarin Forms
Apr52015

Marcos Cobeña Morián: Translating Designs into Layouts: Units Conversion

One aspect that Apple pushed to the limits is the union between Designers and Developers. Instead of understanding the product development process as a chain, it is done as a very close relationship walking in the same direction. Both of them speak different languages: they use different tools during their day-to-day job, they see different … Continue reading Translating Designs into Layouts: Units Conversion →
Details
Android, IOS, Xamarin Community Bloggers, Xamarin Forms
Apr42015

James Montemagno: Material Design Theming for Xamarin.Forms Android Apps

I am an extremely big fan of Material Design for Android applications. Case and point is this tweet that I sent out last night:

Over the past six months have I present on Material Design at Xamarin Evolve and also at user groups and the number one question I get is: “How can we use Material Design in Xamarin.Forms?” 

That is a loaded question because Material Design is not only the core theming of the application, but it is custom controls, animations, transitions, and a plethora of other things. Check out Google’s Material Design guidelines  for everything that is really part of material design. 

When it comes to Xamarin.Forms and Material Design it is a tricky question. All the custom control, animations, transitions, and jazz like that you most likely will not be able to do with out some work and some renderers.  However, you still have the ability to add in a little Material Design Theming and of course you can follow proper spacing and guidelines on the 4dp grid.

The AppCompat Debate

Revision 21 of AppCompat v7 was pretty ground breaking. Traditionally, AppCompat brought the use of the ActionBar to older platforms, but Revision 21 changed all of this by bringing Material Design Themes and controls to older devices. This is important since Lollipop is currently 3.5% of the market! Currently, Xamarin.Forms does not use AppCompat which means we can not take advantage of the new compat theming, but there is NO reason that we can’t make our Lollipop users happy by adding a little material theming to their app. This will bring not only material design themes, but also all the fancy touch events, and other core Lollipop control features from the core OS, which will be very nice.

Base Styles:

The first step is to ensure that you have you Resources/values/styles.xml and base theme setup to use Holo. In your Android project under Resources/values simply create a new xml file and name it styles.xml. Then you can place this XML in it:

Next is to create our Lollipop specific styles under Resources/values-v21/styles.xml, which you will place:

I like to put all of my color resources in Resources/values/colors.xml, and this is what mine looks like, which you can see I am referencing in the values-v21/styles.xml:

Update ApplicationManifest.xml

You must now of course tell your Android app to use this new fancy theme that you have created by setting the android:theme attribute:

Remove App Icon from ActionBar

The new default in Lollipop is to hide the app icon from the main action bar and you can easily do this inside of your MainActivity.cs with just a few lines of code:

Update Hamburger Button (optional)

If you are using the MasterDetailPage you will want to update your hamburger icon so that on v21 it uses the new full triple line. You can do this by download the set from the Android Asset Studio and then creating new drawable folders with the extension of -v21 at the end like this:

Then you will set the Icon to “slideout.png” or whatever you called it for your MasterDetailPage.

Here is the final result of just a few minutes of work in my Hansleman.Forms app:

Nice new styling for the colors, larger action bar, better fonts, and of course a nice new hamburger button! So can you get Material Design in your Xamarin.Forms application? Absolutely, but you just don’t get everything and it is for a limited amount of users. However, the number of Lollipop users is only going up so why not add a bit of flare to your app?

Details
Android, AppCompat, lollipop, material design, Theming, Xamarin Community Bloggers, Xamarin Forms

Johan Karlsson: Images in a ListView on iOS

There is an odd behavior in Xamarin Forms regarding images that are loaded from an URL and then placed in an ListView. The problem is that there is an await call when fetching images and that the image is set when that call is returned.

Since Xamarin Forms Listview now reuses cells in iOS (as it should) one small piece was overlooked. The reused cells now displays previously displayed images for a short while until the new image is downloaded.

This behavior is mitigated by a cache, so once an image is loaded it’s set instantly the next time the cell is displayed.

I’ve also filed a bug with a sample project available at https://bugzilla.xamarin.com/show_bug.cgi?id=28628 and the sample project to visualize the issue at here.

There are a number of ways around this.

Suggestion one – half-way around

This solution works, but images are blank and then suddenly pops into place. It’s visually ugly, but better than the original version  of the ImageRenderer. What is does is that it sets the Image to null (the UIImage.Image) when IsLoading changes from False to True. The problem is that is does this even when the image isn’t loading from the internet, but from the cache as well, leaving us with no option to initiate a fade in.
assembly: ExportRenderer (typeof (Image), typeof (CustomImageRenderer))]

namespace ImageListView.iOS.Renderers
{
    public class CustomImageRenderer : ImageRenderer
    {
        public CustomImageRenderer()
        {
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if ((sender as Image).IsLoading)
            {
                // The image will be reset in base if there is one already in the cache.
                // If it isn‘t already loaded we don‘t want to display the previous image
                // This is however called each time a cell comes into view so it can‘t
                // be used for opacity fading or likewise...
                // This should be handled by the code in the ImageRenderer
                Control.Image = null;
            }
           
            base.OnElementPropertyChanged(sender, e);
        }
    }
}

Suggestion two – wrap it

Wrap your image in a custom control and handle all the loading and caching yourself.

Suggestion three – rewrite it

Write your own Image-renderer from scratch to take into account when an image is fetched from the cache or not to enable a nice fade in. This is what I hope will come out of the bug report.

Suggestion four – hijack the cache

The next article is going to be about this. But simply put, we highjack the cache and control the image flow from that way. Stay tuned! 😀

Summary

I would go with suggestion one for now and wait for the outcome of the bug report.
Have a great one!
Details
IOS, ListView, Xamarin Community Bloggers, Xamarin Forms