Building a Phone Dialler for Families and Friends using Xamarin – Part 1

The idea was to create a Phone Dialler where I can mark my folks (friends and families) as Favorites. You might think that we already have similar functionality available in our current Dialer, so why re-invent the wheel.

However, the way I want to do is that we have a different kind of implementation and that the dialer is something that intrigues me. So let’s see how far I can go into.

Now, in order to achieve this, obviously I will use my favorite IDE i.e., Visual Studio and the technology would be Xamarin.

The Basic Functionality

Let’s try to examine the blocks involved in this kind of App and the basic requirements in order to achieve this. Definitely, we can have other services that can be attached to it at a later point in time but then let’s keep the options to a basic minimum for now.
For the App to work, I would need to access the Phone Contacts as well as Call Logs. The App should have existing Contacts accessed from the Device, Call Logs to access the History, as well as an SQLite DB to maintain the favorites. Let’s not forget the Dialer Pad for dialing numbers directly.

  • Permissions:
    • Access Phone Contacts (Read and Write)
    • Access Call Logs (Read and Write)

To build the UI, we can always make use of ListViews, MasterDetail Pages, etc., to render the desired UI. I will definitely make use of the NuGet packages to get some faster results.

I have already started pushing in my code to GitHub. Once the Code is ready in terms of basic functionality, I will make it public, but for now, let’s hang onto it.

No commentsAdd a comment

NuGet Packages for Xamarin

Well, since I have been working on lots of Xamarin stuffs, I thought it’s sometimes best to list down the NuGet packages that are really amazing and helps you create the boiler plate of your App in a much easier and faster way.

The NuGet Packages

Let’s look at the worthy NuGet packages which are worth looking into.

NameDescriptionPlatforms
Acr.UserDialogsA cross platform library that allows you to call for standard user dialogs from a shared/portable libraryXamarin.Android Xamarin.iOS UWP Xamarin.Forms
SQLiteNetExtensionsSQLite-Net Extensions is a very simple ORM that provides cascade operations, one-to-one, one-to-many, many-to-one, many-to-many, inverse and text-blobbed relationships on top of the sqlite-net library.Xamarin.Forms
Rg.Plugins.PopupPlugin for Xamarin Forms. Allows you to open any page as a popup. Xamarin.Forms
Xamarin.Forms.DebugRainbows Adds a very colorful debug mode to each of your ContentPages that lets you immediately see where all of your elements are located. Xamarin.Forms
AkavacheAn asynchronous, persistent key-value store for desktop and mobile applications on .NETXamarin.Forms

I will keep updating this list as I keep encountering on these stuffs. Feel free to let me know if there are some I have missed.

Happy Coding!

Read 1 CommentAdd a comment

Fix WKWebView Content Cut Issue

A lot of Devs who have tried integrating UIWebView in the past had the option to fix things like Content getting cut when scrolling to the end.

Generally, when this happens the easiest way is to add padding to the Bottom of the ScrollView. The same can be done by making use of ContentInset. ContentInset is the custom distance that the content view is inset from the safe area or scroll view edges.

Let’s see how to add the same for a CustomRenderer in Xamarin.iOS for Xamarin.Forms:

 webView.ScrollView.ContentInset = new UIEdgeInsets(0, 0, 100f, 0);

Here in the above line, we add the ContentInset to the ScrollView asking it to accept padding of 100f to the bottom of the ScrollView. You can customize it as per your needs.

Happy Coding!

No commentsAdd a comment

ContentResolver for Xamarin.Forms

We often face some challenges when working with Xamarin.Forms.
In a similar instance, I faced one when trying to read Contacts. I found myself in a fix because the data that I had received for an Image was basically a URI with type content://

The data retrieved from the Contact for a Thumbnail was something like this:
content://com.android.contacts/contacts/29059/photo

Obviously, Xamarin.Forms is fully equipped to deal with any sort of ImageSource that comes in its ways, except something that is directly a platform specific.

In order to render this, I went ahead with DependencyServices.
Here’s my implementation for this:

IContentImageService.cs
public interface IContentImageService
{
    Stream GetImageUri(string contentUri);
}
ContentResolverMethods.cs
[assembly: Xamarin.Forms.Dependency(typeof(ContentResolverMethods))]
namespace YourNamespace.Droid.Dependencies
{
    public class ContentResolverMethods : IContentImageService
    {
        public Stream GetImageUri(string contentUri)
        {
            var uri = Android.Net.Uri.Parse(contentUri);
            return Android.App.Application.Context.ContentResolver.OpenInputStream(uri);
        }
    }
}

