In iPhone we can create a view that has a tab bar and make it the root view of the application then use the tab bar to navigate through sub views.
what is the most close approach to this in Android?
Is it to use a Tabbed Control? but this includes using just one activity.
what is the approach to use in Android to create an activity with a navigation control to other activities in a way similar to that of the iPhone?
There's a tutorial for creating a "Tab Layout" on the android dev site:
You can implement your tab content in
one of two ways: use the tabs to swap
Views within the same Activity, or use
the tabs to change between entirely
separate activities
(source: android.com)
Sorry, I really don't know the iPhone, but may a QuickAction Dialog help you??
http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/
I imagine a list of some activities in that dialog.
I hope this is close to what you want.
There are a couple of examples around
http://www.anddev.org/code-snippets-for-android-f33/iphone-tabs-for-android-t14678.html
This one is scrollable
http://code.google.com/p/mobyfactory-uiwidgets-android/
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="0dp"
>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
/>
</LinearLayout>
</TabHost>
Related
I have been looking for about a day for a way to get my android application have tabs in the bottom of the screen.
On the Android Developer website in the Styles and Themes section, they seem to have the exact example of what I am trying to do, however they did not find it necessary to provide a decent example of this:
All the tips/solutions I find on the web are failing. I always seem to get the following butt-ugly layout where the tabs are very misplaced in the top of the screen next to the application name :-(
Does anyone have a clue how to accomplish this ?
Thank you so much in advance for any tips !
I think these examples will be useful to you: Android Bottom tab bar example AND THIS
Here is the two link of github that has implemented tab at bottom.
https://github.com/AdilSoomro/Iphone-Tab-in-Android
https://github.com/AdilSoomro/Raised-Center-Tab-in-Android
I use this layout for locate Tabs in bottom of screen:
?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<FrameLayout
android:id="#+android:id/realtabcontent"
android:background="#drawable/bg_main_app_gradient"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TabWidget
android:id="#android:id/tabs"
android:background="#EAE7E1"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
</TabHost>
examle of code: https://stackoverflow.com/a/23150258/2765497
I think you have not search enough for your problem because you are searching using the wrong keyword.
What you are showing in 1st image at bottom of gmail app there are 4 menu and 5th overflow menu and upper at top action bar
You can place a menu at the bottom using a simple property in the manifest; one single line on main activity which showing action bar
android:uiOptions="splitActionBarWhenNarrow"
Like this :
<activity
android:name="com.example.HomeActivity"
android:screenOrientation="portrait"
android:uiOptions="splitActionBarWhenNarrow"
android:theme="#style/Theme.Sherlock.Light" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Google does not recommend to have Tabs at the bottom.
See the following official design pattern guide from Android,
And look for the section "Don't use bottom tab bars"
http://developer.android.com/design/patterns/pure-android.html
I wanted to post an update here. Bottom nav bars are now Android Canon. The main take-aways from this are:
1) Use bottom nav bars only for 3-5 icons. Any less, use tabs. Any more, use scrollable tabs (page down on that same link).
2) Avoid using a bottom nav bar and tabs together, and be sure the responsibilities of both are clearly separated if you do.
3) Bottom nav bars should be used for navigation not actions (use the ActionBar for those)
With the introduction of Bottom navigation.
https://material.google.com/components/bottom-navigation.html
You can do this
https://stackoverflow.com/a/36033640/6207502
Its very simple....
For simple tab bar we use
<?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
But in Bottom Tab bar we use
**
<?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</RelativeLayout>
</TabHost>**
The main thing is
android:layout_alignParentBottom=”true”;
I came across your question seeking to do the same thing, however according to androids development guidelines, you should not ever have a tab bar at the bottom, since this is an iOS feature...
Android Development Standards
You seem to have the bottom bar a bit confused. That's not a tab bar. The bottom bar is for actions, not navigating screens. For example, in the screenshot of the Gmail app you posted above, the bottom bar allows the user to: Compose Email, Search, Tag, Refresh and More. Refer: http://developer.android.com/design/patterns/actionbar.html
Technically these buttons do navigate the user to other screens but, the tab bar is usually used to "switch" screens. For example viewing content by category.
Hmm, but in the latest version of the Gmail app they have these action buttons on top. Sigh...
I want to create an activity that has sidebar on the left that is not changing between activity transitions (like split view in ios). It seems that I can do this with fragments but I need to add support for devices that is prior to HoneyComb.
I tried using a layout something like below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout android:layout_width="320dip"
android:layout_height="match_parent"
android:id="#+id/navLay"
>
<ListView
android:id="#+id/navList"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/contentLay"
><ListView
android:id="#+id/contentList"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
</LinearLayout>
But the first list is also updated on activity transition. I want to note that the activity is the same activity except the right list's data source is different. So it would be pretty good if I could save state and content of the left navigation bar while navigating. Any help will be appreciated.
Take a look at Support Package which provides classes for backward compatibility, and includes Fragment class also.
It seems that I can do this with fragments but I need to add support for devices that is prior to HoneyComb.
You can use fragments and some new APIs on those devices. Just use support package.
I'm currently trying to create an application according the customer's specs, and these include a double tab set.
Meaning that the user needs to click in a tab at the bottom, and for example in the first tab, he will also see a set of tabs at the top where he can click (but when clicking in these, only the ones at the top will change, while the tabs at the bottom will remain the same).
How could I perform this with Android?
So far I could only implement the normal tabs creating a root item 'TabHost' just like this:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</TabHost>
Thanks a lot in advance!
I found this, thanks to the ActionBar (and SherlockActionBar for pre-Honeycomb devices):
http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/app/ActionBarTabs.html
and also this:
http://www.youtube.com/watch?v=gMu8XhxUBl8
I have been reading your posts and they are very helpful. However, I really need your experienced advise in this and what would you do if you were me.
I am doing and application in which is has 4 tabs. The layout of the 4 tabs is similar (a table that has values in its cells and 3 buttons, and textview). The only thing that changes from one tab to another is the table values and textview. However, I need to share data between the tabs as the values on each tab are dependent on previous tab
How do you think I should approach? I have been reading that using views is generally recommended over activites. Can I use the same view layout for all the tabs?
Please any help on how you would design it will be great. I am on 2.1 and targetting pretty much all platforms .THANK U
PS: I tried (as an example) having textview under the framelayout, but the problem is that changing the text in Java code will make the textview changes in all the tabs. For some reason, I am feeling that having 4 text views (one for each tab) is kinda redundant and bad design but I dont know!
I would approach this by defining a layout, and using that same layout in each of your tabs. E.g.
public class MyTabActivity1 extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.tab_layout);
}
You can go for TabHost and TabWidget to solve your problem. Below is a sample demo for with the implementation. Tab_Layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical">
<TabHost android:id="#android:id/tabhost" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical"
android:paddingTop="4dip">
<TabWidget android:id="#android:id/tabs"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:orientation="horizontal" />
<FrameLayout android:id="#+android:id/tabcontent"
android:layout_width="match_parent" android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</TabHost>
</LinearLayout>
I'm trying to use a webview inside a tabhost that has 4 tabs - all linked to the same webview.
This is great except for one problem:
At start up the webview is black.
Clicking tab 2,3 or 4 makes it "come alive".
My quick fix was to use setCurrentTab(1) and then back to 0, but this looks ugly, so I figured I might as well ask for a solution as I cannot find anything online.
How can this be fixed? Below is my XML:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<android.webkit.WebView android:layout_width="fill_parent" android:id="#+id/webview" android:layout_height="fill_parent" android:scrollbars="none"/>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
/>
</LinearLayout>
</TabHost>
Update:
Putting the webview outside of the framelayout causes the app to crash at startup with following error:
java.lang.RuntimeException: Could not create tab content because could not find view with id 2131099648
This happens when I in the onCreate method initialize my tabhost like this:
mTabHost = getTabHost();
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("Tab1", getResources().getDrawable(R.drawable.ligenu)).setContent(R.id.webview));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("Tab2", getResources().getDrawable(R.drawable.mad)).setContent(R.id.webview));
mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("Tab3", getResources().getDrawable(R.drawable.godpris)).setContent(R.id.webview));
mTabHost.addTab(mTabHost.newTabSpec("tab_test4").setIndicator("Tab4", getResources().getDrawable(R.drawable.om)).setContent(R.id.webview));
Break through!
I found the answer to my own question in another SO post that I didn't stumble upon in the past:
Why is my TabHost's FrameLayout's only child loaded with visibility = View.GONE?
Simply setting:
tabHost.getCurrentView().setVisibility(View.VISIBLE);
That fix the issue!
I was having similar problem. As suggested, I put tabHost.getCurrentView().setVisibility(View.VISIBLE); to the code, the webview still come out blank. After a few more searches, this answer saved me. It turns out that it's important to set android:layout_height="wrap_content" to the webview.