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
Related
I'm getting a resource not found error when I try to do this:
TabWidget tabz = FindViewById<TabWidget>(Resource.Id.tabs);
compiler doesn't see the TabWidget even when it's clearly labeled by id in my Main.axml file
Error CS0117 'Resource.Id' does not contain a definition for 'tabs'
Here's my full code:
<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"
android:visibility="visible" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
EDIT, sorry, this is the full code... I don't know why I didn't copy this last time. The above example is missing TabHost
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TabHost
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/tabHost1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/linearLayout1">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</TabHost>
</LinearLayout>
How can I force the compiler to recognize my tabs id? I've tried rebuilding the resource.designer.cs .. putting the declaration of TabWidget inside all of the activities... nothing works. My C# can't see the TabWidget
full project can be found here:
https://github.com/hexag0d/BitChute_Mobile_Android_a2
I also tried this and it didn't work
Xamarin Android Resource file not found
thanks, in advance
The issue is not with the visual studio compiler but the way that you have declared the id for your View,
If you check this blog by James White you will see how Id and the Layout Attributes actually work in Android,
The Right way of declaring the Id would be something like this android:id="#+id/tabs" whereas what you are doing is this android:id="#android:id/tabs"
Hence, When you do add them and try to find it using Resource.Id.tabs, There is nothing available in Id by the name tabs as it was never added by the Xamarin ResourceDesginer.cs file.
So the end result should actually be something like this :
<TabHost
android:id="#+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"></TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffc916"
android:orientation="vertical">
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
Also, note that I have replaced all the fill_parent's with match_parent's the reason behind it being that fill parent is now obsolete or you can say replaced (After API-8) and hence must not be used, which can be found here.
Update:
I have updated the way tab host works, Also updated the XML above and I am adding a reference link where you can find the right way of using both the TabHost and TabWidget, Also a good SO example for the same.
About the questions in your comment:
1,
that is very good advice, but one note is that when
SetContentView(localLayout); is used inside an activity that already
has a content view, it crashes the app.
The app crashed because localLayout in SetContentView(localLayout) is a LinearLayout but a TabWidget needs a TabHost. So you can directly use:
SetContentView(Resource.Layout.Main);
where Main.xaml is like:
<?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"
android:theme="#style/MyTheme">
<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"
android:layout_weight="0.0"
android:visibility="visible" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
2,
LinearLayout localLayout =
FindViewById(Resource.Layout.Main); View
whichYouWantToUse_findViewById =
LayoutInflater.Inflate(Resource.Layout.Main, null); TextView tv =
FindViewById(Resource.Id.textView169); TabHost _tabHost =
(TabHost)whichYouWantToUse_findViewById.FindViewById(Resource.Id.tabhost);
' still can't see the tabhost ... I'm losing my mind here
The reason why you cannot see the tabhost is, firt, TabHost is FrameLayout, not LinearLayout, second, Resource.Id.tabhost should be Android.Resource.Id.TabHost. So I edited your code to :
FrameLayout localLayout = FindViewById<FrameLayout>(Resource.Layout.Main);
whichYouWantToUse_findViewById = LayoutInflater.Inflate(Resource.Layout.Main, null);
//TextView tv = FindViewById<TextView>(Resource.Id.textView1);
TabHost _tabHost = (TabHost)whichYouWantToUse_findViewById.FindViewById(Android.Resource.Id.TabHost);
3,
So the interesting thing is if I change tabhost to tahost ala
android:id="#+id/tahost" the resource appears in the designer but when
I change to android:id="#+id/tabhost" the resource disappears.. very
strange..
The id of TabHost need always be #android:id/tabhost", it cannot be modified to tahost or any others.
So the code in the onCreat Method is like this:
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
View whichYouWantToUse_findViewById = LayoutInflater.Inflate(Resource.Layout.layout1, null);
TextView textInAnotherLayout = (TextView)whichYouWantToUse_findViewById.FindViewById(Resource.Id.textView1);
textInAnotherLayout.Text = "Yeah";
TabHost tabHost = FindViewById<TabHost>(Android.Resource.Id.TabHost);
TabWidget tabWidget = tabHost.TabWidget;
var tabContent = tabHost.TabContentView;
FrameLayout localLayout = FindViewById<FrameLayout>(Resource.Layout.Main);
whichYouWantToUse_findViewById = LayoutInflater.Inflate(Resource.Layout.Main, null);
TabHost _tabHost = (TabHost)whichYouWantToUse_findViewById.FindViewById(Android.Resource.Id.TabHost);
The following is the old answer.
Answer modified: The way to get TabHost and TabWidget in Activity:
TabHost tabHost = this.TabHost;
TabWidget tabWidget = tabHost.TabWidget;
The way to use one resource from one XAML file in the activity for
another:
LinearLayout localLayout = FindViewById<LinearLayout>(Resource.Layout.Main);
SetContentView(localLayout);
View whichYouWantToUse_findViewById = LayoutInflater.Inflate(Resource.Layout.layout1, null);
Button button1 = (Button)whichYouWantToUse_findViewById.FindViewById(Resource.Id.button1);
I download your project and fixed this problem by modifying the property of >android:id
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'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.
I have a simple tabController with 4 tabs, but I want the icons images to take up the entire tab. I also want the text for the tab over the top of the icon image. I just need a couple hints to get going in the right direction.
I cannot post images of what my tab looks like (not enough reputation points). But basically I need to get ride of all the padding around the tab icons.
My icons are png file. My tabControllerView is extending TabActivity and I am using a tab_layout.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"
>
<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"
/>
</LinearLayout>
</TabHost>
For each tab I am doing this in the onCreate of my tabControllerView:
spec = tabHost.newTabSpec("home").setIndicator("Home",
res.getDrawable(R.drawable.ic_tab_home)).setContent(intent);
tabHost.addTab(spec);
You should be able to do that with something like this:
for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++){
tabHost.getTabWidget().getChildAt(i).setPadding(0,0,0,0);
}
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>