Monthly Archives: February 2016

Convert Android Bitmap Image and iOS UIImage to byte[] array in Xamarin

Ever wanted to convert an Android Bitmap Image to dot net byte[] array ? or how about converting iOS UIImage to dot net byte[] array ? Ever wondered how to implement either ? 😉 Well then you are about to find out how!

Alright so there was this one time…

I wanted to create a Custom Image Loader service using Dependency Service in Xamarin Forms.

It’s suppose to be easy, but the only problem was getting the different Image types in Android and iOS to a common data type!??%$@##!! 😦

Byte[] array for the Rescue

So just like you would have assumed by now, I wanted to convert the both Android and iOS Image types to dot net byte[] array type so that I could use them in my PCL library for the Xamarin Forms project. More specifically converting Android Bitmap Image to byte[] array and iOS UIImage to byte[] array was my specific requirement.

Well, as usual here I am sharing the code implementation, incase if any of you are going through the same situation, here’s how I implemented it. 😉

Android Bitmap Image to byte[] array ?

It’s pretty straightforward, We create a Memory Stream and compress the Bitmap image into it as follows.

var ms = new MemoryStream();
// Converting Bitmap image to byte[] array
myBitmapImage.Compress(Bitmap.CompressFormat.Png, 0, ms);
var imageByteArray = ms.ToArray();

 

There you go, from the Memory Stream you extract the byte[] array.

iOS UIImage Image to byte[] array ?

In iOS first we create a blank byte[] array with the length sufficient to hold our Image’s size. We are going to use Marshal.Copy() method to copy our UIImage’s NSData.Bytes to our byte[] array as follows.

// Converting UIImage to byte[] array
Byte[] myByteArray = new Byte[myUiImage.Length];
System.Runtime.InteropServices.Marshal.Copy(myUiImage.Bytes, myByteArray, 0, Convert.ToInt32(myUiImage.Length));

 

Now pass around the myByteArray, wherever you want. lol

There you have it folks! 😀

Stay awesome!

Cheers! 🙂

Load Image Resources by Name in Android Xamarin

It’s no secret that we can not access Image Resources by name in Android specially in code behind, whereas you need to pass in the Resource ID, or access it through the Resource Manager.

There was this one time I wanted to access some Image Resources by name, I mean why not? If I’m aware of the name of the resource why can’t I access it with the file name instead of looking for a resource ID. lol 😛 Well actually I had some serious requirement to deal with regarding retrieving the Image Resource by name in one of my projects.

So as usual here I am sharing the code implementation, incase if any of you are going through the same issue, here’s how I implemented it. 😉

How to ?

Well it’s the same as retrieving the Resource with the Resource ID, but instead we need to find the Resource ID by the name of the image.

In Xamarin Android we have access to the Resource.Drawable which contains all the Resource ID along with their names, so what we need to do is search through its public field by the specific file name of our Image Resource.

string imagefileName = "testimage.jpg";
// Remove the file extension from the image filename
imagefileName = imagefileName.Replace(".jpg","").Replace(".png","");

// Retrieving the local Resource ID from the name
int id = (int)typeof(Resource.Drawable).GetField(imagefileName).GetValue(null);

 

As you can see above first of all we remove the file extension from the filename of the image we want to load and we access the Resource.Drawable public fields to search for the name of the image resource, and finally retrieve the Resource ID.

Now as we have the Resource ID of the image we can retrieve it from our Resources as Bitmap Image.

// Converting Drawable Resource to Bitmap
var myImage = BitmapFactory.DecodeResource(Forms.Context.Resources, id);

 

There you can see I’m using the BitmapFactory to convert the Resource to Bitmap Image, thereby now we can use our Bitmap image as anyways we want. 😀 If you need to check whether the ID has been found you could add an IF condition and check whether the ID value is 0 or not

So here’s the full code Implementation…

string imagefileName = "testimage.jpg";
// Remove the file extention from the image filename
imagefileName = imagefileName.Replace(".jpg","").Replace(".png","");

// Retrieving the local Resource ID from the name
int id = (int)typeof(Resource.Drawable).GetField(imagefileName).GetValue(null);

// Converting Drawable Resource to Bitmap
var myImage = BitmapFactory.DecodeResource(Forms.Context.Resources, id);

 

There you have it folks ! 😀 Now you may go crazy with it 😛 !

Stay Awesome! 😀

