Xamarin: Error While adding Spinner/Button in Drawer Layout

Question

Hello Everyone,

Please i want to add Spinner, Text view and Button in Drawer Layout of my Main.axml

i tried putting it in the FrameLayout, but it wouldnt.

i created a Relative Layout and then it jampacks at the header and wont leave even after navigating to a different page.

s

From the screenshot, i have navigated to another page, but the main is still showing

Here is my Main.axml code

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
tools:context=".MainActivity">
"http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="fill_parent"
android:fitsSystemWindows="true">
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
layout="@layout/toolbar" />
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/rl">
android:text="App/Home/Diagnose"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1" />
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="@string/component_prompt" />
android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="@string/component_prompt" />
android:text="Final Analysis"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView3"
android:layout_marginTop="45.0dp" />
android:layout_width="match_parent"
android:layout_height="43.5dp"
android:id="@+id/spinner2" />
android:text="Deep Scan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/checkBox1"
android:layout_marginTop="42.0dp" />
android:text="ANALYSE..."
android:layout_width="192.0dp"
android:layout_height="wrap_content"
android:id="@+id/button1"
android:layout_marginTop="25.5dp" />
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="300dp"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header" />

and here is my Main activity Code

{
[Activity(Label = "AutoDoctor Car OBD", Theme = "@style/Theme.DesignDemo",Icon = "@drawable/icon")]
public class MainActivity : AppCompatActivity
{
DrawerLayout drawerLayout;
NavigationView navigationView;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "Main" layout resource
SetContentView(Resource.Layout.Main);
/*FragmentTransaction transaction = this.FragmentManager.BeginTransaction();
diagnose home = new diagnose();
transaction.Add(Resource.Id.framelayout, home).Commit();*/
Spinner spinner = FindViewById(Resource.Id.spinner);
spinner.ItemSelected += new EventHandler(spinner_ItemSelected);
var adapter = ArrayAdapter.CreateFromResource(
this, Resource.Array.component_array, Android.Resource.Layout.SimpleSpinnerItem);
adapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropDownItem);
spinner.Adapter = adapter;
drawerLayout = FindViewById(Resource.Id.drawer_layout);
// Create ActionBarDrawerToggle button and add it to the toolbar
var toolbar = FindViewById(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.drawer_open, Resource.String.drawer_close);
drawerLayout.SetDrawerListener(drawerToggle);
drawerToggle.SyncState();
navigationView = FindViewById(Resource.Id.nav_view);
setupDrawerContent(navigationView);
var naviview = FindViewById(Resource.Id.nav_view);
naviview.NavigationItemSelected += (sender, e) =>
{
e.MenuItem.SetChecked(true);
FragmentTransaction transaction1 = this.FragmentManager.BeginTransaction();
if (e.MenuItem.ItemId == Resource.Id.home)
{
diagnose dia = new diagnose();
// The fragment will have the ID of Resource.Id.fragment_container.
transaction1.Replace(Resource.Id.framelayout, dia).AddToBackStack(null).Commit();
}
else if (e.MenuItem.ItemId == Resource.Id.about)
{
about abt = new about();
// The fragment will have the ID of Resource.Id.fragment_container.
transaction1.Replace(Resource.Id.framelayout, abt).AddToBackStack(null).Commit(); ;
}
else if (e.MenuItem.ItemId == Resource.Id.settings)
{
settings video = new settings();
// The fragment will have the ID of Resource.Id.fragment_container.
transaction1.Replace(Resource.Id.framelayout, video).AddToBackStack(null).Commit(); ;
}
else if (e.MenuItem.ItemId == Resource.Id.dev)
{
dev devo = new dev();
// The fragment will have the ID of Resource.Id.fragment_container.
transaction1.Replace(Resource.Id.framelayout, devo).AddToBackStack(null).Commit(); ;
}
//...
drawerLayout.CloseDrawers();
};
}
public void spinner_ItemSelected(object sender, AdapterView.ItemSelectedEventArgs e)
{
Spinner spinner = (Spinner)sender;
string toast = string.Format("The Selected Component is {0}", spinner.GetItemAtPosition(e.Position));
Toast.MakeText(this, toast, ToastLength.Long).Show();
}
void setupDrawerContent(NavigationView navigationView)
{
navigationView.NavigationItemSelected += (sender, e) => {
e.MenuItem.SetChecked(true);
drawerLayout.CloseDrawers();
};
}
public override bool OnCreateOptionsMenu(IMenu menu)
{
navigationView.InflateMenu(Resource.Menu.nav_menu);
return true;
}
}
}

Someone please Help me out

Amit Gupta · Answer

