Develop Reference

Can I set a padding to the hamburger icon on Android 4.4 from Xamarin.Forms?

Image shows versions 7.1 and 4.4,the top two images are the default ones, to the bottom two we added some customization ,see description
What I want to achieve is that on Android 4.4 the hamburger button to have a space in front so that it doesn't start right from the edge of the action bar/screen(much like on 7.1,see screenshot).Can I add a padding to the hamburger button?I am using Xamarin.Forms with Xamarin Studio.
The problem seems to be worse when we add a custom view to the action bar,it sets the hamburger button more to the left I think,and doesn't entirely fit in the screen and somehow "cuts it off".
This is the relevant part of how we add the custom view to the action bar.We do this with a custom NavigationRenderer and we do the UI from code.
actionBar.SetDisplayShowCustomEnabled(true);
LinearLayout linearLayout = new LinearLayout(activity);
linearLayout.SetGravity(GravityFlags.CenterVertical);
LinearLayout.LayoutParams textViewParameters = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, LinearLayout.LayoutParams.MatchParent);
switch (activity.Resources.DisplayMetrics.DensityDpi)
{
case DisplayMetricsDensity.Xhigh:
textViewParameters.RightMargin = (int)(48 * activity.Resources.DisplayMetrics.Density);
break;
case DisplayMetricsDensity.Xxhigh:
textViewParameters.RightMargin = (int)(64 * activity.Resources.DisplayMetrics.Density);
break;
default:
textViewParameters.RightMargin = (int)(48 * activity.Resources.DisplayMetrics.Density);
break;
}
TextView modelTitle = new TextView(activity);
modelTitle.Text = view;
modelTitle.Gravity = GravityFlags.Center;
modelTitle.TextSize = 17f;
Typeface type = Typeface.CreateFromAsset(Forms.Context.Assets, "abc.ttf");
modelTitle.SetTypeface(type, TypefaceStyle.Bold);
modelTitle.SetTextColor(Android.Graphics.Color.White);
linearLayout.AddView(modelTitle, textViewParameters);
ActionBar.LayoutParams actionbarParams =
new ActionBar.LayoutParams(ActionBar.LayoutParams.MatchParent, ActionBar.LayoutParams.MatchParent);
activity.ActionBar.SetCustomView(linearLayout, actionbarParams);
I also tried to change the hamburger icon to a drawable(I added a space before the same hamburger icon,and it would do the job),but once I navigate back to the page using the back button (from the same action bar),my icon is replaced by the default hamburger button again.
I would appreciate any help.Thank you!
Edit:
public class MainView : MasterDetailPage
{
public MainView(parameter){
......
sideMenu = new CustomContentPage();//my custom Content Page with listview items
base.MasterBehavior = MasterBehavior.Split;
sideMenu.Padding = new Thickness(0, Device.OnPlatform(50, 0, 0), 0, 0);
Master = sideMenu;
.......
}
...
}
public class App : Application
{
private MainView lcMenu = null;
.....
if (lcMenu == null)
{
MustSet = true;
lcMenu = new MainView(parameter);
lcMenu.RequestPage += LcMenu_RequestPage;
}
....
MainPage = lcMenu;
}

This is the relevant part of how we add the custom view to the action bar.We do this with a custom NavigationRenderer and we do the UI from code.
Seems that you're creating your own master detail instead of using the MasterDetailPage of XF? Not sure, but I think you went the wrong direction, for setting the padding of hamburger button we need to customize MasterDetailPage.
I also tried to change the hamburger icon to a drawable(I added a space before the same hamburger icon,and it would do the job),but once I navigate back to the page using the back button (from the same action bar),my icon is replaced by the default hamburger button again.
As I said, we can customize the MasterDetailPage, in the renderer, we can find the ImageButton for hamburger button, for example:
public class MyMasterDetailRenderer : MasterDetailPageRenderer
{
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
for (var i = 0; i < toolbar.ChildCount; i++)
{
var imageButton = toolbar.GetChildAt(i) as ImageButton;
var drawerArrow = imageButton?.Drawable as DrawerArrowDrawable;
if (drawerArrow == null)
continue;
//set drawable
imageButton.SetImageDrawable(Forms.Context.GetDrawable(Resource.Drawable.hamburger));
//set padding
imageButton.SetPadding(80, 30, 80, 30);
//set background
imageButton.SetBackgroundColor(Android.Graphics.Color.Red);
}
}
}

Appcelerator Titanium: Set Android.SearchView.iconifiedByDefault to false does not work if it is in actionBar?

When I create a searchView and set iconifiedByDefault: false, it automatically loads into the search bar (ie. prompts for text immediately instead of having to click on the magnifying glass first).
search = Ti.UI.Android.createSearchView({
hintText: "Search",
iconifiedByDefault: false
});
$.index.add(search);
$.index.open();
However, when I add the SearchView into the ActionBar with iconifiedByDefault:false, the keyboard comes out but I still see a magnifying glass. I added the SearchView into the ActionBar like this:
$.index.activity.onCreateOptionsMenu = function(e) {
var menu = e.menu;
if (Ti.Platform.name == 'android' && Ti.Platform.Android.API_LEVEL > 11) {
var menuItem = menu.add({
title: 'Table Search',
actionView : search,
icon: (Ti.Android.R.drawable.ic_menu_search ? Ti.Android.R.drawable.ic_menu_search : "my_search.png"),
showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM | Ti.Android.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW
});
}
}
Any ideas why this won't work if I put the SearchView into the ActionBar? Thanks.
On Titanium SDK 5.2.

