Develop Reference

How to manage pictures and icons when developing mobile app for both Android and iPhone

I'm planning to create a BLE (Bluetooth Low Energy) mobile app for both iOS and Android devices. (iOS 11 or above / Android 6 or above)
I and my friend used both Java and Swift.
Although we searched about Xamarin or PhoneGap App,
we wanted to use our previous working environment (Xcode/Android Studio) as possible, not spending time on learning new tools.
So we want to work on a BLE app and we want to make it work on both Android and iOS. Currently, we are making the same thing using Swift and Java.
Since the UI part overlaps for both platform, we wish to ask these questions, please.
If we use Swift and Java separately, we noticed that when a picture is changed, we have to update both to each separate code.
For example, we wanted to change the round button to a square button shape. Currently, we upload the same picture to the GitHub repository respectively. So we felt something is not efficient and we want to ask is there a better way to change both sides of the app.
Solutions which require prices, like adding Amazon Web Service S3, is also welcomed.
We are creating the same UI for both platforms using Swift and Java. Since the UI, button, etc (the interface parts) overlaps for both app, is there a way to code the same UI so both of us don't have to spend time for working the same thing?
Maybe something like Xamarin could be one way, but I want to hear various advice, please.

Why not just put the images in a common folder in source control that both builds can access it? That's the common way of doing it. Using S3 (or any other server) will work if you want to download it at runtime, but since you tried checking it into source control it seems like you want it part of the build.
As for the UI- native Android and iOS have completely different UIs and ways of working with it. Really unless you want to go with an html app, you're going to write two different UIs. The UIs are the least sharable part of a mobile app. At least for business logic you have a few options (worst case you can always use C, which runs on both).

Android User Interaction

I'm about to start developing my first Android application, I have been reading through the developer documentation, but am unclear on how user interactions are handled.
As a front end developer, I use alot of css/jquery to create rich and interactive user interfaces.
I see that Android has it's own version of stylesheets, which seem pretty straight forward, but I am left wondering how I can replace something like js/jquery. Is it possible to use JQ mobile for native Android apps? Is there a replacement to this? Does android's UI handle this?
I'm a little confused.

Yes, it is still possible to heavily leverage your js/jquery skills and create a solid Android application that provides a rich user interface which is primarily js.
This will obviously depend greatly on what kind of application you're writing however if you own a website that delivers rich web content to end users and you'd like to replicate this in an Android application then you should take a look at webviews. They should support most of what you're trying to do in js or JQuery and it would be a quick process to mock up a test app to see if it meets you needs. I have run into a few quirks when replicating some interactive d3js visualizations which required extra tweaking before working properly on mobile devices.
I expect these minor issues will be ironed out in the next few releases of Android. Kitkat is going to include webviews that are based on Chromium which will include an updated version of the javascript engine. Your best bet is to just test it out, the amount of Java code required for a mock application is quite minimal.

Is any.do like android applications are built using eclipse(java+xml)?

I have many applications which has great GUI like Any.do, alarm clock from doubletwist etc. I was wondering are ll these applications developed using standard eclipse way using java and xml. I was not able to figure out how can i develop such type of GUI using eclipse xml?

