Hi i'm trying to change the color of my tab widget but when i run the app it doesnt change does anyone know why?
heres my code where i try to change the color of my tabhost both unselected and selected
public static void setTabColor(TabHost tabhost) {
for(int i=0;i<tabhost.getTabWidget().getChildCount();i++)
{
tabhost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#666666")); //unselected
}
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundColor(Color.parseColor("#FFFFFF")); // selected
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tablayout);
checkInternet();
checkPreferences();
TabHost tabHost = getTabHost();
// setTabColor(tabHost);
// Tab for Photos
TabSpec resultsspec = tabHost.newTabSpec("Results");
// setting Title and Icon for the Tab
resultsspec.setIndicator("Results", getResources().getDrawable(R.drawable.miresults_tab));
Intent photosIntent = new Intent(this, MIResults.class);
resultsspec.setContent(photosIntent);
// setTabColor(tabHost);
// Tab for Songs
TabSpec Fixturesspec = tabHost.newTabSpec("Fixtures");
Fixturesspec.setIndicator("Fixtures", getResources().getDrawable(R.drawable.mifixtures_tab));
Intent songsIntent = new Intent(this, MIFixtures.class);
Fixturesspec.setContent(songsIntent);
TabSpec tablespec = tabHost.newTabSpec("Table");
tablespec.setIndicator("Table", getResources().getDrawable(R.drawable.mitable_tab));
Intent videosIntent = new Intent(this, MITable.class);
tablespec.setContent(videosIntent);
// Adding all TabSpec to TabHost
tabHost.addTab(resultsspec);
tabHost.addTab(Fixturesspec);
tabHost.addTab(tablespec);
}
You'll need to create a drawable selector, similar to:
mytab.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected_v4" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_v4" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_focus" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_focus" />
<!-- Pressed -->
<item android:state_pressed="true" android:drawable="#drawable/tab_press" />
</selector>
to handle each of the states of the tab. Each of the drawables, like tab_focus, is a 9-patch png.
You'll also need to override the tab layout to reference your drawable resource. I'd use a style with a parent that references the android default, then override the background property to reference your "drawable/mytab".
Related
I have a TabLayout with a ViewPager in my Android app. It is set up with an icon with some text below for each tab. What I want to do now is to change the color of the selected tab so that it stands out a bit more. The icons are gray, but I want the selected tab to be green. For this I have a separate Drawable (png file) for each color.
It kinda works, but it adds a new View to the tab at every select/unselect instead of changing it. Here is the code in question (this is a custom Fragment class):
private ViewPager mViewPager;
private MyPagerAdapter mAdapter;
private TabLayout mTabLayout;
private int mCurrentItem = 0;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.my_fragment, container, false);
mViewPager = (ViewPager) view.findViewById(R.id.my_pager);
mTabLayout = (TabLayout) view.findViewById(R.id.my_tablayout);
return view;
}
#Override
public void onResume()
{
super.onResume();
final MyActivity myActivity = (MyActivity) getActivity();
mCurrentItem = 0;
mAdapter = new MyPagerAdapter(getChildFragmentManager(), myActivity);
mViewPager.setAdapter(mAdapter);
mViewPager.setCurrentItem(mCurrentItem);
mTabLayout.setupWithViewPager(mViewPager);
mTabLayout.removeAllTabs();
mTabLayout.addTab(mTabLayout.newTab()
.setTag(0)
.setCustomView(R.layout.my_tablayout_tab_recipes_selected));
mTabLayout.addTab(mTabLayout.newTab()
.setTag(1)
.setCustomView(R.layout.my_tablayout_tab_shopping_list));
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager){
#Override
public void onTabSelected(TabLayout.Tab tab)
{
super.onTabSelected(tab);
if (tab.getTag() == null)
{
return;
}
switch ((TabConstants.TAGS) tab.getTag())
{
case 0:
tab.setCustomView(R.layout.my_tablayout_tab_recipes_selected);
break;
case 1:
tab.setCustomView(R.layout.my_tablayout_tab_shopping_list_selected);
}
mViewPager.setCurrentItem(tab.getPosition());
myActivity.supportInvalidateOptionsMenu(); // Invalidate Toolbar
}
#Override
public void onTabUnselected(TabLayout.Tab tab)
{
super.onTabUnselected(tab);
if (tab == null || tab.getTag() == null)
{
return;
}
switch ((TabConstants.TAGS) tab.getTag())
{
case 0:
tab.setCustomView(R.layout.my_tablayout_tab_recipes);
break;
case 1:
tab.setCustomView(R.layout.my_tablayout_shopping_list);
break;
}
}
});
}
Here are a few images of what's happening. The right View is inflated every time, but it is added instead of replacing the previous View.
Initially:
First tab change:
Second tab change:
Update (solution):
Here is an example of the StateListDrawable I ended up using for the tabs.
Drawables:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item android:state_selected="true"
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/selected" />
<!-- Inactive tab -->
<item android:state_selected="false"
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/unselected" />
<!-- Pressed tab -->
<item android:state_pressed="true"
android:drawable="#drawable/selected" />
</selector>
Text colors:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item android:state_selected="true"
android:state_focused="false"
android:state_pressed="false"
android:color="#color/my_selected_color" />
<!-- Inactive tab -->
<item android:state_selected="false"
android:state_focused="false"
android:state_pressed="false"
android:color="#color/my_unselected_color" />
<!-- Pressed tab -->
<item android:state_pressed="true"
android:color="#color/my_selected_color" />
</selector>
You should use a StateListDrawable for your images within each tab.
For example, let's say in your my_tablayout_tab_recipes there is your knife and spoon image.
You should assign an xml file as a background for that image, in which you could decide the selected and unselected version of your image.
Reference
There's no need to change by yourself the background images for selected and unselected state; the android system will take care of that for you.
I want to highlight the list item when it is clicked.I have written the below code but it is not working.I want the particular item in the listview to be clicked.
MainActivity.java
ListView lv = getListView();
lv.setSelector( R.drawable.list_selector);
// on selecting single product
// launching Edit Product Screen
lv.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
// getting values from selected ListItem
String FC_DATE = ((TextView) view.findViewById(R.id.fc_date)).getText()
.toString();
// Starting new intent
Intent in = new Intent(getApplicationContext(),
ForecastActivity.class);
// sending lat/long to next activity
in.putExtra(TAG_FC_DATE, FC_DATE);
in.putExtra(TAG_LAT, LAT);
in.putExtra(TAG_LONG, LONGITUDE);
// starting new activity and expecting some response back
startActivityForResult(in, 100);
}
});
list_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selector style for listrow -->
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg" />
<item android:state_pressed="true"
android:drawable="#drawable/gradient_bg_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg_hover" />
</selector>
listitem_selector.xml :
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true"
android:state_pressed="true" android:drawable="#drawable/gradient_bg_hover" />
<item android:state_enabled="true"
android:state_focused="true" android:drawable="#drawable/gradient_bg_hover" />
<item android:state_enabled="true"
android:state_selected="true" android:drawable="#drawable/gradient_bg_hover" />
<item
android:drawable="#drawable/gradient_bg" />
</selector>
Set list item selector to ListView :
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/listitem_selector" />
How to change color of tab when its selected, see below screen shot:
i am showing Orange color in ActionBar, in a same way i wanna show orange color in place of light blue.
To show Orange color in ActionBar background, i am using below code:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.MyAppTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/Theme.MyAppTheme.ActionBar</item>
</style>
<style name="Theme.MyAppTheme.ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#FF4444</item>
</style>
</resources>
I really recommend you to use the Actionbar Style Generator.
With that tool you can easily theme your graphic elements in your toolbar.
put this function and call it to yout Activity and pass tabhost as a parameter
public static void setTabColor(TabHost tabhost) {
for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++) {
tabhost.getTabWidget().getChildAt(i)
.setBackgroundResource(R.drawable.header_blank); // unselected
}
tabhost.getTabWidget().setCurrentTab(0);
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab())
.setBackgroundResource(R.drawable.tab_selected_new); // selected
// //have
// to
// change
}
call this as following way
setTabColor(tabHost);
tabHost.setOnTabChangedListener(new OnTabChangeListener() {
#Override
public void onTabChanged(String arg0) {
setTabColor(tabHost);
}
});
hope this is useful to you
myTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener(){
#Override
public void onTabChanged(String tabId) {
int tab = myTabHost.getCurrentTab();
View view = myTabHost.getTabWidget().getChildAt(tab).setBackgroundColor(Color.CYAN);
}
});
use this code in order to change the color of selected tab:-
tabLayout.setTabTextColors(Color.parseColor("color_for_unselected_tab"), Color.parseColor("color_for_tab"));
for tab-indicator
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#627179")));
To change tab bar background:
actionBar.setStackedBackgroundDrawable(new ColorDrawable(yourOwnColor));
Create an selector file which consist your desire color apply on tab xml like below:
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) Josh Clemm 2010
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item android:state_selected="true" android:state_focused="false"
android:state_pressed="false" android:drawable="#drawable/dm_tab_highlight" />
<!-- Inactive tab -->
<!-- <item android:state_selected="false" android:state_focused="false" -->
<!-- android:state_pressed="false" android:drawable="#drawable/tabbarbg" /> -->
<!-- Pressed tab -->
<item android:state_pressed="true" android:drawable="#drawable/dm_tab_highlight" />
</selector>
You can use this code and set icon alpha , it look like one is selected and other are disable.
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
switch (position) {
case 0:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(255);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
break;
case 1:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(255);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
break;
case 2:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(255);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
break;
case 3:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(255);
break;
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
// you can change tab text and indicator using this
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/gray2"
app:tabSelectedTextColor="#color/orange2"
app:tabIndicatorColor="#color/orange2"/>
</com.google.android.material.appbar.AppBarLayout>
you can use like this
tab_background_select.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/tab_background" />// for selected
<item android:drawable="#drawable/tab" /> // for normal
</selector>
you can use this code and set the background of your item_tab xml file
tab_selection.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_pressed="false"
android:drawable="#drawable/tab_bg_selected" />
<item android:state_selected="false" android:state_pressed="false"
android:drawable="#drawable/tab_bg_unselected" />
<item android:state_pressed="true"
android:drawable="#drawable/tab_bg_pressed" />
</selector>
Use this line app:tabSelectedTextColor="#color/colorPrimaryDark" in your xml
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabMode="scrollable"
android:layout_alignParentBottom="true"
app:tabSelectedTextColor="#color/colorPrimaryDark"
app:tabIndicatorColor="#color/colorPrimaryDark"
>
</com.google.android.material.tabs.TabLayout>
i have app with many tabs, i want to add image or style to each tab , how please?
th = (TabHost) findViewById(R.id.tabhost_template_two_tabs);
th.setup();
// all tab
spec = th.newTabSpec("All");
spec.setIndicator("All");
spec.setContent(R.id.tab_template_two_tabs_all);
th.addTab(spec);
// favorite tab
spec = th.newTabSpec("Favorite");
spec.setIndicator("Favorite");
spec.setContent(R.id.tab_template_two_tabs_favorite);
th.addTab(spec);
th.setCurrentTab(1);
Thanks
Try this :
Call this from your OnCreate() method:
setTabs();
Then put this code
private void setTabs()
{
addTab(R.drawable.ic_icon1, Activity.class, "All");
addTab(R.drawable.ic_icon2, Activity1.class, "Favorite");
}
private void addTab(int drawableId, Class<?> c, String labelId)
{
final TabHost tabHost = getTabHost();
Intent intent = new Intent(this, c);
TabHost.TabSpec spec = tabHost.newTabSpec("tab"+ labelId);
View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
TextView title = (TextView) tabIndicator.findViewById(R.id.title);
title.setText(labelId);
ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
icon.setImageResource(drawableId);
spec.setIndicator(tabIndicator);
spec.setContent(intent);
tabHost.addTab(spec);
}
Then Create tab_indicator.xml in drawable folder and put this code.There you can set different colours when it is pressed,focused etc...
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false" android:drawable="#drawable/tab_unselected" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false" android:drawable="#drawable/tab_selected" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false" android:drawable="#drawable/tab_focus" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false" android:drawable="#drawable/tab_focus" />
<!-- Pressed -->
<item android:state_selected="true" android:state_pressed="true"
android:drawable="#drawable/tab_focus" />
<item android:state_pressed="true" android:drawable="#drawable/tab_press" />
</selector>
In layouts create tab_indicator.xml and put this code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="55dip"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/tab_indicator"
android:padding="5dp">
<ImageView android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/icon"
/>
<TextView android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/tabWidgetStyle"
/>
</RelativeLayout>
You can set the image to the tab as below :
tabHost.newTabSpec("All").setIndicator(null,res.getDrawable(R.drawable.icon)).setContent(R.id.tab_template_two_tabs_all);
Or to set the style try this:
tabHost.newTabSpec("All").setIndicator(null,res.getDrawable(R.style.myStyle)).setContent(R.id.tab_template_two_tabs_all);
I saw this question here. The solution was to make a xml for a icon and then getResources().getDrawable(R.drawable.tabicon);
on in. So this is in my java:
TabHost tabhost = (TabHost)findViewById(R.id.tabhost);
tabhost.setup();
TabSpec tabspecs1 = th.newTabSpec("example");
tabspecs1.setContent(R.id.tab1);
tabspecs1.setIndicator("Example");
getResources().getDrawable(R.drawable.tabicon);
th.addTab(tabspecs1);
listView = getListView();
My tabicon.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use icon1 -->
<item android:drawable="#drawable/ic_action_line_chart"
android:state_selected="true" />
<!-- When not selected, use icon2-->
<item android:drawable="#drawable/ic_action_calculator" />
</selector>
line chart and calculator are in drawable-folders.
Anything I missed? Tabs are working fine, but no icons...?
Okay I did it like this:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
setTitle("MyApp");
listView = getListView();
TabHost th = (TabHost)findViewById(R.id.tabhost);
th.setup();
TabSpec tabspecs1 = th.newTabSpec("tag01");
tabspecs1.setContent(R.id.tab1);
tabspecs1.setIndicator ("exlample"),getResources().getDrawable(R.drawable.tabicon));
th.addTab(tabspecs1);
TabSpec tabspecs2 = th.newTabSpec("tag02");
tabspecs2.setContent(R.id.tab2);
tabspecs2.setIndicator ("lululu", getResources().getDrawable(R.drawable.tabicon));
th.addTab(tabspecs2);
}
I used tabicon.xml for both, just 4 testing.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use icon1 -->
<item android:drawable="#drawable/ic_icon1"
android:state_selected="true" />
<!-- When not selected, use icon2-->
<item android:drawable="#drawable/ic_icon2" />
</selector>
You're getting the drawable, but not setting it. Try this method:
http://developer.android.com/reference/android/widget/TabHost.TabSpec.html#setIndicator(java.lang.CharSequence, android.graphics.drawable.Drawable)
setIndicator ("Example", getResources().getDrawable(R.drawable.tabicon))
This
getResources().getDrawable(R.drawable.tabicon);
doesn't do anything. You're not setting the retrieved Drawable anywhere.