Cheers!

Auto spanning LinearLayout for Xamarin Android

Ever wanted to have a LinearLayout to auto span through the screen, more over take the whole screen width and expand itself with equal spaces in between the elements ? Well I know have. 😉

So here’s another short and sweet code sharing post! 😀

So what happened ?

Well anyhow usually during such above scenarios the first thing that come’s to my mind is the RelativeLayout in Android, so I went ahead and implemented it, whereas I had two buttons in the corner and a textview in the middle, I just needed it to be auto spanned the whole screen width and take equal space in between. I managed to create the design as expected but weirdly enough, the click events of the buttons weren’t working, and literally the I wasn’t able to click on the buttons, as if RelativeLayout was hovering over the buttons.

Oh yes I tried enabling the Clickable property of RelativeLayout as well, even the Focus enable property, but nothing worked!

LinearLayout for the rescue!

So helplessly I forced myself to change to LinearLayout, and lucky enough I managed to get it done after a few hours of playing around lol! 😀 It still doesn’t make any sense why the buttons weren’t clickable inside the RelativeLayout. O_o However I’m glad I figured out a workaround with the LinearLayout.

So anyways if any of you run into such situation, or looking to implement LinearLayout for a similar situation, here  is the code XML code I used for my layout. 😉

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
  <Button
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 1" />
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
  <Button
      android:id="@+id/button2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 2" />
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
  <Button
      android:id="@+id/button3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 3" />
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
  <Button
      android:id="@+id/button4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 4" />
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical" />
</LinearLayout>

 

So basically what I have done is, added empty LinearLayouts in between the buttons and assign an equal weight to the layout property. This will make the layout span across the full screen width, taking equal spaces in between, despite of Landscape mode Portrait mode. You could even assign different spacing in between the buttons, which will get automatically maintained among Landscape and Portrait modes. 🙂

Here’s how it actually looks like…

Screen Shot 2016-02-11 at 4.09.17 PM Screen Shot 2016-02-11 at 4.09.37 PM

 

WOOT! WOOT! 😀 there you go ! 😉 Enjoy!

Stay Awesome fellas!

Setting background drawable “SelectableItemBackground” for Button in Xamarin Android Material Design

Now I know we all love the latest Material Design on Android! Luckily the awesome Xamarin team, made it available in Xamarin.Android as soon as Google released it. (Kudos Xamarin team!)

Watch out !

There was this one time, I wanted to make a Button background color invisible, but we all know as soon as you set the background color/resource you will be loosing the default Material Design properties for the Button, as it will override the default material design properties. So this is what I did, and unfortunately I ended up with a non-material boring button.

buttonView.Background = new ColorDrawable(Xamarin.Forms.Color.Transparent.ToAndroid());

 

Yep, it did give me a Transparent background button, but it had lost it’s Material Design properties. 😦 All it’s “Ripple Effect” click properties were disappeared.

Solution ?

Yep and lucky enough I found the solution by roaming around the “cyberspace” and thanks to my previous native Android dev experience. 😉

In Android material design properties we have this value attribute called “SelectableItemBackground” , which holds the background drawable resource for the default transparent ripple effect click properties. All we need to do is, set this to our Button’s Background resource. 😀

Le Code Snippet!

Yes it’s pretty straightforward in native android, but how about Xamarin Android ? Yep let me show you. 😉

In Xamarin Android we could access the above attribute at, “Android.Resource.Attribute.SelectableItemBackground“, yep lucky enough Xamarin had a great documentation. lol So here goes the implementation.

int[] attrs = new int[] { Android.Resource.Attribute.SelectableItemBackground };
// Retrieving the style attribute
TypedArray typedArray = this.ApplicationContext.ObtainStyledAttributes(attrs);
int backgroundResource = typedArray.GetResourceId(0, 0);

// Setting the button background resource
buttonView.SetBackgroundResource(backgroundResource);
// Clear the array
typedArray.Recycle();

 

Alright, as you can see above (hope you read through my comments in the code snippet), we are retrieving the SelectableItemBackground style and manually setting it to the Button background resource.

Le XML Snippet ?

Oh no I wouldn’t leave that out.. 😉 setting this in XML is pretty much same as native Android.

 android:background="?android:attr/selectableItemBackground"

 

VOILA ! 😀

No go on and play around fellas! 😉

Cheers!

Stay Awesome! 😀

Setting the NavigationBar colors in Xamarin.Android and Xamarin.iOS

WOOT! WOOT! This is regarding my previous post on Setting the NavigationBar colors in Xamarin.Forms!

So I thought it might be handy for some of you to know how to set the NavigationBar colors in Xamarin.Android and Xamarin.iOS! And oh, I’m not going to tell you about the reasons why you would ever want to do this and blah blah as I have mentioned that already in my previous post. lol 😛

When it comes to Xamarin Native level there’s a huge advantage with in-depth customization for any controllers and properties. Therefore some of you might want to dive into the custom renderers when you customize the Navigation Bar and so on. Or may be you are doing a development on native Xamarin.Android app or native Xamarin.iOS app, thereby you may be in need of customizing the NavigationBar (iOS) or the ActivityBar (Android) respectively. However the reasons, let’s get down to business.. 😀

NavigationBar Customization in Xamarin.iOS …. 🙂

Yes in iOS we refer to the NavigationBar just as it is, lol and you could easily customize it by referring to the UINavigationBar.Appearance property.
Here’s some sample customization you could do using these properties, but keep in mind you could constomize this very easily and in-detail according to your preferences, just a matter of a playing around 😉 

// Setting (NavigationBar) Toolbar background color natively
UINavigationBar.Appearance.BarTintColor = Color.FromHex("#ff5300").ToUIColor();
UINavigationBar.Appearance.TintColor = UIColor.White;
UINavigationBar.Appearance.SetTitleTextAttributes(
	new UITextAttributes { TextColor = Color.White.ToUIColor() });

 

ActionBar Customization in Xamarin.Android …. 🙂

Oh Yes! in Android we could refer to the ActionBar via the Context instance or may be if you are inside of an Activity, you could directly static reference it, to access its various Set properties for customization. Here also you could go in-detail according to your preferences, just a matter of a playing around 😉

// Setting ActionBar (Toolbar) background color natively
var actionBar = ((Activity)Context).ActionBar;
actionBar.SetBackgroundDrawable(new ColorDrawable(Xamarin.Forms.Color.FromHex("#ff5300").ToAndroid()));

 

WOOT! WOOT! There you go! 😀

Oh well just another tiny blog post in a boring day I guess.. lol

Cheers!

Stay Awesome! 😀

 

Argghh! Let’s get rid of the ugly Icon at the top NavigationBar in Andriod with Xamarin Forms…

Alright, no offence Android! 😉 You are an awesome platform, but sometimes I do not like the default App Icon you put up at the top left side of the Navigation Bar! 😦

I just implemented my beautiful looking Navigation Bar, but I hate that ugly Icon Android has put up by default! So I’m gonna get rid of it! ARRGHHH! lol 😛

Nexus 4 (Lollipop) Screenshot 1

Yep there you see ? how it’s making my beautiful navigation bar so ugly 😦

Alright, let’s get to work…

Custom Renderer for the rescue ? 😀

Yeah damn right, Custom Render it is!
We are going to Custom render the ContentPage the fish out of it. 😉 Haha

Seriously, we are going to create a custom render for the ContentPage of Xamarin Forms, so that during the runtime we could customize it’s properties the way we need. Keep in mind if you are using a subclassed version of ContentPage for your UI Pages, then I suggest you use that subclassed class here in the Renderer.

[assembly: ExportRenderer(typeof(ContentPage), typeof(ContentPageRenderer))]
namespace AwesomeNavigationBar.Droid.Renderers
{
    public class ContentPageRenderer : PageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
        {
            base.OnElementChanged(e);

            // Removing AppIcon from the ActionBar (Xamarin Forms NavigationBar)
            var actionBar = ((Activity)Context).ActionBar;
            actionBar.SetIcon(new ColorDrawable(Xamarin.Forms.Color.Transparent.ToAndroid()));
        }
    }
}

 

As you can see inside the OnElementChanged event we are retrieving the default ActionBar of Android (Yes in Android they call it the ActionBar instead of NavigationBar in Xamarin Forms) and making the Icon invisible by setting a Transparent drawable object. Simple!

Yep there you go, you only need to add the above custom renderer in your Xamarin.Android project (Don’t be lazy! make sure to edit the namespace according to your project) lol 😉

Save it! Run it! 😀

Nexus 4 (Lollipop) Screenshot 2

WOHOOOO ! Now look at that beauty ! 😉