How to customize arrow icon, page icon and page title in MasterDetailPage - Xamarin.Forms

I have created a new Blank App (Xamarin.Forms Portable) project in Visual Studio 2015 and modified App.cs to get "hamburger menu":
public class App : Application
{
public App()
{
var masterPage = new ContentPage()
{
Content = new Label { Text = "Hello from Master!"},
Title = "Master Page"
};
var detailPage = new ContentPage()
{
Content = new Label { Text = "Hello from Detail!" },
Title = "Detail Page"
};
var mainPage = new MasterDetailPage()
{
Master = masterPage,
Detail = detailPage,
Title = "Main Page"
};
// The root page of your application
MainPage = mainPage;
}
. . .
}
Everything works fine, but how can I customize these four things:
1) Hide / change Arrow
2) Hide / change Icon
3) Hide / change Title text
4) Hide whole toolbar

You can change arrow to hamburger icon if you use your DetailPage within NavigationPage:
Detail = new NavigationPage(detailPage);
To change icon, just change project files:
YourProject/Resources/drawable/icon.png
YourProject/Resources/drawable-hdpi/icon.png
YourProject/Resources/drawable-xhdpi/icon.png
YourProject/Resources/drawable-xxhdpi/icon.png
or on your MasterDetailPage set Icon property to another resource.
If you want to hide icon - it only applies to Android. It can be solved with custom renderer (http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/):
public class CustomNavigationRenderer : NavigationRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
{
base.OnElementChanged (e);
var actionBar = ((Activity)Context).ActionBar;
actionBar.SetIcon (Resource.Color.transparent);
}
}
EDIT:
It can also be done in MainActivity.cs:
ActionBar.SetIcon (new ColorDrawable(Resources.GetColor (Android.Resource.Color.Transparent)));
Just use Title property on Page.
SetHasNavigationBar(page, false);

Set Title in ActionBar - Screen with Tabgroups - Titanium Alloy

I'm using Titanium version 3.1.3 and alloy framework. I implemented the action bar in my app; but in the screen with tab groups in it, the title is missing from action bar. Only the icon is getting displayed in it. From this - https://jira.appcelerator.org/browse/TIMOB-11645, I can see that, this is fixed in SDK version: 3.1.0.v20130320190115. But still, I'm not able to figure out why.
I tried setting the title of action bar through code like this
var actionBar;
if (Ti.Platform.osname === "android") {
if (! $.tab.activity) {
Ti.API.error("Can't access action bar on a lightweight window.");
} else {
actionBar = $.tab.getActivity().actionBar;
if (actionBar) {
alert("true");
//actionBar.title = "TITLE";
actionBar.setTitle("TITLE");
}
}
}
Please help. Thanks in advance!

In order to get access to some ActionBar methods and properties, like the title, your code needs to be run after the tabgroup is opened.
In your view, you can add event listener like this:
<TabGroup onOpen="doOpen">
....
</TabGroup>
Then in your controller, put your code in the callback:
function doOpen(){
var actionBar;
if (Ti.Platform.osname === "android") {
if (! $.tab.activity) {
Ti.API.error("Can't access action bar on a lightweight window.");
} else {
actionBar = $.tab.getActivity().actionBar;
if (actionBar) {
alert("true");
//actionBar.title = "TITLE";
actionBar.setTitle("TITLE");
}
}
}
}
I tested your code in the open event callback using SDK 3.2.1, and it worked fine.
Here is another example for modifying the ActionBar title.

Titanium, Android, ListView with searchView in actionBar, how to?

I can't figure how to use a Ti.UI.Android.createSearchView, embedded in actionbar with a ListView.
My code is:
var win = Ti.UI.createWindow({
backgroundColor: 'blue',
fullscreen: false,
title: 'Productos'
});
var search;
var searchAsChild = false;
if (Ti.Platform.name == 'android' && Ti.Platform.Android.API_LEVEL >= 11) {
// Use action bar search view
search = Ti.UI.Android.createSearchView({
hintText: "Table Search"
});
win.activity.onCreateOptionsMenu = function(e) {
var menu = e.menu;
var menuItem = menu.add({
title: 'Table Search',
actionView : search,
icon: (Ti.Android.R.drawable.ic_menu_search ? Ti.Android.R.drawable.ic_menu_search : "my_search.png"),
showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM | Ti.Android.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW
});
};
}
else {
// Use search bar
search = Ti.UI.createSearchBar({
hintText: "Table Search"
});
searchAsChild = true;
}
search.addEventListener('cancel', function(){
search.blur();
});
var listView = Ti.UI.createListView({searchView: search, caseInsensitiveSearch: true});
var listSection = Ti.UI.createListSection();
var fruits = ['Papaya', 'Peach', 'Pear', 'Persimmon', 'Pineapple', 'Pluot', 'Pomegranate'];
var data = [];
for (var i = 0; i < fruits.length; i++) {
data.push({
properties: {title: fruits[i], searchableText: fruits[i]}
});
}
listSection.setItems(data);
listView.sections = [listSection];
win.add(listView);
win.open();
and in logs it appears:
[ERROR] MenuProxy: (main) [6091237,6100945] View already has a parent. Can't add it as an action view
And on the device, appears a search icon on action bar, but if I click it, nothing happens. And appears another search icon on listView header, and when I click it a textbox appears to do the search.
If I implement the same list with TableView, it works ok!
thank you!!

You have added the search as the searchView to the ListView. Just delete the searchView property when creating the ListView. To search the ListView, you have to use listview.searchText. It takes a String. You could add a change-listener to the searchView to set this searchText. I didn't tested this but if you wish I can provide a code snippet.