I am currently using the master-detail page in xamarin.forms using MVVMlight and it renders based on the default behavior of os it renders perfectly what I wanted but in android master page starts below the navigation bar. I wanted master page to cover full height of screen just like ios do so is there any way or solution for it without custom renderer or is it necessary to write custom renderer for this
Use FormsAppCompatActivity instead of FormsApplicationActivity.
define your own toolbar.axml
toolbar.axml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
Set your own ToolbarResource
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
ToolbarResource = Resource.Layout.toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
}
Yes you can. Check these links. They all use the MasterDetail page to create a Navigation Drawer. Only the Detail page becomes the main page view and the Master page becomes the sliding Menu. It is actually fairly simple. There are a couple of other good example out there also. However I think you can get the job done from the 3 links I listed. If not try a Search like How can I create a Navigation Drawer in Xamarin Forms.
http://www.meritsolutions.com/mobile-development/implementing-navigation-drawer-in-xamarinforms/
https://www.syntaxismyui.com/xamarin-forms-masterdetail-page-navigation-recipe/
http://blog.falafel.com/xamarin-creating-a-sliding-tray/
Related
I need create a background and then on top of that the text boxes and images as Splash Screen. What my steps?
You could use two activities. One activity is used to show the splash screen and the other used to show the mian activity.
splashscreen.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/star"/>
<TextView
android:text="Splash Screen Star"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
SplashScreen_Activity:
public class SplashScreen_Activity : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.splashscreen);
// Create your application here
}
protected override void OnResume()
{
base.OnResume();
Task startupWork = new Task(() => { SimulateStartup(); });
startupWork.Start();
}
// Simulates background work that happens behind the splash screen
async void SimulateStartup()
{
await Task.Delay(3000); // Simulate a bit of startup work.
StartActivity(new Intent(Application.Context, typeof(Activity5)));
}
}
Activity5 is the main activity i want to show. You could load the layout in Activity5.
I really don't understand why you would be advising a user to use such an outdated technique of suggesting the use of SplashScreen Activity, for a splash screen when obviously there are far better techniques of achieving a SplashScreen. You are offering a solution that was even frowned upon back in 2016-16, let alone 2022.
Summary
I need to have 3 Tabs right below the App's Toolbar, preferably without a line separating the Tabs and the Toolbar. But they are shown in front of the bar, hiding it nearly completely.
Context
I´m working on an Android App, with a DrawerLayout/NavigationView opening up from the side, where you can navigate between pages, with one of them containing a few Tabs at the top, right below the Toolbar.
I've tried putting the TabLayout into the page, but the tabs always end up behind or in front of the Toolbar.
Putting the TabLayout into the AppBarLayout where the Toolbar is didn't seem to work as well, the tabs were correctly shown below the Toolbar, but that Tab's content was shown inside the Toolbar as well.
Toolbar and FragmentContainer in main.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/main_fragment_container"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
Sample TabLayout in page1.xml
<androidx.constraintlayout.widget.ConstraintLayout
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">
<com.google.android.material.tabs.TabLayout
android:id="#+id/home_content_tab_layout"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:showIn="#layout/app_bar_main">
<com.google.android.material.tabs.TabItem
android:text="News"/>
<com.google.android.material.tabs.TabItem
android:text="NoNews"/>
<com.google.android.material.tabs.TabItem
android:text="Dreams"/>
</com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout >
Kept looking around for a solution to my problem and stumbled upon this answer to a similar question.
I moved the Toolbar, Tablayout ( its visibility set to "gone") and the Fragment Container into its own xml called app_bar_main.
Then I included it in my Main Layout:
<include
layout="#layout/app_bar_main"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
The Fragment which is supposed to show the Tabs implements the following overrides:
public override void OnViewCreated(View view, Bundle savedInstanceState)
{
viewPager = view.FindViewById<ViewPager>(Resource.Id.home_content_pager);
viewPager.Adapter = new HomeAdapter(ChildFragmentManager);
tabLayout = Activity.FindViewById<TabLayout>(Resource.Id.tablayout);
tabLayout.Visibility = ViewStates.Visible;
tabLayout.SetupWithViewPager(viewPager);
base.OnViewCreated(view, savedInstanceState);
}
public override void OnDestroyView()
{
tabLayout.Visibility = ViewStates.Gone;
base.OnDestroyView();
}
The OnDestroyView override sets the TabLayout's Visibility to Gone, so all the other Fragments are not displaying the Tabs.
This way, the Tablayout exists across all of the Fragments, and can be displayed and filled with the chosen Tabs and be hidden when not needed.
I'm using com.google.android.material and the AndroidX NuGet Packages and am fairly new to Xamarin.Android, but I hope this helps someone with a similar problem.
Hello and good day developers, I am here again to ask you some
question-related to my new build project in visual studio 2017 xamarin
the android app.used blank app..the issue is I can't see my layout design,
also when I drag and drop a button, textbox etc, but when I click the
centre of the white background there is a rectangular blueprint show
or blue border...
Note: this is a built-in code.
// activity_main.axml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
</RelativeLayout>
// MainActivity.cs
using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Runtime;
using Android.Widget;
namespace MhylesOrdering
{
[Activity(Label = "#string/app_name", Theme = "#style/AppTheme", MainLauncher = true)]
public class MainActivity : AppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
}
}
}
// ScreeenShot
Now I added new layout which is the layout1.axml but the issue is
still there
as pointed out in the google guidelines: https://www.google.com/design/spec-wear/components/action-drawer.html#action-drawer-usage
at 'Single Action', an ActionDrawer should not be expandable.
My question is, how to achieve that behaviour?
I've tried an WearableActionDrawer and WearableDrawerView..
I've also tried the method lockDrawerClosed() but the drawer still opens on click.
Thanks for your help! :)
Edit:
Ok, I found the solution to stop the drawer from opening. I'm using the WearableActionDrawer now and calling lockDrawerClosed(). But now I'm not sure how to change the peek_view properly.
I made a custom view - LinearLayout - which is containing an ImageView. I'm using this view for mWearableActiondrawer.setPeekView(myView). But the problem is, that the view will not be shown properly. It just shows me an empty ActionDrawer at the bottom.
But the clicklistener is working..
Here is my code:
// Bottom Action Drawer
mWearableActionDrawer = (WearableActionDrawer) findViewById(R.id.bottom_action_drawer);
mWearableActionDrawer.lockDrawerClosed();
LayoutInflater layoutInflater =
(LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE);
LinearLayout view =
(LinearLayout) layoutInflater.inflate(R.layout.action_drawer_peek_view, null);
mWearableActionDrawer.setPeekContent(view);
view.setOnClickListener(new View.OnClickListener() {
#Override public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_SHORT).show();
}
});
Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_drawer_peek_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/wearable_primary"
android:orientation="vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:src="#drawable/fill_1_copy"
/>
</LinearLayout>
Any thoughts of what I'm doing wrong here? Thanks!
I don't see any error as compared to this sample code. It stated that if you only have a single action for your Action Drawer, you can use a (custom) View to peek on top of the content by calling mWearableActionDrawer.setPeekContent(View). Just make sure you set a click listener to handle user clicking on your View.
You may also try using mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);. Check again your implementation based on this documentation which shows how to initialize the contents of your drawers.
How do i make a page slide into the Content section when i choose the menu options ?
Currently when i select a menu option it opens a brand new page on top of my main page(page on the right).
I want it to work like html IFrame. So i want the page to load without refreshing the Menu toolbar on the right page - and of course the menu must disappear when the new page slide in.
Here is the code i use to call my another page from the menu option :
C#
[Activity(Label = "FlyInMenu", MainLauncher = true, Theme = "#android:style/Theme.Holo.Light.NoActionBar")]
public class Activity1 : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
//for calling the menu opiton
var menu = FindViewById<FlyOutContainer>(Resource.Id.FlyOutContainer);
var menuButton = FindViewById(Resource.Id.MenuButton);
menuButton.Click += (sender, e) =>
{
menu.AnimatedOpened = !menu.AnimatedOpened;
};
//redirect
var myProfileOption = FindViewById(Resource.Id.linearLayout11);
myProfileOption.Click += delegate {
var intent = new Intent(this, typeof(MyProfileActivity));
StartActivity(intent);
};
}
}
AXML
<LinearLayout
android:orientation="horizontal"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout1"
android:layout_margin="8dp"
android:duplicateParentState="true">
<ImageView
android:src="#drawable/user_icon"
android:layout_width="29.0dp"
android:layout_height="44.0dp"
android:id="#+id/imageView1"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp" />
<TextView
android:text="Option1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView2"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
android:textColor="#878787"
android:textSize="18dp" />
</LinearLayout>
Another question is that how do i implement a loading page between the calls ? I.e when i click on a menu option
i would like to see a loading page an then the destination page.
You are looking for a NavigationView and DrawerLayout which is provided by the Android Design Support Library.
Xamarin provides bindings for this library. They also have a example on how to use this NavigationView (see section "Effective Navigation in Android")
I found the solution here : http://www.appliedcodelog.com/2016/01/navigation-drawer-using-material-design.html
This tutorial switch pages smoothly, without flickering or affecting the toolbar.