Support for different layouts

[asiby]

Hello. Thanks for the great work. I would like to know if there are any future plan for allow customizing the layout of the action bar (as long as it does not break anything)?

For instance, I need an action bar that would have just a menu burger icon, not title, a logo that will be centered and nothing on the right side (or something a search or share icon there).

I am going to implement something to suit my needs and I am hesitating between the following:

1. Providing predefined layouts that can be optionally set at creation time. The default behaviour will remain unchanged.
2. Jamming my extra android ImageView in there (hidden by default) and add methods and UI contraints to center it in that area when it is enabled by the user. Using this approach, I will make the title/subtitle and the logo mutually exclusive. So showing the logo will hide the title and subtitle ... and showing the title or subtitle will hide the centered logo.

Hopefully those changes can be merged back into the main repo.

Any thoughts?

Cheers

[manumaticx]

Hi @asiby

I'm not sure what @ricardoalcocer's opinion is about this but I think that we won't implement such custom-built methods to layout the app bar. Especially if there's no native APIs for that. Or if the only use is to make the app bar appear how it's not intended to be used. Google provides a design guide for this.

There's a lot of workarounds out there to get almost any layout in the app bar that I would not hack into the module. I also want to avoid integrating third party libs to accomplish particular features.

Regarding your case, I can make a suggestion that may be helpful for you.

There appears to be a bug that could turn into a feature for you ;) It's about how images are handled as actionbar logo / icon using Titanium. You can read about this in #97 (basically non-square images that are not provided in density-independent resolutions or with the wrong height are displayed centered).

I assume you know how to get the burger icon!? If there is anything I can help you with just let me know. I'm sure your desired UI/UX is possible to implement in Titanium.

cheers

[asiby]

Thanks for the suggestions @manumaticx. It's much appreciated.

I didn't know about the bug that you have mentioned. It's an interesting approach. However, it will be a time bomb for me because when the bug gets fixed in the future, then I will be facing a whole new problem. Also, I do need to provide a proper density dependant resources for this image so that it doesn't look ugly on some devices (darn smartphones densities).

That said, I have simple added a method called setActionbarImage({...}) that will set a custom view to the actionbar that contains the image that I need to set, then I set that image to the path or the blog passed as a parameter. The custom view does not affect the actionbar icons. It simply goes in the area that was initially holding the title and the subtitle. And the customView will still coexist with the title and the subtitle. But that would be weird because where the icon is needed, then the title and subtitle must remain hidden... which is what I am doing.

This does not require any additional library. It's all done as per Google's and Appcelerator's documentations. I think that it has an added value for some apps. We have a very beautiful titanium app that will benefit from it. Please take a look at the screenshots on the play store and you will see what I'm talking about.

So far, we had to fake the action bar to achieve this. But now, we are implementing the Material Design patterns and we will be officially using the actionbar feature. Reach that goal, the actionbarextras is the best we could find for titanium (and it's really, really good). So it was just for us a matter of natural evolution to try to add the ability to properly stick a logo up there if our clients need it.

The good news is that 10 minutes ago, I managed to make it work. And I believe that it's pretty clean. I'm using GitFlow. So before the end of the day, you will find some new commits in my develop branch. After I finished documenting and updating the example project, I will commit those as well and merge them to master then make a pull request. Hopefully it will be merged upstream.

Cheers

[ricardoalcocer]

Hi. Sorry I'm late to the party. If this solution does conform to the design guidelines I'm definitely all for it.

[asiby]

That's a good news. Thanks to all of you. I am in the process of committing the code now.

[manumaticx]

Thank you for this great explanation. I definitely got a better understanding of what that implementation is actually about. And I'm really looking forward to your pull request.

This method would absolutely make sense for some developers. And since ABX is all about enhancement and providing extras this method would suit the module.

Thanks for contributing 👍