Download Code

Xamarin FrameLayout Example Android

In this tutorial you will learn about Xamarin FrameLayout Example Android and also you will use frame layout to design a sliding drawer with some UI components like Button,Image View.

Let’s talk about Frames Layout.

FrameLayout

  • Frame Layout is used to hold single child view.
  • Frame Layout used to display single view or overlapping views.For example displaying a text over the image view.
  • Every UI component within this Layout just like stack structure recent one on top.

Using this Layout you will design a sliding drawer in this tutorial.

So let’s start go ahead and create android application project.File > New > Solution > Android App named(XamarinFrameLayout).

First i’ll demonstrate basic usage of FrameLayout.Go to your Main.axml Designer Or Source view.Use Frame Layout as parent element and then within that Frame Layout put some UI components.Then your layout will look like this.

xamarin framelayout,xamarin framelayout example,xamarin framelayout example android,framelayout example android

as you can see in above image that one button is behind the upper button which mean UI components or views are overlapping.

Ok Let’s design sliding drawer.Now go ahead in Designer Mode and drag and drop sliding drawer from Composite.It will contain a Linear Layout and button.Then your layout will look like this.

xamarin framelayout,xamarin framelayout example,xamarin framelayout example android,framelayout example android

Now put some UI components within the Linear Layout of sliding drawer.XML and output will look like this.

xamarin framelayout,xamarin framelayout example,xamarin framelayout example android,framelayout example android

After that you will play with your MainActivity.cs class ? .In that activity first implement two interface IOnDrawOpen and Close listener.Then create sliding drawer variable,refer it’s xml id and apply OnDrawerOpen and Close methods.Then your MainActivity will look this.
MainActivity.cs

using Android.App;
using Android.Widget;
using Android.OS;
using System;


namespace XamarinFramelayout
{
	[Activity(Label = "XamarinFramelayout", MainLauncher = true, Icon = "@mipmap/icon")]

#pragma warning disable CS0618 // Type or member is obsolete
	public class MainActivity : Activity,SlidingDrawer.IOnDrawerOpenListener,SlidingDrawer.IOnDrawerCloseListener
#pragma warning restore CS0618 // Type or member is obsolete
	{
#pragma warning disable CS0618 // Type or member is obsolete
		SlidingDrawer sd;  // sliding drawer variable   
#pragma warning restore CS0618 // Type or member is obsolete
		public void OnDrawerClosed()
		{
			Toast.MakeText(this, "Drawer Closed", ToastLength.Short).Show();
		}

		public void OnDrawerOpened()
		{
			Toast.MakeText(this, "Drawer Opened", ToastLength.Short).Show();
		}

		protected override void OnCreate(Bundle savedInstanceState)
		{
			base.OnCreate(savedInstanceState);

			// Set our view from the "main" layout resource
			SetContentView(Resource.Layout.Main);

#pragma warning disable CS0618 // Type or member is obsolete
			sd = FindViewById< SlidingDrawer >(Resource.Id.slidingDrawer1);
#pragma warning restore CS0618 // Type or member is obsolete
			sd.SetOnDrawerOpenListener(this);
			sd.SetOnDrawerCloseListener(this);

		}
	}
}

Now run your Xamarin FrameLayout Example android project.

xamarin framelayout,xamarin framelayout example,xamarin framelayout example android,framelayout example android

As i told you at the start that Frame Layout hold views just like stack recent is always on top.Remember this point when you are developing something using Frame Layout.Now using this axml layout when you click on handle button.Drawer will show overlapped to any UI component within the separated Linear Layout.

I hope you guys get the idea of Frame Layout and how to use Frame Layout with UI components.

That’s it for Xamarin FrameLayout Example Android tutorial.

Thanks.