Android action bar tabs - user-interface

Currently I'm working with action bar tabs they are shown perfectly with 4.1 device but when i run on same screen size in lower version 4.0 then the action bar tabs are shown as "ActionBar spinner navigation"
I want them to be shown like this one:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ParseAnalytics.trackAppOpened(getIntent());
ParseUser currentUser = ParseUser.getCurrentUser();
if(currentUser == null) {
navigateToLogin();
} else {
Log.i(TAG, currentUser.getUsername());
}
final ActionBar actionBar = getActionBar();
//actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
mSectionPargerAdapter = new SectionPargerAdapter(this, getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionPargerAdapter);
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
#Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
for (int i = 0; i < mSectionPargerAdapter.getCount(); i++) {
// Create a tab with text corresponding to the page title defined by
// the adapter. Also specify this Activity object, which implements
// the TabListener interface, as the callback (listener) for when
// this tab is selected.
actionBar.addTab(actionBar.newTab()
.setText( mSectionPargerAdapter.getPageTitle(i))
.setTabListener(MainActivity.this));}
}
});
}
#Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
mViewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
#Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}

This is optimization done by system. The second view is called stacked action bar and first is called action bar with spinner. You can achieve what you want by first adding all tabs and then setting the mode of action bar as
setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)

Related

Custom NavigationRenderer for back button not called while navigating back in xamarin forms application

Here is the code for the custom renderer i used to assign a custom icon as my back button.
namespace MyProjectName.Droid.Renderers
{
public class MyNavigationRenderer: PageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Page> e)
{
base.OnElementChanged(e);
var context = (Activity)Xamarin.Forms.Forms.Context;
var toolbar = context.FindViewById<AndroidX.AppCompat.Widget.Toolbar>(Droid.Resource.Id.toolbar);
toolbar.NavigationIcon = AndroidX.Core.Content.ContextCompat.GetDrawable(context, Resource.Drawable.bbutton_nav);
}
}
}
This code successfully replaces the native back arrow icon with my custom bbutton_nav. When i navigate forward(Navigate.PushAsync()), the custom icon appears on all the upcoming screens. But when i click on the back icon to go back one page(Navigate.PopAsync()), the old native back arrow reappears instead of the new custom icon that was set by the renderer. When i tried debugging , i found out that the renderer class was not getting called when navigating back(Navigation.PopAsync()).
Any help on how to mitigate this issue is appreciated. Thanks
Create a custom renderer for NavigationPage instead of Page , and override the OnLayout method .
Android will change the detault icon back in UpdateToolbar method , and OnLayout method is triggered every time while current page is changed.
Android Solution
[assembly: ExportRenderer(typeof(NavigationPage), typeof(MyNavigationRenderer))]
namespace FormsApp.Droid
{
public class MyNavigationRenderer : NavigationPageRenderer
{
Context _context;
AndroidX.AppCompat.Widget.Toolbar _toolbar;
public MyNavigationRenderer(Context context) : base(context)
{
_context = context;
}
public override void OnViewAdded(Android.Views.View child)
{
base.OnViewAdded(child);
if (child.GetType() == typeof(AndroidX.AppCompat.Widget.Toolbar))
{
_toolbar = (AndroidX.AppCompat.Widget.Toolbar)child;
_toolbar.SetNavigationIcon(Resource.Drawable.bbutton_nav);
}
}
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
if (_toolbar != null)
{
if (_toolbar.NavigationIcon != null)
{
_toolbar.NavigationIcon = AndroidX.Core.Content.ContextCompat.GetDrawable(_context, Resource.Drawable.bbutton_nav);
}
}
}
}
}
Refer to https://forums.xamarin.com/discussion/183344/how-to-change-navigation-back-button-icon .
iOS Solution
[assembly: ExportRenderer(typeof(NavigationPage), typeof(MyRenderer))]
namespace FormsApp.iOS
{
class MyRenderer : NavigationRenderer
{
public override void ViewDidLayoutSubviews()
{
base.ViewDidLayoutSubviews();
if (this.NavigationBar.TopItem.BackBarButtonItem == null)
{
this.NavigationBar.BackIndicatorImage = UIImage.FromFile("dots.png");
this.NavigationBar.BackIndicatorTransitionMaskImage = UIImage.FromFile("dots.png");
this.NavigationBar.TopItem.BackBarButtonItem = new UIBarButtonItem("", UIBarButtonItemStyle.Plain, null);
}
}
}
}

Xamarin Tabbed Page not showing Content