Alright fellas, ÇøŋfuzëРSøurcëÇødë out ! 😀

Stay Awesome !

Setting the NavigationBar colors in Xamarin.Forms

Have’t you ever got bored of the default colors of the Navigation bar of your applications ? 😛 Well I know I did, so as my boss in the new company I’m working for. lol

Enough chit chat! Lemme show you how to change the background color of the default Navigation bar in our awesome Xamarin Forms framework.

Yes it’s crazy simple nowadays, as Xamarin has allowed us to control that from the PCL level itself. But earlier I recall it was pretty complex where we had to write custom renderers and stuff.

How to… from C# code level ?

Xamarin has introduced the following properties for this job, BarBackgroundColor, and BarTextColor. You could easily set these properties for your NavigationPage instance and woahlah ! You are done.

public App()
{
	MainPage = new NavigationPage(new Page1())
	{
		BarBackgroundColor = Color.FromHex("#ff5300"),
		BarTextColor = Color.White,
	};
}

 

Alright now, hit Run and check it out fellas !

Behold…

Nexus 4 (Lollipop) Screenshot 1  Simulator Screen Shot 4 Feb 2016, 12.28.46 PM

Oh look at that gorgeous NavigationBar… Such an eye-candy view.. lol

Alright looks good… moving on… 😛

How to… from XAML code level ?

What if you wanted to set these properties in XAML level ? 😀

Well to tell you a little story, the project I’m working now is pretty complex and the architecture is super awesome, that we have to dive massively into MVVM and Architectural design stuff… So we usually keep all the UI related stuff in XAML level. 😉 So yeah this is how I originally implemented it, but I did the C# code stuff just to show the separation. End of Storytime ! lol 😛

So here’s how to handle this in XAML…

  <App.Resources>
    <ResourceDictionary>
      
      <!-- Styles -->
      <Style TargetType="NavigationPage">
        <Setter Property="BarBackgroundColor" Value="#ff5300"/>
        <Setter Property="BarTextColor" Value="White"/>
      </Style>
      <!-- Styles -->

	</ResourceDictionary>
  </App.Resources>

 

You simply put those values in your global Style level, so when the app is running it will fetch them from those values and set it to the navigation bar.

TADAAAAA ! 😀

That’s it… Cheers!

Stay Awesome developers !

Few words about the ÇøŋfuzëÐ SøurcëÇødë Blogging Style ! ;)

Yes I am a Developer! A Software Engineer by career!

But truth be told, I’m not the typical type of software-engineer-developer-geek ! 😛

I’m a hyper-active, overjoyed, crazy enthusiastic, energized, optimistic human being! 😉

I often go on Adventures, Hiking, Running, Cycling and Basketball, also includes Socializing and talking to People in Public…

I run a lot ! literally like a mad man, and I’m addicted to it. It makes me feel free, refreshed, de-stressed, energized, hyped up, and allows me to push myself beyond the physical limitations. Hence it keeps reminding me that nothing is impossible as long as I keep on pushing myself without giving up.

I enjoy every single moment of my life, seeing the positive perspective of everything that happens around me. And I never regret any decisions I have ever made. I like making others happy and cheering up people around me is something I enjoy a lot. 😀

Yes! obviously I’m always cheered up! 😛 that’s probably the easiest way to recognize me from any crowd lol! 😉

I do a lot of crazy random stuff! 😀

I truly enjoy helping others, teaching others new stuff, I’m not very good at teaching though, but I enjoy engaging in such activities to the fullest.
So basically whenever I’m blogging the same chemical reactions fires up in my brain which is responsible for the above, thereby almost all the time my blog articles ends up being a hyper active conversation lol! 😛

So you may find my blog articles UNPROFESSIONAL most of the time! but I DO NOT CARE! Hence blogging programming articles is something I do for fun and I enjoy it insanely. 😉 And yes this is probably going to be one of the weirdest tech-blogs you have ever seen given my unprofessional-blogging-style! lol 😉
Well I couldn’t care less as long as I share the knowledge across the articles, in a very friendly, easy to understand manner for even a high school kid could understand.

So you got any complains about the ÇøŋfuzëÐ SøurcëÇødë Blogging Style? Don’t bother complaining! 😀 As ÇøŋfuzëÐ SøurcëÇødë wouldn’t ever care! 😛

Cheers!

Stay Awesome fellas! 😀