Now in order to use this, you can always invoke the method implemented in Android using DependencyServices from within the Xamarin.Forms Project which is either a .NetStandard, Shared or a PCL based project

var stream = DependencyService.Get<IContentImageService>().GetImageUri(imageUri);
return ImageSource.FromStream(() => stream);

Happy Coding!

No commentsAdd a comment

Reverse Proxy to Multiple Endpoints using NGINX

If you are a NodeJS developer, you know that you can easily create multiple Nodes and each of them can have their own ports to connect to.

For example, you might want to display the FrontEnd of the app via http://localhost:8080 and the API via http://localhost:3000

Now, in order to use a single domain to access this, I can use the location block within NGINX configuration and let NGINX forward the request to multiple endpoints depending on the conditions.

Here are the sample server blocks:

server {
location / {
proxy_pass <a href="http://localhost:8080">http://localhost:8080</a>;
}

location /api {
rewrite ^/api(.*) /$1 break;
proxy_pass <a href="http://localhost:3000">http://localhost:3000</a>;
    }
}

Here the first location block directly forwards the request to http://localhost:8080.

However, for us, the requirement was to make use of API calls as well.

So here the requests like https://www.mydomain.com/apifind/x would simply get forwarded to

http://localhost/find/x. This means, now if I can use the same domain and route the requests to different servers depending on the needs.

 

Happy Coding!

No commentsAdd a comment

Disable Screenshot in App

Many a times we have seen App which detect and won’t allow us to take screenshots. So as an App developer on Xamarin, it’s quiet intriguing to know how to achieve that. Turns out, it’s just a line of code that would allow us to achieve that.

this.Window.SetFlags(WindowManagerFlags.Secure, WindowManagerFlags.Secure);

Setting up the Flags for Window Manager does the job. Now just add this in a Blank Android App and test it out. You will see that it works just like that.

Happy Coding!

Read 1 CommentAdd a comment

I am now a Microsoftie!

Well after a journey of around 2 years at Xamarin, I am now an FTE at Microsoft with Blue Badge.
I will be joining Microsoft as a Software Engineer II in the Xamarin Team.

My journey started from Aditi Technologies > Sapient > Xamarin and now Microsoft.

Now I am no more a Microsoft MVP. As per the policy, Microsoft FTEs cannot be a Microsoft MVP. But I am definitely available everywhere for the Community.
Still, I am part of the XHackers Community which we had started before.

No commentsAdd a comment

Xamarin.Forms Label Renderer for Displaying many lines

I am back again with a post on Xamarin.Forms Custom Renderer. My earlier post was on the creation of a Custom Renderer for Entry.

Well, this time, we are going to solve something different which might not have been faced by many users. Sometimes, it happens that you want to display some lines of Text to the user like Read Me or just some Random text. For instance, consider the following code snippet:

<Label Text="{Binding SomeText}" HorizontalOptions="Fill">

Here, when the App is run, the text will be filled in the Label. However, if the number of lines crosses 100, the text will get clipped. In case, you want some more lines, you can always create a Custom Renderer for Label.

You can try to create something like this:

In Android

public class CustomLabelRenderer: LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        Control.SetMaxLines(500);
    }
}

In iOS

public class CustomLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            UILabel label = Control;
            label.Lines = 500;
        }
    }
}

Hope this helps someone.

Happy Coding!
 

Read 1 CommentAdd a comment

Trying Xamarin.Forms Entry Renderer for Corner Radius

I am always amazed by the capability of Xamarin.Forms Custom Renderer. I wanted to try something and thought of extending the Entry Custom Renderer for Windows Phone App initially to try and provide Corner Radius for Textbox.

If you are a Windows Phone developer, then you already know the complexities. Generally, the TextBox element in Windows Phone, doesn’t have the property of CornerRadius. Corner Radius, generally provides the Curved borders, which in this case would provide for the Textbox control. Anyways, in order to provide a separate border, we generally have to nest the TextBox inside a Border element to provide the Corner Radius.

<Border Margin="5" Padding="5" BorderThickness="1" BorderBrush="Red" Background="AntiqueWhite" CornerRadius="10">
    <TextBlock Text="Lorem ipsum"/>
</Border>

Now I have tried to achieve somewhat same in Xamarin.Forms using Custom Renderers for Windows Phone.
The code is currently checked-in here.

Happy Coding!

Read 5 CommentsAdd a comment