I'm trying to do a simple tab app in android with two tabs. My problem is that when I put this code, in the tab, only is shown the text, but no the icons.
If I put the text to "" the icon is shown.
Could someone help me? My android version is 4.0.3.
Thanks a lot.
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+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:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#android:id/tabs" />
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#android:id/tabcontent" >
<LinearLayout android:id="#+id/tab1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView android:id="#+id/textView1"
android:text="Contenido Tab 1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout android:id="#+id/tab2"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView android:id="#+id/textView2"
android:text="Contenido Tab 2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
and the activity code is
public class TabTestActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Resources res = getResources();
TabHost tabs=(TabHost)findViewById(R.id.tabhost);
tabs.setup();
TabHost.TabSpec spec=tabs.newTabSpec("mitab1");
spec.setContent(R.id.tab1);
spec.setIndicator("sss",
res.getDrawable(android.R.drawable.ic_btn_speak_now));
tabs.addTab(spec);
spec=tabs.newTabSpec("mitab2");
spec.setContent(R.id.tab2);
spec.setIndicator("TAB2",
res.getDrawable(android.R.drawable.ic_dialog_map));
tabs.addTab(spec);
tabs.setCurrentTab(0);
}
as you can see is very simple. But when I write spec.setIndicator("",
res.getDrawable(android.R.drawable.ic_dialog_map));
I can see the icon, bu when I write spec.setIndicator("TAB2",
res.getDrawable(android.R.drawable.ic_dialog_map));
I can only see TAB2, but no both of them.
It seems that there are no enougth space to show both. So I've tried to get increase the tab height with this
tabs.getTabWidget().getChildAt(1).getLayoutParams().height = 150;
but not seems to work.
I replaced the label name with null value.
Now I can see the icon alone..
Could not find out any other solution.
TabHost.TabSpec spec=tabs.newTabSpec("mitab1");
spec.setIndicator("",
res.getDrawable(android.R.drawable.ic_btn_speak_now));
Intent sssIntent = new Intent(this, First.class);
spec.setContent(sssIntent);
tabs.addTab(spec);
//your are over loading the 1st one so you can see only the last added one
TabHost.TabSpec spec=tabs.newTabSpec("mitab1");
spec.setIndicator("sss",
res.getDrawable(android.R.drawable.ic_btn_speak_now));
Intent sssIntent = new Intent(this, First.class);
spec.setContent(sssIntent);
tabs.addTab(spec);
TabHost.TabSpec spec2=tabs.newTabSpec("mitab2");
spec2=tabs.newTabSpec("mitab2");
spec2.setIndicator("TAB2",
res.getDrawable(android.R.drawable.ic_dialog_map));
Intent sssIntent2 = new Intent(this, Second.class);
spec2.setContent(sssIntent2 );
tabs.addTab(spec2);
The visibility of the icon (together with the label) in the tab depend on the target device and the android platform version.
I had a deeper look into this issue and added more details and a solution at your other (quite similiar) question about this problem; It can be found here:
https://stackoverflow.com/a/11379708/414581
Adding this in AndroidManifest.xml solved the issue.
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#android:style/Theme.NoTitleBar">
</application>
Related
I am very new to Android so go easy on me. I have implemented an activity that makes use of the TabSpec to make 2 tabs. I can get them running with content loading from the xml layouts.
My question is how can I add/change content of one of the tabs? Lets use adding a textview as an example. How would I do this?
//set up tabs
TabHost tabs=(TabHost)findViewById(R.id.tabhost);
tabs.setup();
//indicate setting for first tab
TabHost.TabSpec spec=tabs.newTabSpec("tag1");
spec.setContent(R.id.tab1);
spec.setIndicator("Templates");
tabs.addTab(spec);
//indicate setting second tab
spec=tabs.newTabSpec("tag2");
spec.setContent(R.id.tab2);
spec.setIndicator("Stat Sheets");
tabs.addTab(spec);
Here is my XML
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+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">
<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
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
/*I want to add content here at runtime*/
</LinearLayout>
<Button android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="A semi-random button"
/>
</FrameLayout>
Turns out TabSpec approach is a little dated. I turned to properly implementing fragments which turned out to be much more concise and straightforward. I followed this tutorial specifically which really helped.
http://www.androidbegin.com/tutorial/implementing-fragment-tabs-in-android/
I am trying to get this TabHost to work. When I add the TabHost to the xml layout and run the program I can see the different content for each tab stacked on top of each other. This tells me that the layout is working properly. I then add my spec code to the activity and then if closes the program on the emulator when I navigate to this screen.
So here is my XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/tWelcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/bNewTask"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Task" />
<TabHost
android:id="#+id/myTabs"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#+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" >
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
Here now is my Activity code: (The only part that matters...)
welcomeName = (TextView) findViewById(R.id.tWelcome);
Test = (TextView) findViewById(R.id.tTest);
newTask = (Button) findViewById(R.id.bNewTask);
myTask = (ListView) findViewById(R.id.listView);
TabHost th = (TabHost) findViewById(R.id.myTabs);
welcomeName.setText("Welcome " + ToDoActivity.myUser.getName() + "!");
th.setup();
TabSpec specs = th.newTabSpec("tag1");
specs.setContent(R.id.tab1);
specs.setIndicator("All");
th.addTab(specs);
specs = th.newTabSpec("tag2");
specs.setContent(R.id.tab2);
specs.setIndicator("Personal");
th.addTab(specs);
This is the Android tutorial page for tabs:
http://developer.android.com/resources/tutorials/views/hello-tabwidget.html
It has information and requirements about Tabs and it gives lots of sample code. You should be able to copy-paste from there and then edit.
Specifically, I'd change the ids for all the Tab elements to be the suggested Android ids:
android:id/tabhost
android:id/tabs
android:id/tabcontent
A couple possibilities come to mind.
If you're using a TabActivity (not a requirement, but makes things easier), the tabhost must have android:id="#android:id/tabhost" as the id.
I've also seen it said that the tabhost must be the root node. I cannot confirm that using the android docs. I'd probably make this change after all other avenues have failed (or someone confirms that it is true).
If you are using a TabActivity, you don't need to reference the tabhost by id, or use the setup() method. I see you are using the setup() method, but I can;t tell if your activity is a TabActivity. If it is, maybe that's causing your issue.
Following is the method I use for a tab layout setup and it works for me. Note that this assumes the tabhost as the root node of the layout and it has android:id/tabhost as the id and it is a TabActivity.
tabhost code:
public class Tabs extends TabActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_layout);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;
spec = tabHost.newTabSpec("tag1").setIndicator("All").setContent(R.id.tab1);
tabHost.addTab(spec);
spec = tabHost.newTabSpec("tag2").setIndicator("Personal").setContent(R.id.tab2);
tabHost.addTab(spec);
}
}
Hope this helps! (Be sure to click the check mark to accept the answer if it solves your problem).
I've created a TabHost and assigned 4 activity intents with tabs and these seems to work just fine. My only problem is that the activity content is not showing within the framelayout #tabcontent in my tabhost view.
I've followed the official reference and scanned the internet for a solution but I can't see what the problem is.
The Log.v("Activity", "Reports") is logged in ant, so it does execute the activity. Therefore I'm guessing its the setContentView() in my ReportsActivity that is causing the problem. But I'm new to this so I can't really tell. (There are no generated errors)
This is my tabhost
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/tabhost"
android:background="#FFFFFF">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5sp"
android:layout_weight="1" />
</LinearLayout>
</TabHost>
This is how I add tabs in my TabActivity
// Glob
Intent intent;
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;
Resources res = getResources();
// Reports tab
intent = new Intent().setClass(this, ReportsActivity.class);
spec = tabHost.newTabSpec("reports")
.setIndicator(
res.getText(R.string.reports),
res.getDrawable(R.drawable.reports))
.setContent(intent);
tabHost.addTab(spec);
And this is my content activity (R.layout.reports = linearlayout with a textview)
public class ReportsActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.reports);
Log.v("Activity", "Reports");
}
}
Try implementing your TabSpec like this:
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
spec = tabHost.newTabSpec("reports")
.setIndicator(
res.getText(R.string.reports),
res.getDrawable(R.drawable.reports))
.setContent(intent);
This is because you have chosen a LinearLayout which defaults to Horizontal layout.
If you set android:orientation="vertical" inside the LinearLayout tag that should fix your problem
right now I'm using in my application tabhost with single activity and separate views.
Tab Activity:
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabs = (TabHost) findViewById(R.id.tabhost);
tabs.setup();
TabHost.TabSpec spec = tabs.newTabSpec(TAB_HOTELS);
spec.setContent(R.id.tab1);
spec.setIndicator("Hotels");
tabs.addTab(spec);
spec = tabs.newTabSpec(TAB_LAST_MINUTE);
spec.setContent(R.id.tab2);
spec.setIndicator("Last Minute");
tabs.addTab(spec);
Layout
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+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 android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/tab1"
android:orientation="vertical">
<ListView android:id="#+id/listaLocalita"
android:layout_width="fill_parent" android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/tab2"
android:orientation="vertical" android:paddingTop="60px">
<TextView android:layout_width="fill_parent"
android:layout_height="100px" android:text="This is tab 2"
android:id="#+id/txt2" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
And things are working quite well as long as i'm using one level depth. Unfortunately now I need to make one of the tab to work like following:
Tab loading ListView with the list of cities, User clicks on city name, tab's content is replaced with the list of the Hotels, user choose a hotel and always in the the same tab, hotel's info is loaded.
How can i achieve this scenario? LayoutInflater?
Thanks in advance.
you can use intent to set Activity as your tab content, and this activity can call other activities, either listView or any other.
/** tid1 is firstTabSpec Id. Its used to access outside. */
TabSpec MainTab = tabHost.newTabSpec("tag1");
TabSpec SearchTab = tabHost.newTabSpec("tag2");
TabSpec MessageTab = tabHost.newTabSpec("tag3");
TabSpec ServicesTab = tabHost.newTabSpec("tag4");
TabSpec SettingsTab = tabHost.newTabSpec("tag5");
MainTab.setIndicator("Main", res.getDrawable(R.drawable.anchor_36));
MainTab.setContent(new Intent(this, MainView.class));
SearchTab.setIndicator("Search", res.getDrawable(R.drawable.clock_36));
SearchTab.setContent(new Intent(this, SearchView.class));
MessageTab.setIndicator("Messages", res
.getDrawable(R.drawable.dialog_36));
MessageTab.setContent(new Intent(this, MessagesView.class));
ServicesTab.setIndicator("Services", res
.getDrawable(R.drawable.cloud_36));
ServicesTab.setContent(new Intent(this, ServicesView.class));
SettingsTab.setIndicator("Settings", res
.getDrawable(R.drawable.settings_36));
SettingsTab.setContent(new Intent(this, SettingsView.class));
/** Add tabSpec to the TabHost to display. */
tabHost.addTab(MainTab);
tabHost.addTab(SearchTab);
tabHost.addTab(MessageTab);
tabHost.addTab(ServicesTab);
tabHost.addTab(SettingsTab);
Now in the loaded activity you can use the code like
StartActivity(new intent(currentActivity.this, newActivity.class));
this will work for you.
can anybody tell how to reduce the height of tab bar and display tab bar in bottom
Thanks
use the following line of code to change the height, this is the last line in my onCreate method
tabHost.getTabWidget().getChildAt(0).getLayoutParams().height =35;
Add the following method to your class that extends TabActivity
public void addNewTab(Context context, String title, int height){
TabHost tabHost = getTabHost(); // The activity TabHost
Intent intent = new Intent().setClass(context, HelloTabsActivity.class);
TabHost.TabSpec spec = tabHost.newTabSpec(title.toLowerCase()).setIndicator(title).setContent(intent);
tabHost.addTab(spec);
int totalTabs = tabHost.getTabWidget().getChildCount();
((RelativeLayout)tabHost.getTabWidget().getChildTabViewAt(totalTabs-1)).removeViewAt(0);
((TextView)((RelativeLayout)tabHost.getTabWidget().getChildTabViewAt(totalTabs-1)).getChildAt(0)).setHeight(30);
tabHost.getTabWidget().getChildAt(totalTabs-1).getLayoutParams().height = height;
}
then call it like this addNewTab(this, "tab title", 30);
Note that you have to change the height of each tab. For two tabs:
#Override
public void onCreate(Bundle savedInstanceState) {
... // other code
final int height = 45;
mTabHost.getTabWidget().getChildAt(0).getLayoutParams().height = height;
mTabHost.getTabWidget().getChildAt(1).getLayoutParams().height = height;
}
You could either
Build your own tab using a TableLayout at the bottom of the screen - which gives you quite a lot of flexibility
or
Modify use the existing TabHost/TabWidget - works in principle but I don't know how to reduce the tab bar height. Works like that:
Layout file main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabHost android:id="#+id/tab_host"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TabWidget android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#android:id/tabs"
android:layout_gravity="bottom" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<LinearLayout android:id="#+id/first_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="First Tab" />
<!-- Replace TextView with your layout content for this tab -->
</LinearLayout>
<LinearLayout android:id="#+id/second_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="Second Tab" />
<!-- Replace TextView with your layout content for this tab -->
</LinearLayout>
<LinearLayout android:id="#+id/third_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="One More Tab" />
<!-- Replace TextView with your layout content for this tab -->
</LinearLayout>
<LinearLayout android:id="#+id/edit_item_text_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</FrameLayout>
</TabHost>
</LinearLayout>
Source code of your activity, in this case StartActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class StartActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tab_host = (TabHost) findViewById(R.id.tab_host);
tab_host.setup();
TabSpec tabspec1 = tab_host.newTabSpec("TAB_1");
tabspec1.setIndicator("Tab 1");
tabspec1.setContent(R.id.first_tab);
tab_host.addTab(tabspec1);
TabSpec tabspec2 = tab_host.newTabSpec("TAB_2");
tabspec2.setIndicator("Tab 2");
tabspec2.setContent(R.id.second_tab);
tab_host.addTab(tabspec2);
TabSpec tabspec3 = tab_host.newTabSpec("TAB_3");
tabspec3.setIndicator("Tab 3");
tabspec3.setContent(R.id.third_tab);
tab_host.addTab(tabspec3);
tab_host.setCurrentTab(0);
}
}
Turns out to look like:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:padding="1dp">
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent" android:layout_height="60dp"
android:layout_alignParentBottom="true" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:padding="1dp">
</FrameLayout>
</RelativeLayout>
Most likely you'll have to implement tabs by your own. As far as I know that's impossible with regular android tabs.
<TabWidget android:id="#android:id/tabs"
android:tabStripEnabled="false"
android:padding="0dip"
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
Working with tabs in the Eclipse "graphical layout" mode is not quite intuitive.
NOTE - Currently I am not able to attach pictures to this answer as my reputation is
below 10. Maybe in the future I will edit it and add them.
1) To change tab bar height:- Select "tabs (TabWidget)" in the Outline view. A selection/resize box should appear around the tab bar and its height can now be modified. I have made it thinner in picture1.
2) To move the tab bar to bottom:- Select "tabs (TabWidget)" in the Outline view and drop it into the LinearLayout above it (as marked in the picture 1). This will send the "tabs (TabWidget)" to the bottom of the list (see picture2). Tabs Bar might disappear at this stage. So adjust the weights of "tabcontent" & "tabs (TabWidget)" till it looks ok. I have used 10 & 1 respectively.
3) To bring tab2 to the top:- After design/layout of tab1 is complete, we want to work on the next tab. But Eclipse does not allow selecting it. To bring tab2 to the top select tab1 and drop it into tabcontent. This will send tab1 to the bottom of the list and tab2 to the top.
Later when work on tab2 is complete, tab3 can be brought up.
This pretty roundabout way of working in graphical layout mode but maybe better than typing xml code.
Cheers