Asking question is a good practice, if you are asking that means you are learning something and you are curious about the thing. You have to understand the code (what is it doing and for what purpose it has been implemented). Coming to your question: The tutorial was a sample and they are working on an activity not a fragment. You have to do the following steps to understand it better. In Activity, you have to initialize the events on OnCreate(...) function whereas in Fragment you have to do this OnCreateView function. 1. Don't edit the main layout. 2. Goto Fragment1.axml and add your control (spinner) 3. Goto Fragment1.cs file and edit the OnCreateView function like this public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { var ignored = base .OnCreateView(inflater, container, savedInstanceState); var view= inflater.Inflate(Resource.Layout.fragment1, null ); Spinner spinner = view.FindViewById (Resource.Id.spinner); spinner.ItemSelected += new EventHandler (spinner_ItemSelected); var adapter = ArrayAdapter.CreateFromResource( view.Context, Resource.Array.planets_array, Android.Resource.Layout.SimpleSpinnerItem); adapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropDownItem); spinner.Adapter = adapter; return view; } 4. That's it, Run your code and all done !! Do let me know, if you require any clarification about it. Good Luck

Amit Gupta · Answer

Your upload file was found corrupted. However, I had made a sample app that have navigation drawer. https://drive.google.com/open?id=1OvUcd06v-ZSGcUihnJ8NrzvInkUWyom8

Qing Ryder · Answer

I tried attaching the zipped file here but there was a problem with the post Javascript. the zipped file is available on google drive via https://drive.google.com/open?id=1LNBrXri8BqmUmVRgaB7Dj2SVfjiCmrZF i will be very grateful if you can help me out. Thank you

Amit Gupta · Answer

i added the padding top and they all came down below the top bar, I haven't found any paddingTop property in the layout file. It is too difficult to analyze the error deeply. Can you zip your project and upload it, so that we can find the root of the issue. Moreover, I had also suggested to download the template for the same that will help you a lot.

Qing Ryder · Answer

@Amit Please I am getting all this error as a result of adding spinner to the main.axml is there a way i can add it to another page? like i tried creating a seperate page for it but i got a NullReference exception because it looks like the compiler was looking for spinner in the main. and that was the example i saw on msdn. if i set the main content view to that page, i get an error (the compiler wont detect the Drawer layout of the main, in the Main activity) Am so Confused, Help me

Qing Ryder · Answer

i added the padding top and they all came down below the top bar, Yet they are still jam-packed together

Amit Gupta · Answer

Goto Tools -> Extension & updates -> search for Xamarin.Android Template Pack. This would gives you the prebuild templates for NavigationDrawer and many more template, there you can see where you are doing wrong or edit that template and move ahead to your work.

Qing Ryder · Answer

@Amit Thanks Alot. Dont know how to thank you better. I wish i am your student. you seem vibrant in Xamarin.Android and am just beginning my journey in it

Qing Ryder · Answer

I Know i maybe asking too much, please but maybe you try it yourself to see where i am getting it all wrong. Thank you

Qing Ryder · Answer

Yea, that is what i did on the spinner tutorial they said Now, the above, if i add it to fragment1.cs it won't work are you getting my point?

Amit Gupta · Answer

I reiterate my words, don't edit the main.axml file, SetContentView (Resource.Layout.Main); You are adding spinner control to the main layout. Goto Resource Folder -> Layout -> Fragement1, open Fragement1.axml file and add the spinner to that layout.

Qing Ryder · Answer

Yea exatly what i did but protected override void OnCreate (Bundle bundle) { base .OnCreate (bundle); // Set our view from the "Main" layout resource SetContentView (Resource.Layout.Main); Spinner spinner = FindViewById (Resource.Id.spinner); spinner.ItemSelected += new EventHandler (spinner_ItemSelected); var adapter = ArrayAdapter.CreateFromResource ( this , Resource.Array.planets_array, Android.Resource.Layout.SimpleSpinnerItem); adapter.SetDropDownViewResource (Android.Resource.Layout.SimpleSpinnerDropDownItem); spinner.Adapter = adapter; } I even removed the public overide and left only Spinner spinner = FindViewById (Resource.Id.spinner); spinner.ItemSelected += new EventHandler (spinner_ItemSelected); var adapter = ArrayAdapter.CreateFromResource ( this , Resource.Array.planets_array, Android.Resource.Layout.SimpleSpinnerItem); adapter.SetDropDownViewResource (Android.Resource.Layout.SimpleSpinnerDropDownItem); spinner.Adapter = adapter; } and set the content view to fragment1 it wouldnt work.

Amit Gupta · Answer

Don't edit the main layout, it is the base layout. You can edit the fragement1 layout and add your control as you wish.

Qing Ryder · Answer

@Amit Thank you For your time/Lessons, i am indeed very grateful. going by your sample app, how can i add the textview and spinner in the main. i tried putting on fragment1 but wouldnt work. using https://docs.microsoft.com/en-us/xamarin/android/user-interface/controls/spinner tutorial on spinner

Qing Ryder · Answer

Yes they all came down but clustering together with no space... Let me zip it

Amit Gupta · Answer

Haven't? you tried adding paddingTop to the layout?