I'm trying to accomplish the style of buttons used in the yahoo fantasy football app. On the nav bar located at the bottom of the screen there are buttons. Now I've extracted the assets from the app so I know that the magnifying glass is of course an image, but there are two. A blue one and a grey one. However the button "underlay" which is transparent doesn't appear to be an image.
Example: http://i.stack.imgur.com/ASNzz.jpg
I want to replicate this type of button, with the following characteristics.
A gradient background (I know how to do this, but I want to be clear that #2 needs to be able to reflect a background that isn't a solid color)
A "button underlay" that is transparent with rounded corners, like the example.
Changing icons (magnifying glass)
And then of course, it being a button. More specifically launching another activity in my app.
I think that Yahoo has copied the iPhone TabBar style for that app, but it's a simple TabHost interface (here's the tutorial)
On the internet you can find many XML examples for the TabBar style, I suggest these ones (that in my opinion are the best)
https://github.com/AdilSoomro/Iphone-Tab-in-Android : the graphical best one IMHO
https://github.com/honcheng/ScrollableTabHost-for-Android : in this one the TabBar is horizonally scollable
http://www.anddev.org/code-snippets-for-android-f33/iphone-tabs-for-android-t14678.html : a very easy one to implement
But I have a thing to ask you: is for your application necessary to copy the iPhone style? I leave here the link to Londatiga's QuickActions which are the same style as the contacts app, twitter app, gallery app, and many many more - and it's a recommended style by the Google's engineers. It's more "androidish" ;)
Related
ALL,
I am trying to port the application from iOS to Android.
In iOS there is a view at the bottom of the screen which holds couple of buttons and it looks like a status bar. One button is implemented as notification button (something like icon in SMS-like applications where you see number in the upper right corner of the icon) and the others are just regular buttons.
This view is always on screen and it looks like a notification area.
Now on Android, how do I implement such a view? Go to each layout.xml and add it there? Can ViewGroup be used for such a view?
Need some guidance here.
Thank you.
[EDIT]
As some people asked here is what I'd like to have.
If you look at the Android phone after boot up (I have an HTC one) there is a grey area at the bottom of the screen. In the middle there is a big button, which says "Phone" and there are 2 smaller buttons - one which directs you to the applications installed and the other is for Personalization of the device.
What we want is something like this with much smaller button images.
[/EDIT]
Tabs on Android are placed at the top of the screen; not at the bottom:
Please carefully read this page: http://developer.android.com/design/patterns/pure-android.html and http://developer.android.com/design/patterns/actionbar.html
You could of course use a custom View, but developing will be a nightmare.
The contents of tabs can be achieved using ViewPager and Fragments: http://developer.android.com/reference/android/support/v4/view/ViewPager.html
While the indicators can be achieved with PagerTabStrips
http://developer.android.com/reference/android/support/v4/view/PagerTabStrip.html
I'm not sure what exactly the view is you are talking about without an image but you can create this layout in its own xml file then you simply use an <include> tag in each xml file. Once you get the properties how you want them it is simply copy/paste into each file, for the most part
I do this in my layouts. I extend from a BaseActivity or BaseListActivityandincludea customActionBar` so I can have the look and functionality I need throughout the whole app.
Reu-using Layouts
I have seen a couple of application having a TabBar like the following here. I am talking about the widget the bottom left hand corner of the image. You can drag the circular disc and change the tab. Also an Image POP ups about the current TAB. I have tried searching about but so far no luck.
Kind Regards
This is something that HTC developed for their own usage.
it is not available openly to developers sorry.
If you want something like this you will need to develop it on your own.
You can achieve this by using a TabHost widget with TabWidget placed in a horizontal scroll view and then on tab click show some kind of custom fullscreen Toast message with the description and the image. also customize the TabWidget, you can definitely find info on the Tabhost and customizing the tabwidget either here on stackoverflow or some tutorials on google.
In any case you definitely need to do this from scratch, but its certainly possible.
I have googled this, most of the solutions are using:
1.TabHost with customized style which would cover the separate line between each tab to archive the requirement.
2.On the android developers website, there is a article is using Merge layout to put 2 buttons on top of the background image kind of archive what I want.(http://developer.android.com/resources/articles/layout-tricks-merge.html)
3.What about using button but style the looking like the example below? I don't need the selection, cause each item in the menu will be a button, which takes the user to another page.
I am wondering is there any other solutions apart from these two?
This is something want:
I don't need the menu likes a tab which has selected and unselected, they are better like a button always displaying in certain screen(activity).
Thank you.
You can use simple buttons, and provide any custom background for it. For such simple form as on your screenshot look for this link.
But #Janne write right thing - you should be very careful with transplanting controls from another platforms.
i am looking to add a home screen to my app sort of like facebook app has with little icons and labels under them (Pictures, Chat, Wall, etd). I would like to go this route as opposed to adding bunch of tabs on top.
My question is how i can get it done with Android API? I know i could probably make these icons with labels within but perhaps there is a way to make it in a native way.
Thanks! :)
Use regular Button/ImageButtons, but with android:background="#null". If you want the icons to change while they're being pressed or selected, use StateList Drawables.
http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
Have you considered looking at the Facebook API and SDK for Android? They also provide functionality to create Facebook style dialogs aswell. Read-up more about the Facebook SDK here
I would suggest using a RelativeLayout and defining the looks of the home screen in XML. I would use ImageButtons like mentioned by gngr44 and then make the text labels from TextViews. You can align them beneath the buttons in XML and RelativeLayout is probably best.
The Android Developers site has a lot of useful info to get started. Like this link: http://developer.android.com/guide/topics/ui/index.html
On my Samsung Galaxy, application icons displayed on my Home Screen often don't match those displayed on the Applications Menu.
Firstly, I want to know if this is peculiar to Samsung/Galaxy (or some subset of Android phones), or if this is across the platform? Secondly, I'd like to know how to set this up in my Android project.
To illustrate what I'm asking, please refer to the following image:
Icons 1 and 2 are typical of a lot of third-party apps: on the Home Screen the icon transparency is honoured, but on the Applications Menu the icon is over-layed onto a button graphic. On my phone the latter is more-often-than-not a dirty-green, radial pattern.
Some apps have over-ridden this behaviour, however: icons 3 and 4 show that MapQuest has been able to specify a different base colour for the button (same radial pattern, though); and icons 5 and 6 show what appears to be a complete replacement of the button image or Application Menu icon.
Can anyone explain what I need to do to specify both forms of the icon in my project?
Thanks, in advance.
That particular effect is part of the Samsung Homescreen UI. It does something similar on the Galaxy Tablets.
icons 3 and 4 show that MapQuest has been able to specify a different base colour for the button
I don't think that they specified that I imagine that it is either luck of the draw(on Galaxy Tab there are many colors blue,green, orange, pinkish, etc...they don't appear to have any sort of pattern for which icons get which color), or it can tell that their icon is green also, and because of that it changes colors so that you don't end up with a green icon on top of a green backdrop.
and icons 5 and 6 show what appears to be a complete replacement of the button image or Application Menu icon.
I don't think they had control over that. I think it is just another one of the possible backdrops that the system uses.
Can anyone explain what I need to do to specify both forms of the icon in my project?
As far as I know you can't the backdrops are up to the 3rd part home/launcher replacement app. In this case Samsung's (but there are other home and launcher replacements on the market that could also use an effect like this if they wanted.)
Thanks, Tim - further playing around has revealed more...
As a result of refactoring my package names, I ended up with two copies of my app (with identical icons) on my Applications Menu.
As Tim suggested might happen, the second icon has a different, apparently randomly allocated, background. It would appear that the button colour is unrelated to any colour in my icon, however, as the same icon got allocated a different background.