trying to learn more about Tabbed Pages with i've built a very simple App containing three content Pages with a code like this:
public class Page1 : ContentPage
{
public Page1()
{
Content = new StackLayout
{
Children = {
new Label { Text = "Hello Page1" }
}
};
}
protected override void OnAppearing()
{
base.OnAppearing();
System.Diagnostics.Debug.WriteLine("Page 1 On Appearing");
}
protected override void OnDisappearing()
{
base.OnDisappearing();
System.Diagnostics.Debug.WriteLine("Page 1 Disappearing");
}
}
The Main Page looks like this:
public class MainPage : TabbedPage
{
public MainPage()
{
var page1 = new Page1();
page1.Title = "Page1";
var page2 = new Page2();
page2.Title = "Page2";
var page3 = new Page3();
page3.Title = "Page3";
Children.Add(page1);
Children.Add(page2);
Children.Add(page3);
}
}
Now when i click on a new tab, the OnDisappearing() method of the old tab is called, as well as the OnAppearing() method of new tab, BUT the content of the new page is not shown. It remains the content of the old page.
To show the content of the new page i have to click again on the tab.
Does anybody has experienced this kind of behaviour?
Best regards,
Marco

Xamarin Android WindowSoftInput Resize (specific page)

Is there a way to implement the Android.Views.SoftInput.AdjustResize to a specific page/control (e.g. a grid) rather than inserting it into App.xaml.cs or MainActivity.cs ?Since it is affecting my other pages when the keyboard is being shown.
Thanks!
I have solved my problem. What I did was to implement in on my page.xaml.cs on
protected override void OnAppearing()
{
base.OnAppearing();
App.Current.On<Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
}
This would resize your window when the keyboard is being shown when the page appears, and if you want to retain the normal behaviour of your Entry or other elements that will show your keyboard use this code:
protected override void OnDisappearing()
{
base.OnDisappearing();
App.Current.On<Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Pan);
}
The WindowSoftInputModeAdjust.Pan is the default behaviour of Android when a keyboard is being shown. This way when your page disappears, the settings will go back to default.
As supplement to #jbtamares' solution, I created an extension method which allows to easily revert to the original resize mode once the affected page disappears.
The extension method tracks the original resize modes once UseWindowSoftInputModeAdjust is called on the page. ResetWindowSoftInputModeAdjust reads the original resize mode and sets it accordingly.
This is the code of the extension method:
public static class PageExtensions
{
private static readonly IDictionary<Type, WindowSoftInputModeAdjust> OriginalWindowSoftInputModeAdjusts = new Dictionary<Type, WindowSoftInputModeAdjust>();
public static void UseWindowSoftInputModeAdjust(this Page page, WindowSoftInputModeAdjust windowSoftInputModeAdjust)
{
var platformElementConfiguration = Xamarin.Forms.Application.Current.On<Android>();
var pageType = page.GetType();
if (!OriginalWindowSoftInputModeAdjusts.ContainsKey(pageType))
{
var originalWindowSoftInputModeAdjust = platformElementConfiguration.GetWindowSoftInputModeAdjust();
OriginalWindowSoftInputModeAdjusts.Add(pageType, originalWindowSoftInputModeAdjust);
}
platformElementConfiguration.UseWindowSoftInputModeAdjust(windowSoftInputModeAdjust);
}
public static void ResetWindowSoftInputModeAdjust(this Page page)
{
var pageType = page.GetType();
if (OriginalWindowSoftInputModeAdjusts.TryGetValue(pageType, out var originalWindowSoftInputModeAdjust))
{
OriginalWindowSoftInputModeAdjusts.Remove(pageType);
var platformElementConfiguration = Xamarin.Forms.Application.Current.On<Android>();
platformElementConfiguration.UseWindowSoftInputModeAdjust(originalWindowSoftInputModeAdjust);
}
}
}
And here is how you apply it in the page:
public partial class LoginPage : ContentPage
{
public LoginPage()
{
InitializeComponent();
}
protected override void OnAppearing()
{
base.OnAppearing();
this.UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
}
protected override void OnDisappearing()
{
base.OnDisappearing();
this.ResetWindowSoftInputModeAdjust();
}
}
Hope this helps. Let me know if you find any problems with the code posted above.

Radio Button Change Event JavaFx

