I started to develop a single page web app with angularjs and now I'm defining the navigation. So, I end up using 2 levels of navigation:
1st level: Main navigation using ng-view.
2nd level: SubView navigation with the top and bottom bars using ng-include.
This is our iphone scenario:
The iphone scenario seems ok for me because we control all navigation with our buttons.
But, now lets think in android scenario where the user can use the history back button(physical button) to navigate back. How can we support it if we use ng-include for the subnavigation?
Thanks in advance
You could add a parameter to your URL to make it work with Android history.
#/main?page=1
#/main?page=2
Then use that to control the state of your app, and then android back button will work.
You can set url parameters with $location.search:
$location.search('page', 4);
$location.search docs: http://docs.angularjs.org/api/ng.$location#search
And one more thing: You'll want to add reloadOnSearch: false option to your $routeProvider.when() declaration for your view. By default, the whole view reloads when you change a query parameter with $location.search(). Setting that to false will make it not reload, which is what you want in this case:
$routeProvider.when('/main', { reloadOnSearch: false });
reloadOnSearch docs: http://docs.angularjs.org/api/ng.$routeProvider#when
Related
Designer here. I have a question about reverse navigation in Android OS.
My question is, in the scenario here
link to the image
The app's home page has a direct access to a certain content (level 3) within a module (level 2).
The user tap on that content from the homepage. In this case, how should the UP navigation behaves? (The two red lines)
Should it bring the user UP to the level 2 Module B page? (Which is one level up based on the app hierarchy)
OR
Should it bring the user back to homepage? (Which is the last place they were at)
========
From my understanding (and years of using Android phones), the UP navigation (from Top app bar) is always navigate the user one level up within the app hierarchy. the BACK navigation (system back button/gesture) is navigate chronologically back to where the user were. (In general)
(Ref: https://m2.material.io/design/navigation/understanding-navigation.html#reverse-navigation)
But based on this page: https://developer.android.com/guide/navigation/navigation-principles#up_and_back_are_identical_within_your_apps_task
"Within your app's task, the Up and Back buttons behave identically." which means that the UP button should direct the user back to the homepage, not level 2. (? I'm very confused... )
Is this a relatively new change for Android dev?
Which Red line is the correct behavior? Thank you :)
I checked two guidelines from Google,and they seem contradict with each other
https://m2.material.io/design/navigation/understanding-navigation.html#reverse-navigation
and
https://developer.android.com/guide/navigation/navigation-principles#up_and_back_are_identical_within_your_apps_task
The app I am developing attempts to adopt, as much as possible, the most native experience for Android & iOS users.
To do so, the app runs a CupertinoApp and a MaterialApp.
On iOS, I use the CupertinoScaffold showing a CupertinoTabBar with BottomNavigationBarItems. It performs very well as expected:
pages are created only once, the first time I click on a tab;
pages are restored when returning to a previously displayed tab: in one of my tab, there is a list and its scroll position is always maintained, persisted.
on Android, the story is different: I am using the Drawer widget.
When I click on an entry, I call Navigator#push to show the associated page. However, this will keep adding new instances of each entry's page in the stack.
I don't seem to be able to return to an existing page. At least, not how I can do it with iOS.
Looking at the Navigator I see functions that seem to achieve what I am looking for:
popUntil => will show my existing screen, but at the expanses of all the other ones that will therefore make a sacrifice for the sake of just one page. So much ado for nothing...
pushReplacement => will show a new instance of the target page and destroy the current one. Not desirable.
What am I missing ? How can I achieve that the CupertinoTabBar seems to be able to do?
Well, I solved my issue by taking another direction.
Simply put I don't think there is a way, with the Navigator to achieve what I want.
The solution I find out was: Keep state of widgets with Bottom Navigation Bar in Flutter
This guide suggests to use a IndexedStack that displays only one child at the time while keeping its state.
So this is how I managed to make it work:
Create your MaterialApp
Set its home to be a custom stateful widget called MaterialHomePage
This MaterialHomePage builds a Scaffold:
with an AppBar and its title (the title of the active page);
with a drawer and its arguments (more on that later)
and the body is that so-called wonderful IndexedStack:
set its children to be the list of pages / widgets, the same pages available in the drawer
set index to be the property _selectedPageIndex of your MaterialHomePage
and with a function that will be triggered when the user chooses a page to navigate to, in which case the usual call to setState occurs inside of which you may update the _selectedPageIndex property as well as _selectedPageIndexproperty`.
The Drawer:
takes two parameters:
the current active page index (defaults to 0 at app launch)
a Function with the target page title & index
must list as many entries (usually ListTile) as pages you have declared in the IndexedStack displayed in MaterialHomePage.
upon clic on the entry, it calls the aforementioned function and passes the index of the clicked entry as well as the associated page title.
At the end, what happens:
The user opens the drawer.
The user chooses a new destination (let's say: entry #3).
MaterialHomePage gets notified (via callback) of the user choice which triggers a setStage that will both:
update the current page thanks to IndexedStack with index = 3
and update its AppBar's title
and voilà there you go: each page gets retained, no loss of state and a smooth navigation.
NB: if the user uses the Android's back button feature, at this point it will close the app since the Navigator stack is empty. Maybe there is a way to listen for such an event if you desire to default to the first entry / page (displayed at launch) if the user was in a another page.
NB2: I also wonder if there is a way to animate page transitions.
PS: Let me know if the answers is a fine solution in which case I'll validate it. Or if you find a proper way to achieve it.
I have an activity with a left pane and I need to change input fields when a different item is selected from the left pane.
I tried by adding a new activity but when the new activity show up the left pane disappears and the only way to get it back is by hitting the back button and I don´t want that; the left pane must hide but must remain to select a new activity and let the user jump from one activity to any other that he choose.
How I cant get that?
I read also about something called fragments but since I'm new on this it looks a bit more complex.
I would review the documentation on Navigation, particularly on using a NavigationDrawer.
Hope that helps!
Refer to below Google Navigation Drawer Sample where you could find the correct way of implementing it.
https://github.com/googlesamples/android-NavigationDrawer
In addition I would recommend exploring bottom navigation, which is like the new navigation trends user enjoys.
Here is a code lab for it:
https://codelabs.developers.google.com/codelabs/android-navigation/#0
To choose which component to use for your app follow this material design guideline: https://material.io/design/navigation/understanding-navigation.html#lateral-navigation
Tip: To Speed up your development you can directly add Navigation Drawer Activity that will help you save a lot of time by adding the base code. Just add new Navigation Drawer activity by right clicking the package.
Hmm. Yes using fragments is the best solution. But you can also play around with hiding and showing views.
I often put user registration on one xml file with scroll view.
I have learned when a user sees too many fields they opt out of the app so I am planning to upgrade the layout to look like the one for gmail when you sign up on android app. It appears to be using tabbed view but not tabs available and user navigates to the next view by clicking next (refer to attached images).
First page
second page
MY QUESTION
My question is how do I create this views, do I need many xml layout files or put all stuff on one file and use visibility as in once it is filled and user presses next hide the inputs and reveal the next inputs. Note: Gmail appears to be scrolling to another page the way it would appear when using tabs.
You can use one activity to host multiple fragments. The new Android Studio update has Navigation Editor which you can use to achieve similar results.
it is totally up to you how you want to design this but the best thing is you use Fragment and viewpager instead of using two separate layouts.
See Here how to use fragment with viewpager
There are many ways to do this, If you have less content then play with visibility otherwise ViewFipper ( https://abhiandroid.com/ui/viewflipper ) Or can use Fragments
I am very new to android application and I made a simple android application using Phonegap.
I created some pages and linked correctly, Its working fine and I would likes to add page transitions as in many applications.
Please help me how to add those transitions. i.e. When a user clicks in the link and this page will slide left and has to show the upcoming page.
Use
$.mobile.changePage('#pageid', {
transition : "none",
reverse : true,
changeHash : true
});
to change page. define desired transition here
I think you can either use any jQuery slide transition or the best way is to use the MobileJquery Framework
in which you will have a lot of options to customize. Click here for more details www.jquerymobile.com