All Android apps with a good UI use java & xml.
The only difference is that good apps need a LOT of work and sometimes a custom implementation of some Android Elements.
xml files catering to the different formfactors is the best way to implement a rich app (in fact I don't think there is any other valid way) :
-They allow you to separate the layouts from the code as much as possible.
-They allow you to treat specific form factors independently.
Additionally, Great apps often re-implements some of the basic UI elements. For exemple the implementation of the actionbar in Flipboard allow them to apply their flipping effect to it, something that you cannot do with the basic ActionBar.
Any.do has just been updated and I have not checked this last version yet, but the last time I tried the app, their implementation was not really good. Buttons were far too cramped in the ActionBar and their custom ActionBar was very slow (more than 1 second to acknowledge a tap).
Additional thoughts : sometimes these beautifully designed apps tend to ignore at least some of the Android conventions. It is a really bad idea : you can create a very beautiful app but if its UI elements are totally different from what users encounters in other Android apps it will just make the overall use of the app confusing. imho the best way to create a great app (both visually & functionally) is to use Holo as a design base that needs to be enriched and do not :
-make something totally opposite to the design conventions of the platform just because you think it is good.
-Use a basic android design block in a totally different way that what it is intended for, it will utterly confuse your users.
-Apply another platform conventions.
-Invent your own rules because "you are strenghtening your brand by having the same design on ios, android and your website". You are just being lazy.
a good starting point is obviously the official design site. android niceties is a good source of inspiration. Holo Everywhere & Android UI UX are very interesting sites in order to get more thoughts on how to improve existing apps.

Phonegap vs MonoTouch/Droid

We have an upcoming [big] project, involving a series of mobile apps. Unfortunately we're still new to this market. Our biggest problem is not learning something new, but rather having to develop the same app twice which means approx ~ twice the cost and Hence we're trying to find a cross platform solution.
Since our expertise is in C# and .NET we are very interested in MonoDroid/Touch, and from what I've read that it is a mature framework.
However it is not exactly cross-platform (or am I wrong ?) and so we turned to Phonegap, which lets you build mobile apps with js, css and html which are technologies which we feel comfortable using.
Our apps are going to be very data intensive and might also require to be "invoked" by the server, i.e. there might be 2-way communication between the server and the app.
and so my question, given these kind of apps would you suggest phonegap or monoTouch/Droid?
Thanks in advance.

Monotouch is NOT cross platform. It allows you to create reusable elements, but you can't build once and deploy to all platforms, especially if your project is really as complex as you are making it sound.
I don't know much about phonegap. I've always steered clear of it. It might have changed since I looked at it last, but as I gather its not very robust and doesn't create very good apps, especially (again) for a complex app.
There is another cross platform framework called Titanium, but similarly to the both above its not great. There is more support for it every day, but it is missing some key components and you tend to get so far into a project and realise that you're not able to get any further.
My answer, which you're not going to want to hear, is that you should do it for each platform separately, and charge your client as such.
Creating a mobile app cross platform is like creating a t-shirt that will fit everyone. Ok, so you can make it stretchy, and you can design it in a way that will "suit" everyone, but what you'll end up with is something that is going to be too big or too small, and no-one will enjoy.
iPhone, android, iPad, blackberry, windows phone 7, bada etc etc they're all VERY different platforms. Just because they're both mobile phones doesn't make them similar at all. The way that the UI is designed and displayed is varyingly different, and the way you interact with the hardware (and ultimately the user) is also different. Case and point - iPhone as you go down views you create a navigation stack which you navigate using a back button in the title bar (which has the title of the current view in it). Android you navigate with the back button on the device and the action bar is used for the app title and other "action buttons".
To this end I would suggest, if you REALLY don't want to do everything natively (which is definitely the best option) then I would suggest looking at Monotouch and creating two apps with reusable components.

With PhoneGap you will create a web application. It can look like a native app, but it's really a web app running inside a browser object.
You'll be programming the client HTML and javascript, just like any other client side web app. You can create ajax calls to the server to get your data and do all your usual C#/.Net stuff there.
With Mono, you will create a clients side application, and you can program that client in C#/.Net.
PhoneGap will be more or less free and can be used for other platforms than Windows, iOS and Android as well, though you'll have to setup environments for each version. You can compile for all platforms in the cloud, but that'll cost you money.
MonoTouch/Droid will set you back a few hundred dollars.
For each platform, you will have to do some extra tweaking. Probably giving it a native look and feel, call different API's, etc.
I would personally advise the Mono route, since you know C#/.Net already. It'll give you results faster. Make use of the free trial for MonoTouch and see if it's something for you and if it's worth buying ($698 for both 'touch and 'droid).

It depends.
I agree that going native gives you the best possible performance and user experience. It's certainly the only feasible option if the app has a demanding UI. But if the app is more informational (perhaps displays news feeds for example) then a hybrid HTML5 app could be the go. The support of HTML5 within a UIWebView on iOS has some quirks in the older iOS versions so tread with caution. And on Android and other platforms, HTML5 isn't quite there yet. Certainly not on older hardware that doesn't have the grunt or browsers with suboptimal javascript engines.
With your .NET background, I suggest you have a look at http://www.vsnomad.com and evaluate it for yourself. Throw a quick demo together and see how it holds up. Otherwise, yeah, go the native route.

iOS UI elements porting on Android

ladies and gentlemen!
Very often on my job I meet the following requirement from the client, when developing android applications: "make it look like and iPhone app".
Yes, I know, that the best way is to offer him canonical Android design with all these patterns like dashboard, using menu button etc... But sometimes this is not the case, as instead, I have to make it look and animate just the same. It's frustrating.
Can you guys, please advice me an android library (if there is one) with iOS-like UI elements? Many thanks in advance, I'm looking forward to hearing from you!

To expand on Martyn's comment, which I agree with.
Perhaps there is a great reason why a client would ask for this, but in many cases I bet they might benefit from being challenged on this requirement. If I was presented with this request, I would first ask "Why?". Perhaps they'd answer as follows:
we need a consistent experience across platforms, or
it will be more cost effective to design once and apply to each platform, or
it doesn't matter why, just do it!
Here are some responses for each:
each user will generally have one phone, and won't require the experience on Android to be identical to iPhone - they only care that it works and looks great on their phone. In fact, an Android user would prefer if you used the UI patterns that are more common to the platform, as opposed designing to match iOS. Likewise for an iPhone user.
we have found that having a designer create a set of creative for iOS allows us to pretty much use the creative as-is for Android. Even though Android might have Tabs on top, versus bottom, we are still able to take the backgrounds, button styles, fonts and color schemes from one platform to the next. There will be slight differences, but overall the brand and look should translate well. Here is an example of porting a single creative design across platforms: http://daleburgosdesign.com/
if they answer in this manner, you might want to consider passing on the job. Pixel perfect matching across platforms is tricky aside from the ideas offered in previous answers (OpenGL and the use of a WebView - via Macarse). If the client can't provide good reasoning for this tricky requirement, then it might be best to search for your next client.
Not a straight forward answer to your question, but I hope you find it helpful!

There is no iphone UI library for android that I know of. What you can do is, get the iphone GUI psd and redo it for 3 sizes of android (for the 3 size ranges) and use the elements of these psd's to theme your application.
I get these kind of similar requirements. Sometimes it wont be much about the looks but about the navigation flow of the application and how new views or activities are animated. From my experience, there is no easy way to do it. So I end up making a lot of adjustments and hacks to get the job done. And I over bill the client. :)
Btw you could also consider libraries such as Sencha Touch, it will look the same in all phones that use a webkit browser.

AFAIK there are no 'iOS-alike' widget libraries for Android.
Because of this, you could reasonably charge the client more for both development and support, thereby providing an incentive to stick with the standard Android UI design and principles.

There is no library to port iphone views to Android but if you are starting both applications from the scratch you have two possible approach to share views between both platforms.
First one is using WebViews and coding HTML, JS and CSS. This kind of app is called hybrid.
Second one is using openGL. You can do it directly or using a framework like cocos2d-x.
Depending on what you are willing to you should choose what to use.