Posts

Showing posts from October, 2016

Build your own Line chart for Xamarin.Forms (Part 2)

Image
Build your own Line chart (Part 2)Last week we saw how we could use custom renderers with boxview to draw via the canvas api https://kimsereyblog.blogspot.co.uk/2016/10/build-your-own-line-chart-for.html.Today I will go through the steps to draw a line chart supporting markers. The line chart is very simple and has only one objective, give a rough indication of the current trend of the data displayed.In order to draw the chart, we will divide the chart in four layer which we will draw one by one. Therefore this post will be composed by the three layers.Draw background and bandsDraw axis and labelsDraw lines and markers1. Draw background and bandsWe can see the canvas as a painting canvas. When we draw something and then draw something on top of that, the last thing drawn will hide the previous one - just like as if you are painting something on top of something else. Therefore the first thing we need to draw is the background.// Draws background paint.Color = Color.ParseColor("#2…

Build your own Line chart for Xamarin.Forms (Part 1)

Image
Build your own Line chart for Xamarin.Forms with Custom renderers (Part 1)Last week I needed a line chart to plot expenses. I had two choices: use an existing library or draw the chart myself on canvas.I decided to go for the second - draw the chart using the Android Canvas API.I chose this approach because it gives me full flexibility to create a style and behaviour that match perfectly my application.Here’s the chart result:This tutorial will be composed by four points divided in two parts:1. Xamarin.Forms custom renderer (Part 1) 2. Explore the Android Canvas API (Part 1) 3. Create a GraphView which will draw a line chart (Part 2) 4. Use it (Part 2) 1. Xamarin.Forms custom rendererOfficiel documentation: https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/A custom renderer is a class used by Xamarin.Forms to define platform specific behaviours of your views. In this tutorial, we will be using a custom renderer to access the Android native Canvas API to draw a line ch…

What does DP, DPI, PPI and PX represent in Android?

What does DP, DPI, PPI and PX represent in Android?I’ve been playing with Xamarin Android for a while now and one thing that disturbed me when I started was the units of measure. What is the difference between DP, DPI, PPI and PX in Android?I found my answers in the Material design guide and today I would like to share my undertanding of the differences and bring a different explanation which hopefully will help you get a better understanding.This post is composed by three parts: 1. PX - pixels 2. DPI / PPI - pixels per inch 3. DP - density-independent pixel 1. PX - pixelsPixels is the most granular unit of measure. When talking about resolution 1920x1080, 2560x1440, etc… It represents the amount of pixels which fit in the screen.The higher the better but a second aspect equally important has too be taken in consideration - the screen dimension.Two devices with the same resolution but different screen sizes will not have the same display. For a similar resolution, the bigger the scr…

How to make a splash screen with Xamarin.Android

Image
How to make a splash screen with Xamarin.AndroidThe first time I had to implement a splash screen for a Xamarin.Android app, I was completely lost. Xamarin official documentation is great https://developer.xamarin.com/guides/android/user_interface/creating_a_splash_screen/ but without prior knowledge in Android, it is hard to follow.So today I would like to show you how you can create a splash screen for an Xamarin.Android app and provide more explicit information on what is happening and why is it done this way. This post is composed by 3 parts. 1. What's a splash screen 2. Implement the splash screen 3. Use the splas screen A full sample is available on my GitHub https://github.com/Kimserey/FileFoldersXamarin/tree/master.1. What’s a splash screenA splash screen is a screen shown to the user while the application is loading in the background. Xamarin.Forms applications take few seconds before being completely loaded, therefore it is important to provide a splash screen to indic…

Build an Accordion view in Xamarin.Forms

Image
Build an accordion view in Xamarin.FormsFew weeks ago I posted about absolute and relative layouts. Layouts are called Layouts because they contain children which are placed in a particular way. Xamarin.Forms has a lot of layouts and views to structure pages like grid, table view or list view.Today I would like to show you how we can use some of these basic views to build an Accordion view.Here’s a preview of the Accordion view:Full source code available on GitHub - https://github.com/Kimserey/AccordionView/blob/master/Accordion/AccordionView.csThis post will be composed of four steps:Create a BindablePropertyDefine the accordion expandable sectionDefine the accordion viewUsage sample1. Create a BindablePropertyAs we saw in one of my previous post, Xamarin.Forms works around data bindings. View properties are bound to viewmodel properties.Default views like Label, Button, ListView or TableView come with the necessary bindable properties like BackgroundColor, TextColor, ItemsSource, It…