i have a lot of HBoxes with some different components inside ( RadioButton, Labels, Buttons ...).
The RadioButtons are in a ToggleGroup, so only 1 Radio Button can be selected.
I want to add a OnChange - Event to the Radio Button. If the RadioButton would be unselected there should be a Event-Trigger. How can i add the Event to the Radio-Button?
At the moment i have a code like this, but it doesn't have the function i want to have.
radio.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent arg0) {
if(!radio.isSelected()){
ivTriangleImg.setRotate(iRotateCoord2);
btnTriangle.setGraphic(ivTriangleImg);
}
if(group!=null){
group.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {
#Override
public void changed(
ObservableValue<? extends Toggle> arg0,
Toggle arg1, Toggle arg2) {
}
});
}
}
});
I use JavaFX 2.0 and Java 1.7 so i can not use Lambda Functions or the special component functions of JavaFx8 / Java 1.8
The state of JavaFX controls is represented by observable properties. You can access these properties with control.propertyNameProperty() and add ChangeListeners to them:
radioButton.selectedProperty().addListener(new ChangeListener<Boolean>() {
#Override
public void changed(ObservableValue<? extends Boolean> obs, Boolean wasPreviouslySelected, Boolean isNowSelected) {
if (isNowSelected) {
// ...
} else {
// ...
}
}
});
radio.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent arg0) {
if(!radio.isSelected()){
ivTriangleImg.setRotate(iRotateCoord2);
btnTriangle.setGraphic(ivTriangleImg);
}
if(group!=null){
group.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {
#Override
public void changed(
ObservableValue<? extends Toggle> arg0,
Toggle arg1, Toggle arg2) {
if(!radio.isSelected()&&ivTriangleImg.getRotate()!=iRotateCoord1){
ivTriangleImg.setRotate(iRotateCoord1);
btnTriangle.setGraphic(ivTriangleImg);
}
}
});
}
}
});
This would work for my Question. I have done a little mistake, so i don't check the Radio-Style. It works fine now... Sorry for this Question.
Is there a possibility to check the Event at the Radio Button and not at his group?
In case you have many radio buttons you dont want have a single EventHandlers for each one of them....
Here is an example with 6 radio buttons but just one ChangeListener where the events are all process in a centralized method.
This detects programatic events, keyboard events and mouse events
Note that the listener is added to the ToggleGroup
public class ReportOptionsPane extends BorderPane implements ChangeListener<Toggle> {
RadioButton radioFoldersOnly ;
RadioButton radioAllItems ;
RadioButton radioArtifactsOnly ;
RadioButton radioStatsOrderByOccurrence ;
RadioButton radioStatsOrderByName ;
public ReportOptionsPane(ReportOptions rep) {
super() ;
ToggleGroup tg = new ToggleGroup();
radioFoldersOnly = new RadioButton("Folders only") ;
radioAllItems = new RadioButton("Files & Folders") ;
radioArtifactsOnly = new RadioButton("Artifacts only") ;
radioFoldersOnly.setToggleGroup(tg);
radioAllItems.setToggleGroup(tg);
radioArtifactsOnly.setToggleGroup(tg);
//You add the listener to the toogle group of your radio buttons
tg.selectedToggleProperty().addListener(this);
ToggleGroup tg2 = new ToggleGroup();
radioStatsOrderByOccurrence = new RadioButton("Order stats by occurrence") ;
radioStatsOrderByName = new RadioButton("Order stats by name") ;
radioStatsOrderByOccurrence.setToggleGroup(tg2);
radioStatsOrderByName.setToggleGroup(tg2);
//You can reuse the listener for the second toogle group of your radio buttons
tg2.selectedToggleProperty().addListener(this);
}
//Then you handle all in a centralized place
#Override
public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) {
if(newValue.equals(radioFoldersOnly)) {
//react to radio button being selected
} else if(newValue.equals(radioAllItems)) {
//react to radio button being selected
} else if(newValue.equals(radioArtifactsOnly)) {
//react to radio button being selected
} else if(newValue.equals(radioStatsOrderByName)) {
//react to radio button being selected
} else if(newValue.equals(radioStatsOrderByOccurrence) {
//react to radio button being selected
}
}
}

shows system menu when user click in each row of a verticalfield manager

My application using a 'vertical field' manager and i add some text to it using a custonField class.The vertical manager constructor is:
scrollingRegion = new VerticalFieldManager(
USE_ALL_HEIGHT| VERTICAL_SCROLL | VERTICAL_SCROLLBAR|USE_ALL_WIDTH);
I also craete menu using:
protected void makeMenu(Menu menu, int context) {
menu.add(_imageMenuItem);
//super.makeMenu(menu, context);
}
class ImageMenuItem extends MenuItem {
/**
* Creates a new MenuDemoMenuItem object
*/
ImageMenuItem() {
super("Login Screen", 0, 0);
}
public boolean onMenu(int i) {
return false;
}
public void run() {
UiApplication app = (UiApplication) getApplication();
app.pushScreen(new LoginScreen());
}
}
My problem is when I click in the vertical field(which uses a table row manager), the menu is displayed. How can I avoid it? Can any one suggest a solution
if the item is ButtonField you can consume click by define it in the constructor
ButtonField btn = new ButtonField("Login", ButtonField.CONSUME_CLICK);

Resources