Hi im trying to style my tabactivity im using this:
public class TabContainer extends TabActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_container);
//TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
TabHost tabHost = getTabHost();
// Tab for Radio
TabSpec radioTabSpec = tabHost.newTabSpec("Radio Online");
// setting Title and Icon for the Tab
radioTabSpec.setIndicator("Radio Online", getResources().getDrawable(R.drawable.menu_radio));
Intent radioIntent = new Intent(this, MainActivity.class);
radioTabSpec.setContent(radioIntent);
// Tab for Facebook
TabSpec facebookTabSpec = tabHost.newTabSpec("Facebook");
facebookTabSpec.setIndicator("Facebook", getResources().getDrawable(R.drawable.menu_facebook));
Intent facebookIntent = new Intent(this, FacebookActivity.class);
facebookTabSpec.setContent(facebookIntent);
// Tab for Twitter
TabSpec twitterTabSpec = tabHost.newTabSpec("Twitter");
twitterTabSpec.setIndicator("Twitter", getResources().getDrawable(R.drawable.menu_twitter));
Intent twitterIntent = new Intent(this, TwitterActivity.class);
twitterTabSpec.setContent(twitterIntent);
// Tab for About
TabSpec aboutTabSpec = tabHost.newTabSpec("Acerca");
aboutTabSpec.setIndicator("Acerca", getResources().getDrawable(R.drawable.menu_about));
Intent aboutIntent = new Intent(this, AboutActivity.class);
aboutTabSpec.setContent(aboutIntent);
// Adding all TabSpec to TabHost
tabHost.addTab(radioTabSpec); // Adding photos tab
tabHost.addTab(facebookTabSpec); // Adding songs tab
tabHost.addTab(twitterTabSpec); // Adding videos tab
tabHost.addTab(aboutTabSpec); // Adding videos tab
}
}
here 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="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>
</TabHost>
tabs style example:
i know tabactivity is old but i cant find any other way to make it work for android 2.3 and later now my tabs are showing totally black, i would like to style it to make it more nice.
thank you very much.
Why cant you use fragments.To support in all versions, use Action bar Sherlock library
http://wptrafficanalyzer.in/blog/adding-navigation-tabs-containing-listview-to-action-bar-in-pre-honeycomb-versions-using-sherlock-library/
FYI TabActivity is deprecated.
Instead, why don't you use ActionBar with tabs and to provide compatibility, you can use ActionBarSherlock.
What is ActionBarSherlock?
ActionBarSherlock is an extension of the support library designed to
facilitate the use of the action bar design pattern across all
versions of Android with a single API.
Related
I am trying to show the tabs at the bottom of the screen. I have the following code and it is showing tabs at the bottom in design preview and emulator but when I test the code on real device tabs are showing at the top. Can't understand why. I already tried the answers on stackoverflow and other sites like: but no use
Android: Tabs at the BOTTOM
How to show tabs At Bottom rather then at top?
Android having tabs at the bottom of screen?
This is the code:
<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">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_weight="1"/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginBottom="-4dp"
android:gravity="center_vertical|center_horizontal|bottom" />
</LinearLayout>
And this is my activity code:
public class AndroidTabLayoutActivity extends TabActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
// Tab for Photos
TabHost.TabSpec photospec = tabHost.newTabSpec("");
// setting Title and Icon for the Tab
photospec.setIndicator("", getResources().getDrawable(R.drawable.icon_photos_tab));
Intent photosIntent = new Intent(this, PhotosActivity.class);
photospec.setContent(photosIntent);
// Tab for Songs
TabHost.TabSpec songspec = tabHost.newTabSpec("");
songspec.setIndicator("", getResources().getDrawable(R.drawable.icon_songs_tab));
Intent songsIntent = new Intent(this, SongsActivity.class);
songspec.setContent(songsIntent);
//Tab for Lists
TabHost.TabSpec listspec = tabHost.newTabSpec("");
listspec.setIndicator("", getResources().getDrawable(R.drawable.icon_lists_tab));
Intent listIntent = new Intent(this, ListsActivity.class);
listspec.setContent(listIntent);
// Tab for Videos
TabHost.TabSpec videospec = tabHost.newTabSpec("");
videospec.setIndicator("", getResources().getDrawable(R.drawable.icon_videos_tab));
Intent videosIntent = new Intent(this, VideosActivity.class);
videospec.setContent(videosIntent);
// Adding all TabSpec to TabHost
tabHost.addTab(photospec); // Adding photos tab
tabHost.addTab(songspec); // Adding songs tab
tabHost.addTab(listspec); //Adding lists tab
tabHost.addTab(videospec); // Adding videos tab
// Set drawable images to tab
tabHost.getTabWidget().getChildAt(1).setBackgroundColor(Color.parseColor("#1D2023"));
tabHost.getTabWidget().getChildAt(2).setBackgroundColor(Color.parseColor("#1D2023"));
tabHost.getTabWidget().getChildAt(3).setBackgroundColor(Color.parseColor("#1D2023"));
// Set Tab1 as Default tab and change image
tabHost.getTabWidget().setCurrentTab(0);
tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#1D2023"));
}
}
any help will be greatly appreciated ...
I want to change tab indicator color in android. Default color for tab host in android app is blue. I want to change to some other color. Please help me.
My code is as follows:
`
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-4dp"
android:layout_weight="0" />
<View
android:layout_width="fill_parent"
android:background="#color/btn_color"
android:layout_height="5dp"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<Button
android:id="#+id/buttonBookConfirm"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:textColor="#color/btn_text"
android:background="#color/btn_color"
android:layout_alignParentBottom="true"
android:text="#string/btn_text" />
</LinearLayout>
`
My java code is as follows:
`
public class TabHostActivity extends TabActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_host);
Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec; // Reusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab
// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(TabHostActivity.this,HomeActivity.class);
spec = tabHost.newTabSpec("home")
.setIndicator("", res.getDrawable(R.drawable.plays))
.setContent(intent);
tabHost.addTab(spec);
// Do the same for the other tabs
intent = new Intent().setClass(TabHostActivity.this, AboutActivity.class);
spec = tabHost.newTabSpec("about")
.setIndicator("", res.getDrawable(R.drawable.movies))
.setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(TabHostActivity.this, ContactActivity.class);
spec = tabHost
.newTabSpec("contact")
.setIndicator("",
res.getDrawable(R.drawable.events))
.setContent(intent);
tabHost.addTab(spec);
//set tab which one you want open first time 0 or 1 or 2
tabHost.setCurrentTab(0);
}`
I have attach image for the same. I just want to change blue color line present below selected tab.
android:setLeftStripDrawable="#color/your_custom_color
create a custom color resources in res->values folder and refernce this to there
You should look a at the docs for TabWidget. You have to use the android:tabStripLeft and android:tabStripRight XML properties to change the background color.
Easiest way would probably be to crate an 1px x 1px png with the color you want and place it in your drawable assets directory in your project, and use that.
simply use app:tabIndicatorColor="#color/your color"
You can achieve this programatically using:
TabLayout tabLayout = findViewById(R.id.YOUR_TAB_LAYOUT);
tabLayout.setSelectedTabIndicatorColor(YOUR_COLOR));
I am developing an application that uses tabs.
The problen is: in devices with API level 15 or higher it is working fine, but in lower than API 15 (for ex GingerBread) it is not working.
Problem: In tabs, it dosenot show the text that I have written on tabs, it just show blank tabs.
You can see the images
correct image : we can see the tab names "Tracker"," Call Logs", "STD codes" and "ISD Codes"
Problem Image tab name not shown in this image(in gingerbread)
As you can see in this image tab names names are not shown.
My code is below
main.xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:id="#android:id/tabhost"
>
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/tabs"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/tabcontent"
>
</FrameLayout>
</LinearLayout>
</TabHost>
My activity file is
public class MobileNumberTrackerTabbedHomeActivity extends TabActivity {
/** Called when the activity is first created. */
TabHost tabHost;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tabHost=getTabHost();
//First Tab
TabSpec tab1=tabHost.newTabSpec("Tracker");
tab1=tab1.setIndicator("Tracker");
Intent intentNumberTracker =new Intent(this, NumberTrackerActivity.class);
tab1=tab1.setContent(intentNumberTracker);
TabSpec tab2=tabHost.newTabSpec("STD Codes");
tab2=tab2.setIndicator("STD Codes");
Intent intentSTDCode=new Intent(this,STDCodeFinderActivity.class);
tab2=tab2.setContent(intentSTDCode);
TabSpec tab3=tabHost.newTabSpec("ISD Codes");
tab3=tab3.setIndicator("ISD Codes");
Intent intentISDCode=new Intent(this,ISDCodeFinderActivity.class);
tab3=tab3.setContent(intentISDCode);
TabSpec tab4=tabHost.newTabSpec("Call Logs");
tab4=tab4.setIndicator("Call Logs");
Intent intenCallLogs=new Intent(this,ShowCallLogsActivity.class);
tab4=tab4.setContent(intenCallLogs);
tabHost.addTab(tab1);
tabHost.addTab(tab4);
tabHost.addTab(tab2);
tabHost.addTab(tab3);
}
}
What should I do so that tabs worh fine with all APIs
Please suggest a solution
thanks
It should be like,
//First Tab
TabSpec tab1=tabHost.newTabSpec("Tracker");
tab1.setIndicator("Tracker");
Intent intentNumberTracker =new Intent(this, NumberTrackerActivity.class);
tab1.setContent(intentNumberTracker);
for each Tab, instead of
//First Tab
TabSpec tab1=tabHost.newTabSpec("Tracker");
tab1=tab1.setIndicator("Tracker");
Intent intentNumberTracker =new Intent(this, NumberTrackerActivity.class);
tab1=tab1.setContent(intentNumberTracker);
By assigning everytime tab1 = new content/setting you are over-writing the previous set fields.
I have created a tab based app, in one of the tab, there is also inner tab where some data is displayed in tabular format using adapter. It is perfectly ok in all devices with Android 2.1. But in all the devices with Android 2.2 devices, it is just showing only first tab only with black screen above. I have given two different screenshot for the reference.
Screenshot of 2.1 device
Screenshot of 2.2 device
XML for tabactivity
<?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:id="#+id/myinfotrackerlayout"
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"/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:gravity="bottom"
android:isScrollContainer="false"
android:scrollbarAlwaysDrawHorizontalTrack="false"
android:scrollbarAlwaysDrawVerticalTrack="false"
android:scrollbars="none"
android:background="#FFFFFF"/>
</LinearLayout>
</TabHost>
Code for Tabactivity
public class MyInfoTracker extends TabActivity {
private int tabid = 0;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.myinfotracker);
try{
final TabHost innerTabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec; // Resusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab
Intent myint = this.getIntent();
tabid = myint.getIntExtra("tab_id", 0);
// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, MyinfoActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP );
intent.putExtra("addType","CD4");
// Initialize a TabSpec for each tab and add it to the TabHost
spec = innerTabHost.newTabSpec("CD4Count").setIndicator("CD4 Count").setContent(intent);
innerTabHost.addTab(spec);
// Do the same for the other tabs
intent = new Intent().setClass(this, MyinfoActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP );
intent.putExtra("addType","VL");
spec = innerTabHost.newTabSpec("ViralLoad").setIndicator("Viral Load").setContent(intent);
innerTabHost.addTab(spec);
// Do the same for the other tabs
intent = new Intent().setClass(this, MyinfoActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP );
intent.putExtra("addType","Wt");
spec = innerTabHost.newTabSpec("Weight").setIndicator("Weight").setContent(intent);
innerTabHost.addTab(spec);
innerTabHost.setScrollbarFadingEnabled(false);
innerTabHost.setScrollContainer(false);
innerTabHost.setCurrentTab(tabid);
}catch(Exception e){}
}
}
What may cause this type of problem?
It is not at all tab related prob. In onCreate() there is a code-
datePickerDialog = new DatePickerDialog(getParent(), ButtonTestDateListener,
mYear, mMonth, mDay);
I have just declare the mYear, mMonth and mDay as Integer, but no initialization was there. It is working fine in 2.1, but giving prob in 2.2. Thats why it is giving such problem.
I am building a tabbed application. Things work wonderfully with TabHost. Unfortunately, my team lead does not like the look of the tabs. He doesn't like the tiny icon and the gaps between the tabs. So, I either need to modify TabHost or use an ActivityGroup.
My first attempt was at changing TabHost.
Here is the drawable for one of my tabs:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/ic_tab_timeline_grey"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/ic_tab_timeline_white" />
<!-- This is a state-list drawable, which you will apply as the tab image. When the tab state changes, the tab icon will automatically switch between the images defined here. -->
</selector>
I initialize the tab in my main activity:
// Initialize a TabSpec for each tab and add it to the TabHost
intent = new Intent().setClass(this, TimelineActivity.class);
spec = tabHost.newTabSpec("timeline") .setIndicator("",
res.getDrawable(R.drawable.ic_tab_timeline))
.setContent(intent);
tabHost.addTab(spec);
(Note that I set the Indicator to blanks.)
Then, I set the background image:
TabWidget tw = getTabWidget();
//changeTabWidgetStyle(tw);
View tempView = tabHost.getTabWidget().getChildAt(0);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.timeline_on));
This successfully sets the background to my desired image. However, my tab still has the tiny icon, which overlays my background image. How can I get rid of the icon? I tried setting the Drawable to null when I initialize the tab, but this causes my app to crash.
Even if I can get this to work, it looks like I will still have spaces between the tabs. How can I get rid of those?
If this doesn't work, I may have to go with an ActivityGroup. I would rather not, though, because that seems more complicated.
I'm using this example: android: using ActivityGroup to embed activities
LocalActivityManager mgr = getLocalActivityManager();
Intent i = new Intent(this, SomeActivity.class);
Window w = mgr.startActivity("unique_per_activity_string", i);
View wd = w != null ? w.getDecorView() : null;
if(wd != null) {
mSomeContainer.addView(wd);
}
I can get the "tabs" to change and inflate layouts, but I can't add the local activity. I'm not sure what sort of "container" to add the view to. What should my xml layout look like?
Here is the method i used to successfully successfully create completely custom looking tabs on a recent project.
The idea is to use a hidden TabWidget in your layout and control it with a customized LinearLayout containing Buttons. This way, you can more easily customize the buttons to look however you'd like. You'll control the actual TabWidget in your Activity within each button's OnClick.
Create your layout with both the TabWidget and the Buttons:
<?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:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:gravity="bottom">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:visibility="gone" />
<LinearLayout android:id="#+id/tabbar"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/firstButton"
android:layout_alignParentTop="true" android:background="#drawable/btn_first_on"
android:layout_width="100dp" android:layout_height="43dp"
android:clickable="true"></Button>
<Button android:id="#+id/secondButton"
android:layout_alignParentTop="true" android:background="#drawable/btn_second_off"
android:layout_height="43dp" android:layout_width="100dp"
android:clickable="true"></Button>
<Button android:id="#+id/thirdButton"
android:layout_alignParentTop="true" android:background="#drawable/btn_third_off"
android:layout_height="43dp" android:layout_width="100dp"
android:clickable="true"></Button>
<Button android:id="#+id/forthButton"
android:layout_alignParentTop="true" android:background="#drawable/btn_forth_off"
android:layout_height="43dp" android:layout_width="100dp"
android:clickable="true"></Button>
</LinearLayout>
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_below="#+id/tabbar" />
</RelativeLayout>
</TabHost>
Set up the onCreate of your activity to handle using the buttons for adjusting the tab views:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// tabs
firstButton = (Button) findViewById(R.id.firstButton);
secondButton = (Button) findViewById(R.id.secondButton);
thirdButton = (Button) findViewById(R.id.thirdButton);
forthButton = (Button) findViewById(R.id.forthButton);
Resources res = getResources(); // Resource object to get Drawables
final TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec; // Resusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab
intent = new Intent().setClass(this, FirstGroupActivity.class);
spec = tabHost.newTabSpec("first").setIndicator("First").setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, SecondGroupActivity.class);
spec = tabHost.newTabSpec("second").setIndicator("Second").setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, ThirdGroupActivity.class);
spec = tabHost.newTabSpec("third").setIndicator("Third").setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, ForthActivity.class);
spec = tabHost.newTabSpec("forth").setIndicator("Forth").setContent(intent);
tabHost.addTab(spec);
tabHost.setCurrentTab(0);
firstButton.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
tabHost.setCurrentTab(0);
firstButton.setBackgroundResource(R.drawable.btn_first_on);
secondButton.setBackgroundResource(R.drawable.btn_second_off);
thirdButton.setBackgroundResource(R.drawable.btn_third_off);
forthButton.setBackgroundResource(R.drawable.btn_forth_off);
}
});
secondButton.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
tabHost.setCurrentTab(1);
firstButton.setBackgroundResource(R.drawable.btn_first_off);
secondButton.setBackgroundResource(R.drawable.btn_second_on);
thirdButton.setBackgroundResource(R.drawable.btn_third_off);
forthButton.setBackgroundResource(R.drawable.btn_forth_off);
}
});
thirdButton.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
tabHost.setCurrentTab(3);
firstButton.setBackgroundResource(R.drawable.btn_first_off);
secondButton.setBackgroundResource(R.drawable.btn_second_off);
thirdButton.setBackgroundResource(R.drawable.btn_third_on);
forthButton.setBackgroundResource(R.drawable.btn_forth_off);
}
});
forthButton.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
tabHost.setCurrentTab(4);
firstButton.setBackgroundResource(R.drawable.btn_first_off);
secondButton.setBackgroundResource(R.drawable.btn_second_off);
thirdButton.setBackgroundResource(R.drawable.btn_third_off);
forthButton.setBackgroundResource(R.drawable.btn_forth_on);
}
});
}
As you can see, I'm using drawables for the images of the buttons on and off. Using this technique, you're not limited to the options available when simply just trying to customize the look of the TabWidget's tabs and you can create a completely custom look to your tabs.
Also, as a rule of thumb, it's a bad idea to use an ActivityGroup in android tabs. That approach eats up a lot of system resources. A better approach and one that I've also implemented on this project is to keep track of the views through an array of views and then swap them out as needed.
Further to SBerg413's answer you can set the button images for your new tab buttons to transparent images. Then add an ImageView to display under the buttons (use RelativeLayout to get the ImageView to appear in the same space as the buttons) and simply switch the image displayed there depending on which button is pressed.
This way you can have tab buttons of different shapes and generally more freedom of design for the tab bar and use the buttons as a basic hit box for each tab button.