I am having my bottom navigation view inside a fragment. Below is the code
<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"
tools:context=".fragments.investors.InvestmentParentFragment">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemIconTint="#drawable/nav_selector"
app:itemTextColor="#drawable/nav_selector"
app:menu="#menu/investments_bottom_nav_menu"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
app:itemRippleColor="#color/secondaryLightColor"
android:background="#drawable/bottom_nav_background"
/>
</RelativeLayout>
When i click on an item in the bottom navigation view it navigates to a fragment. The problem am having is that when i navigate to a new fragment it opens the new fragment and the bottom navigation view disappears i would like it to work like the way where the bottom navigation view is in MainActivity and when i navigate to a new fragment it does not disappear it stays there and can operate like a tab layout
Here is what i have tried so in the fragment having the bottom navigation view but its not working. Inside onViewCreated method
Navcontroller navController = Navigation.findNavController(view);
bnvInvestments = view.findViewById(R.id.bnv_investments);
NavigationUI.setupWithNavController(bnvInvestments, navController);
Related
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.
I have a gridview in my app and i'm able to increase its height dynamically. But my issue is that every time i increase the height, the scrollbar scrolls to the center of the page. What could cause this issue ? Here is my code below :
Axml :
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#e1effa">
<GridView
android:id="#+id/gvPhones"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:verticalSpacing="5dp"
android:drawSelectorOnTop="true"
android:stretchMode="columnWidth" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Cs :
_mySimpleItemLoader = new LoadRecords();
_mySimpleItemLoader.LoadMoreItems();
gvPhone = FindViewById<GridView>(Resource.Id.gvPhones);
_gridviewAdapter = new PhonesAdapter(this, _mySimpleItemLoader, this);
gvPhone.Adapter = _gridviewAdapter;
gvPhone.LayoutParameters.Height = 777 * gvPhone.Count;
But my issue is that every time i increase the height, the scrollbar scrolls to the center of the page.
When you open an Activity, some control needs to take focus. But in your .axml layout there's no designated control to take focus, the system chooses the first eligible control that wants focus.
When you set the android:focusableInTouchMode="true" property in your LinearLayout, your LinearLayout will be focused on start and your NestedScrollView won't scroll to the center of the page.
I'm trying to use WearableActionDrawer in my app. Previously I was using 'com.google.android.support:wearable:2.0.0-alpha1' and my layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.drawer.WearableDrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rectLayout="#layout/rect_activity_main"
app:roundLayout="#layout/round_activity_main"
tools:context="com.example.grant.wearableclimbtracker.MainActivity"
tools:deviceIds="wear">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id = "#+id/content_frame">
<android.support.wearable.view.GridViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
<android.support.wearable.view.drawer.WearableNavigationDrawer
android:id = "#+id/top_navigation_drawer"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/dark_grey"/>
<android.support.wearable.view.drawer.WearableActionDrawer
android:id="#+id/bottom_action_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grey" />
</android.support.wearable.view.drawer.WearableDrawerLayout>
After I switched to 'com.google.android.support:wearable:2.0.0' the behavior changed. The action drawer used to stay out of view until I swiped up to reveal the action menu, but now there is a peek view of the drawer that doesn't go away unless I open the menu and select something. Is this the intended behavior? It takes up a lot of real-estate:
Any advice would be much appreciated.
It was as I suspected, when NestedScrollingChild height matched the parentview, the action drawer peeks. The only way I could get it to hide was to increase the NestedScrollingChild view by 1dp:
// get the screen width
DisplayMetrics metrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
// set height of framelayout to be slightly larger than view
mSessionLayout = rootView.findViewById(R.id.sessionLayout);
mSessionLayout.setMinimumHeight(metrics.heightPixels+1);
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.
I Want to Create a List View with a Custom layout which will contain A image and text
But all the tutorials i find all extend List Activity but i cant extend List Activity because i need to add buttons and other things to the layout.
I need to use the ListView using a custom item layout
any ideas on how to do it?
You are not bound to use ListActivity in order to have a ListView in your layout. All the samples using ListActivity are there because people are lazy ;)
So just use a regular Activity and then you simply have to add the ListView to the layout you are setting as content view. This could look something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0"
android:layout_weight="1" />
<Button
android:id="#+id/somethingButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Do something" />
<Button
android:id="#+id/elseButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Do something else" />
</LinearLayout>
Then in like any other Activity in your OnCreate method you do:
SetContentView(Resource.Layout.myLayout); // myLayout.axml
var listView = FindViewById<ListView>(Resource.Id.listView);
listView.Adapter = new MyAdapter(context, itemsSource);
var somethingButton = FindViewById<Button>(Resource.Id.somethingButton);
var elseButton = FindViewById<Button>(Resource.Id.elseButton);
... more code ...
ListView is just a layout just like any other, so there is nothing magic about it. MyAdapter in this sample is ofcourse something you implement, which takes your data and presents it in the desired image and text layout.
For more information about ListView and Adapter please refer to the excellent documentation which Xamarin provides.