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
Related
I have a little problem using Tabs with Views.
First I just copied the sample code where Tabs are used with activitys:
My LayoutFile looks 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">
<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>
And this is my Java-code:
public class MyActivity extends TabActivity{
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState)
setContentView(R.layout.main);
TabHost tH = getTabHost();
Indent intent = new Intent().setClass(this, AnotherActivity.class);
// Initialize a TabSpec for each tab and add it to the TabHost
//TextView Test = new TextView(this);
//Test.setText("test");
tH.addTab(tH.newTabSpec("t1").setIndicator("Tab1").setContent(intent));
tH.setCurrentTab(0);
}
}
And this works as expected.
But when I uncomment the TextView-lines and call setContent(Test.getId()) instead of setContent(intent), the app crashes.
I also tried to create a textview in the layoutfile, and call setContent(R.id.test),
that also makes it crash.
So this is one problem.
The seccond point is. I do not want to use activitys, because i want to be able to call methods on those classes, which shall represent the Tab-content.
So my original idea is, to derive some classes from view. 1 for each tab, and pass their ids. But therefor the codesample above needs to work first.
greetings Uzaku
I know you said you tried a TextView in the layout file but this should work...
Change the FrameLayout section as follows...
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
<TextView
android:id="#+id/test"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="TEST" />
</FrameLayout>
Then in your code do the following...
tH.addTab(tH.newTabSpec("t1").setIndicator("Tab1").setContent(R.id.test));
Forgive my simple questions, as I'm new to android. :)
Why is the text property of the textview not displaying inside this tab?
Screen: Here
Here's my code..
MapTab2.java
package com.test.maptab2;
import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
public class MapTab2 extends TabActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost.TabSpec spec;
spec = getTabHost().newTabSpec("tab1");
spec.setContent(R.id.mapstub);
spec.setIndicator("Map");
getTabHost().addTab(spec);
spec = getTabHost().newTabSpec("tab2");
spec.setContent(R.id.detailstub);
spec.setIndicator("Detail");
getTabHost().addTab(spec);
getTabHost().setCurrentTab(0);
}
}
Main.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">
<!-- Tab-switch panel -->
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<!-- Tab contents -->
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Map here -->
<TextView android:id="#+id/mapstub"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="map"/>
<!-- Other stuff -->
<TextView android:id="#+id/detailstub"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="detail"/>
</FrameLayout>
</LinearLayout>
</TabHost>
I'm trying to build my way up to displaying a map within a tab. Best to understand the basics first, I thought. :')
I actually have had more luck setting the gravity in the parent view (in this case, your LinearLayout), then setting the layout_gravity attributes in the child views (in your case, your TextViews, etc).
To get this simple example working, I would change all your "fill_parent" attributes to "wrap_content" (or 0.0dp as another alternative) - then you can start playing with the different attributes to get everything positioned exactly how you would like.
Try adding android:gravity="center" in every TextView inside a Tab.
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);
}
The default style for the Android TabHost works fine for straight Android systems. However, on HTC Sense, they use dark text on a dark background, which is unreadable.
What's the easiest way to have a TabHost that has visible text across all the various flavors of android skins? I would prefer to not have to make a completely custom look-and-feel if possible.
My targetSDK is 10 and my minSDK is 7.
I'll give you the advise to get completely independent from the TabWidget and create your own Navigation, which you can customize however you want and don't bother with the stiff TabWidget. I don't mean to throw away the awesome TabHost, because it's easy to use the TabHost with a custom navigation:
First set your TabWidget as gone:
<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">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"/>
And then create you own navigation in place of it. You could also create a menu (with the hardware menu button) or something like this:
<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">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"/>
<!-- content of your tabs-->
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/slider_stub"
android:background="#color/overview_banner_bg_down"/>
<!-- custom slider with horizontal scrollable radio buttons-->
<com.example.WrappingSlidingDrawer
android:id="#+id/tab_slider"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:handle="#+id/tab_slider_handle"
android:content="#+id/tab_scroller">
<RelativeLayout
android:id="#+id/tab_slider_handle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/def_slider">
</RelativeLayout>
<HorizontalScrollView
android:id="#+id/tab_scroller"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fadeScrollbars="false"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:scrollbarTrackHorizontal="#drawable/scrollbar_horizontal_track"
android:scrollbarThumbHorizontal="#drawable/scrollbar_horizontal_thumb"
android:fillViewport="true"
android:scrollbarSize="3dip"
android:fadingEdgeLength="80dp"
android:background="#343534">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RadioGroup
android:id="#+id/custom_tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:orientation="horizontal"
android:checkedButton="#+id/tab_overview">
<RadioButton
android:id="#+id/tab_overview"
android:layout_height="55dp"
android:layout_width="55dp"
android:button="#null"
android:background="#drawable/def_checktab_overview"/>
<RadioButton
android:id="#+id/tab_news"
android:layout_height="55dp"
android:layout_width="55dp"
android:button="#null"
android:background="#drawable/def_checktab_news"/>
.....etc....your tabs......
</RadioGroup>
</RelativeLayout>
</HorizontalScrollView>
</com.example.WrappingSlidingDrawer>
</RelativeLayout>
</TabHost>
What you have to do in code now:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_tab_layout);
setTabs();
RadioGroup tabs = (RadioGroup) findViewById(R.id.custom_tabs);
tabs.setOnCheckedChangeListener(new OnCheckedChangeListener() {
#Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.tab_overview:
getTabHost().setCurrentTab(0);
break;
case R.id.tab_news:
getTabHost().setCurrentTab(1);
break;
....etc.....
}
}
});
}
/**
* Delegate tab creation and adding.
*/
private void setTabs() {
// add the necessary tabs
addTab(R.string.tab_overv_tag, OverviewActivityGroup.class);
addTab(R.string.tab_news_tag, NewsActivityGroup.class);
.....etc.....
}
/**
* Create a tab with an Activity and add it to the TabHost
*
* #param tagId
* resource id of the string representing the tag for finding the tab
* #param activity
* the activity to be added
*/
private void addTab(int tagId, Class<? extends ActivityGroup> activity) {
// create an Intent to launch an Activity for the tab (to be reused)
Intent intent = new Intent().setClass(this, activity);
// initialize a TabSpec for each tab and add it to the TabHost
TabHost.TabSpec spec = usedTabHost.newTabSpec(getString(tagId));
// use layout inflater to get a view of the tab to be added
View tabIndicator = getLayoutInflater().inflate(R.layout.tab_indicator, getTabWidget(), false);
spec.setIndicator(tabIndicator);
spec.setContent(intent);
usedTabHost.addTab(spec);
}
The whole indicator stuff is not needed btw.^^ In your ActivityGroups you have to set the appropriate Activities, etc. You know the stuff.
You can use anything for your navigation and can still use the advantages of a TabHost. Just don't bother with that TabWidget anymore. ;)
After some research I think the best option would be to use ActionBar's tabbed interface since it looks much more easier to style. The ActionBarSherlock provides compatibility layer for ActionBar for devices starting from Android 1.6. Here you can look at examples on what you can get using the library.
I never designed UIs (more of a middleware guy) before so I apologize if the question is stupid. I am designing a UI to look something like the following:
ImageView ImageView
TabHost
Tab 0 ------ Tab 1 ------ Tab 2
-----INSIDE EACH TAB-----
TextView
ListView
- Consists of ImageView TextView
The problem is I think I am following a very inefficient way of doing the whole stuff. The onCreate method is as follows:
CODE:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost mTabHost = getTabHost();
Drawable Tab1Icon = getResources().getDrawable(R.drawable.tab1_icon);
Drawable Tab2Icon = getResources().getDrawable(R.drawable.tab2_icon);
Drawable Tab3Icon = getResources().getDrawable(R.drawable.tab3_icon);
mTabHost.addTab(mTabHost.newTabSpec("Tab1").setIndicator("Tab 1", Tab1Icon).setContent(new Intent(this, Tab1.class)));
mTabHost.addTab(mTabHost.newTabSpec("Tab2").setIndicator("Tab 2", Tab1Icon).setContent(new Intent(this, Tab2.class)));
mTabHost.addTab(mTabHost.newTabSpec("Tab3").setIndicator("Tab 3", Tab1Icon).setContent(new Intent(this, Tab3.class)));
mTabHost.setCurrentTab(0);
}
This program crashes on CupCake (v1.5) complaining about StackOverflowException but runs well on Donut (v1.6). This is my 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"
android:background="#color/application_background"
>
<TableLayout
android:id="#+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="0"
android:background="#color/application_background">
<TableRow>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView id="#+id/picview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/leftlogo"
android:paddingRight="105sp"
/>
<Button
android:id="#+id/picview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rightlogo"
/>
</LinearLayout>
</TableRow>
<TableRow>
<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">
</FrameLayout>
</LinearLayout>
</TabHost>
</TableRow>
</TableLayout>
</LinearLayout>
Any suggestions regarding the design please?
Thanks
If you are getting StackOverflowExceptions, your UI is too complex. Fire up hierarchyviewer and find ways to remove some layers.
One way to simplify everything and remove layers is to supply the tab contents as Views, not Intents pointing to Activities.
You can just pass the R.drawable ID of the icon to setIndicator().
You should not have the TableLayout inside a LinearLayout (why bother with the LinearLayout?) or a LinearLayout inside of a TableRow (TableRow is a LinearLayout, for all intents and purposes). Please consider dumping the entire TableLayout/TableRow/LinearLayout stuff and just use a single RelativeLayout.