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

Hello, people, I am back to talk more into the developments of my App. I am trying to name the App as Family Dialler. In case you have any better name, please do reach out or comment below. If any of you are a designer, please do help me with the look and feel of this App.

Family Dialler

Well, the App is now working to some extent in Debugging Mode. I am first working on a skeleton of the App with the minimum designs and layouts. I am doing this to test the functionalities that are required to go further with the App requirements.

NuGet Packages

I am listing some of the NuGet packages that I have come across and using them or am thinking of using in the future (as the App progresses). I have been maintaining a list of these packages and will keep on updating the same in a post published earlier.

I can access the Contacts as we speak and can perform the basic CRUD operations on my favorite contacts. Looking forward to finishing some more things 🙂

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.

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

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!

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!

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!

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!

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!

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.

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!