webview overlaps appbar in Xamarin Android app - webview

Question

i am using xamarin android app template with drawerlayout.i am using webview in app_bar_main.axml. when the activity is launched .it overlaps the appbar and does not show toolbar.my app_bar_main.axml is as follows: i want to show webview but below appbar.the webview is below toolbar but contents of toolbar are hidden.i want contents of toolbar so that i can navigate through toolbar in appbar .app_bar_main.axml .
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ProgressBar
android:id="#+id/progressBar"
android:layout_below="#id/toolbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_below="#id/progressBar"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<WebView
android:id="#+id/StoreView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
the MainActivity.cs code is here.
the app_bar_main.axml is in activity_main.axml as produced by drawerlayout template.
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.activity_main);
Android.Support.V7.Widget.Toolbar toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
FloatingActionButton fab = FindViewById<FloatingActionButton>(Resource.Id.fab);
fab.Click += FabOnClick;
DrawerLayout drawer = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, Resource.String.navigation_drawer_open, Resource.String.navigation_drawer_close);
drawer.AddDrawerListener(toggle);
toggle.SyncState();
NavigationView navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
navigationView.SetNavigationItemSelectedListener(this);
// start store activity
if (IsOnline() == true)
{
message = "items";
var intent = new Intent(this, typeof(StoreActivity));
intent.PutExtra("Data", "message");
StartActivity(intent);
}
}
```

Answer 1

Here is a simple demo which achieve your function.The main code is as follows:
The activity_main.axml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#33B86C"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_width="match_parent">
<FrameLayout
android:background="#android:color/holo_purple"
android:id="#+id/content_frame"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="200dp"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/menu" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
MainActivity.cs
public class MainActivity : AppCompatActivity
{
DrawerLayout drawer;
NavigationView navigationView;
private string mDrawerTitle;
private string[] mContentTitles;
Toolbar toolbar;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
mDrawerTitle = this.Title;
mContentTitles= this.Resources.GetStringArray(Resource.Array.contents_array);
toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetDisplayShowTitleEnabled(false);
SupportActionBar.SetHomeButtonEnabled(true);
SupportActionBar.SetHomeAsUpIndicator(Resource.Drawable.ic_menu);
// Get our button from the layout resource,
// and attach an event to it
drawer = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
if (navigationView != null)
setupDrawerContent(navigationView);
ActionBarDrawerToggle toggle = new MyActionBarDrawerToggle(this, drawer, toolbar, Resource.String.drawer_open, Resource.String.drawer_close);
drawer.AddDrawerListener(toggle);
toggle.SyncState();
if (savedInstanceState == null) //first launch
{
toolbar.Title = mContentTitles[0];
var fragment = WebviewFragment.NewInstance(0);
var fragmentManager = this.FragmentManager;
var ft = fragmentManager.BeginTransaction();
ft.Replace(Resource.Id.content_frame, fragment);
ft.Commit();
}
}
void setupDrawerContent(NavigationView navigationView)
{
navigationView.NavigationItemSelected += (sender, e) => {
int ItemId = e.MenuItem.ItemId;
e.MenuItem.SetChecked(true);
int index = 0;
if (ItemId == Resource.Id.nav_home) {
index = 0;
} else if (ItemId == Resource.Id.nav_messages) {
index = 1;
}
else if (ItemId == Resource.Id.nav_about)
{
index = 2;
}
// update the main content by replacing fragments
var fragment = WebviewFragment.NewInstance(index);
var fragmentManager = this.FragmentManager;
var ft = fragmentManager.BeginTransaction();
ft.Replace(Resource.Id.content_frame, fragment);
ft.Commit();
// update selected item title, then close the drawer
mDrawerTitle = mContentTitles[index];
drawer.CloseDrawers();
};
}
internal class WebviewFragment : Fragment
{
public const string ARG_NUMBER = "planet_number";
public WebviewFragment()
{
// Empty constructor required for fragment subclasses
}
public static Fragment NewInstance(int position)
{
Fragment fragment = new WebviewFragment();
Bundle args = new Bundle();
args.PutInt(WebviewFragment.ARG_NUMBER, position);
fragment.Arguments = args;
return fragment;
}
public override View OnCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
View rootView = inflater.Inflate(Resource.Layout.fragment_content2, container, false);
var i = this.Arguments.GetInt(ARG_NUMBER);
var url = this.Resources.GetStringArray(Resource.Array.weburls_array)[i];
var title = this.Resources.GetStringArray(Resource.Array.contents_array)[i];
var web_view = rootView.FindViewById<WebView>(Resource.Id.webview);
web_view.Settings.JavaScriptEnabled = true;
web_view.SetWebViewClient(new HelloWebViewClient());
web_view.LoadUrl(url);
this.Activity.Title = title;
return rootView;
}
}
internal class MyActionBarDrawerToggle : ActionBarDrawerToggle
{
MainActivity owner;
public MyActionBarDrawerToggle(MainActivity activity, DrawerLayout layout, Toolbar toolbar, int openRes, int closeRes)
: base(activity, layout, toolbar, openRes, closeRes)
{
owner = activity;
}
public override void OnDrawerClosed(View drawerView)
{
owner.toolbar.Title = owner.Title;
owner.InvalidateOptionsMenu();
}
public override void OnDrawerOpened(View drawerView)
{
owner.toolbar.Title = owner.mDrawerTitle;
owner.InvalidateOptionsMenu();
}
}
}
strings.xml
<resources>
<string name="app_name">DrawLayoutApp</string>
<string name="action_settings">Settings</string>
<string name="drawer_open">Open navigation drawer</string>
<string name="drawer_close">Close navigation drawer</string>
<string-array name="contents_array">
<item>Home</item>
<item>Messages</item>
<item>About</item>
</string-array>
<string-array name="weburls_array">
<item>https://www.google.com/</item>
<item>https://msdn.itellyou.cn/</item>
<item>https://www.baidu.com/</item>
</string-array>
</resources>
menu.xml
<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:title="Home" />
<item
android:id="#+id/nav_messages"
android:title="Messages" />
<item
android:id="#+id/nav_about"
android:title="About" />
</group>
</menu>
The effect is as follows: