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.
Related
I have a TabLayout (design support library) which is tied up to a ViewPager containing three tabs. I have designed a custom layout and set that to each tab in the TabLayout. I have been trying to change the background color of the currently selected tab. The color only wraps up around the text in the tab but doesn't occupy the entire tab space.
Below are the code snippets of my activity and the custom layout file.
Activity code
public class CustomTabLayoutActivity extends AppCompatActivity {
private TabLayout tabLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom_tab_layout);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
setupTabLayout();
viewPager.setCurrentItem(0);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
for (int i = 0; i < tabLayout.getTabCount(); i++) {
if (i == position) {
tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#198C19"));
} else {
tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#f4f4f4"));
}
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void setupViewPager(ViewPager viewPager) {
CustomViewPagerAdapter pagerAdapter = new CustomViewPagerAdapter(getSupportFragmentManager());
pagerAdapter.addFragments(new OneFragment(), "ONE");
pagerAdapter.addFragments(new OneFragment(), "TWO");
pagerAdapter.addFragments(new OneFragment(), "THREE");
viewPager.setAdapter(pagerAdapter);
}
private void setupTabLayout() {
TextView customTab1 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
.inflate(R.layout.custom_tab_layout, null);
TextView customTab2 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
.inflate(R.layout.custom_tab_layout, null);
TextView customTab3 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
.inflate(R.layout.custom_tab_layout, null);
customTab1.setText("ONE");
tabLayout.getTabAt(0).setCustomView(customTab1);
customTab2.setText("TWO");
tabLayout.getTabAt(1).setCustomView(customTab2);
customTab3.setText("THREE");
tabLayout.getTabAt(2).setCustomView(customTab3);
}
}
Custom Layout file for each tab
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#ffffff"
android:text="Test"
android:textColor="#android:color/black"
android:textSize="20sp" />
Here is the screenshot of the tabs after running the above code.
As you guys can see, the color only occupies the text in the tab but not the entire tab space. How to achieve this? Any ideas/suggestions would help me a lot. Thanks in advance.
Define a selector as a drawable, and also have a drawable for the selected/unselected states.
For this solution, I started with the code from this answer, and then added the functionality that changes the background color for the current Tab.
First, the selector, tab_background.xml in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_background_selected" android:state_selected="true" />
<item android:drawable="#drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>
Then, tab_background_selected.xml in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#d13fdd1a" />
</shape>
Then, tab_background_unselected.xml in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#3F51B5" />
</shape>
Finally, in your styles.xml, specify the selector to use, and also specify the tab indicator style, since the app:tabIndicatorColor property in the TabLayout will now be ignored:
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabBackground">#drawable/tab_background</item>
<item name="tabIndicatorColor">#ff00ff</item>
<item name="tabIndicatorHeight">2dp</item>
</style>
Result with the example colors above:
Additional Note:
Tested with the 23.3.0 versions of the support library components:
dependencies {
compile 'com.android.support:appcompat-v7:23.3.0'
compile 'com.android.support:cardview-v7:23.3.0'
compile 'com.android.support:recyclerview-v7:23.3.0'
compile 'com.android.support:design:23.3.0'
compile 'com.android.support:support-v4:23.3.0'
}
you should use:
app:tabBackground="#drawable/tab_selector"
android:background="#color/colorNormal"
tab_selector.xml (in Drawable Folder):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#color/colorSelected"/>
<item android:state_selected="false" android:drawable="#color/colorNormal"/>
</selector>
Tabs with Ripple effect:
In addition to Daniel Nugent's answer It would be beautiful to add a ripple effect to tabs. In order to achieve this, you must add these two drawables to drawable-v21 folder:
tab_background_selected.xml :
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#63D25B"> <!-- ripple color -->
<item android:drawable="#d13fdd1a" /> <!-- normal color -->
</ripple>
tab_background_unselected.xml :
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#606FC7"> <!-- ripple color -->
<item android:drawable="#3F51B5" /> <!-- normal color -->
</ripple>
I know that its quite late to answer this question, but have a different & simple answer without creating any new background or selector.
Tab-Layout have default padding of 12dp at its start & end. Just set
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
to fill color in your tab.
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'm setting a image hover in my Tab Host using xml file. But its not working for Me. Please take a look at my codes below to see if I forgotten something or if there is something wrong in my codes.
Main Activity Class
public class MainActivity extends TabActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabHost tabHost = getTabHost();
// Tab for Photos
TabSpec photospec = tabHost.newTabSpec("Photos");
// setting Title and Icon for the Tab
photospec.setIndicator("Photos", getResources().getDrawable(R.drawable.icon_photos_tab));
Intent photosIntent = new Intent(this, PhotosActivity.class);
photospec.setContent(photosIntent);
// Tab for Songs
TabSpec songspec = tabHost.newTabSpec("Songs");
songspec.setIndicator("Songs", getResources().getDrawable(R.drawable.icon_songs_tab));
Intent songsIntent = new Intent(this, SongsActivity.class);
songspec.setContent(songsIntent);
// Tab for Videos
TabSpec videospec = tabHost.newTabSpec("Videos");
videospec.setIndicator("Videos", 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(videospec); // Adding videos tab
}
}
My XML file for Hover
<?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/photohover"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/photo" />
</selector>
i checked your code it is working fine. I don't know what's your problem. Please check this link. It will helps you to understand the Tabwidget concept. http://www.rdcworld-android.blogspot.in/2011/11/tabwidget-in-android-advance.html
Let me know still you are facing a problem with tabwiget, with clear information.
Problem Solved. I just change getResources() to context.getResources() and it works fine.
try this :-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- selected state -->
<item android:drawable="#drawable/normal_pressed"
android:state_selected="true"
android:state_pressed="false" />
<!-- unselected state (default) -->
<item android:drawable="#drawable/normal" />
</selector>
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".
I have textview which I want to change the color when I focus or cliclked it like a link text in web I have try to follow this but it still doesn't work
please help, thanks
this is my java code
public class TextColorActivity extends Activity {
/** Called when the activity is first created. */
ColorStateList cl = null;
private TextView title;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
title = (TextView)findViewById(R.id.hello);
try {
Log.d("test","try");
XmlResourceParser xpp = getResources().getXml(R.drawable.selector_txt);
cl = ColorStateList.createFromXml(getResources(), xpp);
} catch (Exception e) {}
title.setTextColor(cl);
title.setFocusable(true);
title.setClickable(true);
title.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Log.d("test","click");
}
});
}
this is my selector_txt.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:color="#color/Darkgoldenrod"/>
<item android:state_pressed="true" android:state_enabled="false"
android:color="#color/Darkgreen" />
<item android:state_enabled="false" android:color="#color/Red" />
<item android:color="#color/blue"/>
and this is my main.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" >
<TextView
android:id="#+id/hello"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
android:textSize="30dp"
android:textStyle="bold"
android:duplicateParentState="true"/>
You can also set your color in the xml if you want. Just create a color folder in your res folder and move the xml file there then you can set it via android:textColor="#color/selector_txt"
Regards the problem you're having. Android will always use the first match in a selector. If a TextView is pressed it is also focused. So add android:pressed="false" to your first item or move the line after the pressed status line.
That's the full xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#color/Red" />
<item android:state_pressed="true" android:color="#color/Darkgreen" />
<item android:state_focused="true" android:color="#color/Darkgoldenrod"/>
<item android:color="#color/blue"/>
</selector>