I have a TabHost holding 5 tabs.
As far as I can see, there has to be one tab selected at all times.
I need a way to unselect all my tabs so none will be selected.
If the tabhost is meant by general to have one tab selected at all times,
how can I make it appear (UI speaking) as if the tab isn't selected?
try this:
final TabWidget tabWidget = tabHost.getTabWidget();
final int n = tabWidget.getChildCount();
for (int i = 0; i < n; ++i) {
tabWidget.getChildAt(i).setSelected(false);
}
or you can add hidden tab and select it when you want unselect a tab
tabHost.addTab(
tabHost.newTabSpec("hiddenTab").setIndicator(""),
MyFragment.class,
null
);
tabHost.getTabWidget().getChildTabViewAt(hiddenTabIndex).setVisibility(View.GONE);
and select this tab when you want
tabHost.setCurrentTab(hiddenTabIndex);
This is not possible AFAIK. but yes,you can set the selected tab's color to look like it is unselected and set a blank layout over it by managing a global variable when you make it 'unselected' and setting up normal layout when you want it to be shown normally to user. But this is kind of a trick.
Hope,you get my point!
EDIT :
Suppose you have set String what="disappear" somewhere in your code to show it 'unselected',then you can use this function to change color of tab:
Main.class:
//Change The Backgournd Color of Tabs
public void setTabColor(TabHost tabhost) {
for(int i=0;i<tabhost.getTabWidget().getChildCount();i++)
{
tabhost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#FFFFFF"))); //unselected white colored
}
if(!what.equals("disappear"))
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundColor(Color.parseColor("FF0000"))); // selected red colored
else
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundColor(Color.parseColor("FFFFFF"))); // selected but show as unselected with white color
}
And in your activity class(which is opened by that selected tab):
FirstActivity.class:
if(what.equals("disappear"))
setContentView(R.layout.blank);
else
setContentView(R.layout.first_layout);
blank.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/layout"
android:background="#ffffff"
android:gravity="center">
<!-- You can make background transperent by setting it to "00ffffff" -->
<!-- You can also add this textview to guide user -->
<!--
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Click Any Tab To Start
/>
-->
</LinearLayout>
For this purpose, maybe using tabHost is not the proper way ?
Related
I saw a lot of questions that say how to set the color differently for selected(active) and unselected(inactive) tabs. I also know that google provides void setTabTextColors (int normalColor, int selectedColor) to achieve this.
My requirement is a little different, I am working on a quiz app with a TabLayout and CardView. TabLayout allows the user to navigate between questions and CardView is used to display the questions.
I need to set the color of the tabs for which the user has already selected an answer differently than that for which the user has not answered yet. By default the TextColor is black but if the user selects an answer then the tabcolor should change to blue (just for eg.) and it should remain that way till the user exits. I have a int array called Select that will hold the value of the option that the user has selected (The values range between 1 - 4). While allocating the Select array I also initialize it with -1. I thought of setting up a loop and then if the array is -1 leave the tab as it is or set the tabcolor to blue.
How can I achieve this functionality?
You can work with TabLayout internals by querying for this children and changing TextViews manually. This can break your code when you upgrade to another support library version, but as long as you keep track and test when updating, it should work:
private void updateTabTextColors() {
LinearLayout tabsContainer = (LinearLayout) mTabLayout.getChildAt(0);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
LinearLayout item = (LinearLayout) tabsContainer.getChildAt(i);
TextView tv = (TextView) item.getChildAt(1);
tv.setTextColor(Select[i] == -1 ? Color.BLACK : Color.BLUE);
}
}
Just enhancing Marcelo Liberato's answer to support custom background for each tab item.
LinearLayout tabsContainer = (LinearLayout) mTabLayout.getChildAt(0);
LinearLayout childLayout1 = (LinearLayout)tabsContainer.getChildAt(2);
LinearLayout childLayout2 = (LinearLayout)tabsContainer.getChildAt(3);
LinearLayout tabView = (LinearLayout) childLayout1.getChildAt(0).getParent();
tabView.setBackgroundResource(R.drawable.ic_blue_selector);
tabView = (LinearLayout) childLayout2.getChildAt(0).getParent();
tabView.setBackgroundResource(R.drawable.ic_red_selector);
Custom xml file:
<?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:id="#+id/ll_tab_holder"
android:orientation="vertical">
<LinearLayout
android:id="#+id/ll_tab_icon_title_holder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/tab_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textAppearance="#style/lasuCustomTabText" />
</LinearLayout>
<TextView
android:id="#+id/tab_only_title"
android:layout_width="match_parent"
android:layout_height="56dp"
android:textAllCaps="true"
android:textSize="12sp"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#drawable/ic_tab_text_color_selector" />
</LinearLayout>
Output:
If you are interested in using a library for this functionality, this library works well.
https://github.com/astuetz/PagerSlidingTabStrip
As in the doc getTabTextColors() -> Gets the text colors for the different states (normal, selected) used for the tabs. the tabs can only have 2 states. The only way to achieve what you want if to inherit Tab class and add a new state, something like: tabAlreadyVisited. Then #Override the draw method to change background color based on the tabAlreadyVisited attribute value. Or change the text color with setTabTextColors
It's possible to set custom view for your tab
TabLayout.Tab yourTab = tabLayout.newTab();
yourTab.setCustomView(R.layout.red_text_view);
And red_text_view.xml is
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:textColor="#f44336"/>
If you use the #android:id/text1 default Tab's settext should work. You could do whatever you want with your custom view.
I have a tabhost with ~ 5 tabs,and I would like to change the background of it . There is a background image of the tabs , one rectangle image of all tabs. When I add to tabhost . It does not work. How to fix it? Thanks
<android.support.v4.app.FragmentTabHost
android:id="#+id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal"
android:background="#drawable/tabBg"
/>
Do like this...
tabhost
.getTabWidget()
.getChildAt(/*Index of the tab of which you want to change the background*/)
.setBackground(/*the background res you want to set */)
Try this
spec = tabHost.newTabSpec("orders")
.setIndicator("Orders",res.getDrawable(R.drawable.flash_36))
.setContent(R.id.ordersLayout);
Finally got the solution
public void setTabColor(TabHost tabhost) {
for(int i=0;i<tabhost.getTabWidget().getChildCount();i++)
{
tabhost.getTabWidget().getChildAt(i).setBackground(res.getDrawable(R.drawable.share_tab_bg)); // selected
}
}
I have an application where I have 5 tabs set up, and I it works perfectly except for one issue I noticed recently. On large screen sizes, for some reason, the tabs are transparent, I only noticed this when I tried out the application on one of my colleagues large android device. So I then set up the emulator to a large screen size of 10 inches, and its the same thing.
So in order to fix this, I used this code
public static void setTabColor(TabHost tabhost) {
for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++) {
tabhost.getTabWidget().getChildAt(i)
.setBackgroundColor(Color.parseColor("#292929")); // unselected
// }
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab())
.setBackgroundColor(Color.parseColor("#8b8b8b")); // selected
}
}
Then I use OnTabChangeListener and place
setTabColor(tabHost);
under each tab change. This fixed the issue so that the tab colours are the same for all screen sizes. However the problem now is that the divider is gone. I tried using
tabHost.getTabWidget().setDividerDrawable(R.drawable.separator);
but the problem is this piece of code must be called before you set the content of the tabs and seeing I have set up
setTabColor(tabHost);
on every tab change, it makes it rather useless as it works when application loads up, but when you switch tab, it is gone again, and I can't call it again otherwise application will crash.
Does anyone have any suggestions as to how I can fix this issue? And also could someone explain to me why the tabs are transparent on larger screens? Why does Android do this?
Thanks in advance for any assistance
This is my solution for divider lines in tab bar,
this is the tab bar sample code.
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/tab_bar_bg_full"
android:divider="#null"
>
</TabWidget>
this is the first tab
<?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:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/shuffle_start_btn" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/tab_bar_divider_new" />
</LinearLayout>
Here i included the divider line in tab xml and it worked for me
I fixed this issue, turns out I could just color the tabs in and did not need to use the tab divider after all. Used this method here
public static void setTabColor(TabHost tabhost) {
for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++) {
tabhost.getTabWidget().getChildAt(i)
.setBackgroundColor(Color.parseColor("#292929")); // unselected
// }
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab())
.setBackgroundColor(Color.parseColor("#8b8b8b")); // selected
}
}
To color in tabs
I want to let the user know what page of the app he is on using tabs. So if he is on page one the page one tab will be lit and if he is on page two the page two tab will be lit etc. But i want it so that the tabs don't have any function. They are stay the same across all the pages (execpt what is lit) and do not have touch/click events. Should I use tabs for this or is there a better option? How exactly do I accomplish this with tabs for the better option? Thanks in advance
Probably the best way to do this is to avoid using the tab widgets altogether, and simply roll your own with TextViews arranged in a container like LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<!-- Top-level layout for page -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Tab Bar -->
<LinearLayout
android:id="#+id/tab_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- Tab 1 -->
<TextView
android:id="#+id/tab_bar_file"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/file_label"/>
<!-- Tab 2 -->
<TextView
android:id="#+id/tab_bar_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/edit_label"/>
<!-- More tabs go here -->
</LinearLayout>
<!-- Page content goes here -->
</LinearLayout>
Some notes about this:
You can set padding on the TextView
to expand the tab size. You can set a
background drawable (including a
color or an image resource) to
change the 'look' of the tab, as
well as style the text.
You can extract the enclosing LinearLayout for the tab bar into a
separate XML file, and then use the
<include> directive to incorporate
it into whatever layouts need to
display the tab.
In your Java code, you simply change
the style/color of whatever tab is
current, to highlight it for the user.
i'm trying to use TabHost and TabWidget in my Android application. This is my layout main.xml:
<TabHost
android:id="#+id/mainTabHost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TabWidget android:id="#android:id/tabs" android:layout_width="fill_parent" android:layout_height="65px"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/contentTags"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/contentPreferences"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
</LinearLayout>
</FrameLayout>
</TabHost>
And my code:
final TabHost mainTabHost = (TabHost) this.findViewById(R.id.mainTabHost);
mainTabHost.setup();
final TabHost.TabSpec tabSpecTags = mainTabHost.newTabSpec("tabTags");
tabSpecTags.setIndicator(this.getString(R.string.tab_name_tags));
tabSpecTags.setContent(R.id.contentTags);
mainTabHost.addTab(tabSpecTags);
final TabHost.TabSpec tabSpecPreferences = mainTabHost.newTabSpec("tabPreferences");
tabSpecPreferences.setIndicator(this.getString(R.string.tab_name_preferences));
tabSpecPreferences.setContent(R.id.contentPreferences);
mainTabHost.addTab(tabSpecPreferences);
The problem is that i do not want my tabs to be so tall (65px). However, if i set the layout_height of the TabWidget to e.g. 30px, i can't see the tab labels (indicator) on the tabs at all.
Seems like there is a "minimum required" height for the TabWidget (65px?) and the indicator is positioned at the bottom of this 65px?
Is there a way to adjust the positioning of the indicator?
Thanks!
However, if i set the layout_height of
the TabWidget to e.g. 30px, i can't
see the tab labels (indicator) on the
tabs at all.
Note that the techniques for doing this won't necessarily be reliable in future Android releases, if they change up how a TabHost is constructed.
Is there a way to adjust the
positioning of the indicator?
Starting with API Level 4 (a.k.a., Android 1.6), TabHost.TabSpec accepts a View as the indicator via setIndicator(). I haven't tried it, but it may give you greater control over the layout of an individual tab's indicator.
i see...
when u addTab, usually we use setIndicator like this:
QTabHost.addTab(QTabHost.newTabSpec("tab_test2").setIndicator("TAB 2").bla bla....
u can use TextView to replace "TAB 2", became like this:
tview=new TextView(this);
tview.setText("Title here");
QTabHost.addTab(QTabHost.newTabSpec("tab_test2").setIndicator(tview).bla bla....
all u need is just modify the textview.
Thanks... ^^
int iH = getTabWidget().getLayoutParams().height;
for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
tabHost.getTabWidget().getChildAt(i).getLayoutParams().height = iH;
}
for (int i = 0; i < 4; i++) {
tabhost.getTabWidget().getChildAt(i).getLayoutParams().height = 50;
}
by using this we can do very easily