Develop Reference

Android Studio: Set Color Tint on Icon within a TabItem

I'm using the TabLayout for my menu with Icon buttons.
Is it possible to tint the icons via XML in drawables?
android:tint doesn't work with a TabItem element.

You can do it coding part, try this
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
tabLayout.getTabAt(3).setIcon(tabIcons[3]);
tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(1).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(2).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(3).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
tab.getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}

If you want to set tint through XML there is one way. Is custom layout for TabItem which is set through attribute android:layout:
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/ic_drawable"
android:layout="#layout/custom_tab" />
Where custom_tab layout is:
<?xml version="1.0" encoding="utf-8"?>
<com.view.TintableImageView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:tint_color="#color/red" />
Source of TintableImageView you can find here.
This approach gives you flexibility if you want to use different icon colors for different selector states, just create color selector file and set it as a tint color and it works
app:tint_color="#color/selector_tab"

I have found a much simpler solution,
in the layout file add this attribute to the TabLayout:
app:tabIconTint="#color/desired_color_or_selector"
if you want to preserve the color state (enable/disable/selected) give it a color selector like so:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorPrimary" android:state_selected="true" />
<item android:color="#color/colorPrimary" android:state_focused="true" />
<item android:color="#color/enabled_color" android:state_enabled="true" />
<item android:color="#color/disabled_color" />
</selector>

How to Add a CheckBox in Toolbar with custom background - android

Hi i'm new in android and here
i want to Have a CheckBox in my Toolbar with a custom background
my use case is : i want to add current post(in my activity) to favorites list by a checkbox in toolbar
and i wanna use a star(on/off) icon.
i tried this but the checkBox is null
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/shwo_menu_download_mp3"
android:title="#string/download_mp3"
app:showAsAction="never"/>
<item android:id="#+id/show_menu_add_to_fav"
android:checked="true"
android:enabled="true"
app:showAsAction="always"
/>
<item android:id="#+id/show_menu_setting"
android:title="#string/show_menu_setting"
app:showAsAction="never" />
and my Activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_show_speech);
initCheckBox();
...
}
CheckBox checkBoxFav;
private void initCheckBox() {
checkBoxFav = (CheckBox) findViewById(R.id.show_menu_add_to_fav);
checkBoxFav.setText("some Text");
}

with toolbar you can do this
setSupportActionBar(toolbar);
View view= getLayoutInflater().inflate(R.layout.view_, null);
Checkbox chbox = view.findViewById(..);
//chbox.do what u want with it
toolbar.addView(logo);
the view layout contains a checkbox and design it as you wish

You have to follow these steps:
1. Create a toolbar and add it to your activity. I'm not going to explain that since there are a ton of tutorials on the matter.
2. Create a menu with a checkbox widget in it:
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<item
android:id="#+id/menu_star"
android:checkable="true"
app:actionViewClass="android.widget.CheckBox"
app:showAsAction="ifRoom"
android:title="#string/favorite" />
</menu>
Add the set of icons in the drawable folder. One icon for the unchecked state and one icon for the checked state.
Create a resource file and name it whatever you want (In this example the name is star.xml), add it to the drawable folder and insert the following code in it:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#drawable/star_black"
/>
<item
android:state_selected="true"
android:drawable="#drawable/star_black"
/>
<item
android:state_checked="false"
android:drawable="#drawable/star_border_black"
/>
<item
android:drawable="#drawable/star_border_black"
/>
</selector>
create an onCreateOptionsMenu method in your activity and insert the following code. The icon of the checkbox will change automatically after getting checked or unchecked.
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.menu,menu);
CheckBox checkBox = (CheckBox)menu.findItem(R.id.menu_star).getActionView();
checkBox.setButtonDrawable(R.drawable.star);//set the icon to star.xml
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
//set the action of the checkbox
}
});
return super.onCreateOptionsMenu(menu);
}

Changing the background color of a Tab in TabLayout (Android design support library) doesn't occupy the entire tab space

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.

Dynamically change custom Views of TabLayout

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.

How to change Viewpager tab colour dynamically?

How to change colour of Tabs like this? When I click/swipe to green or any other tab, the tab colour should change to that appropriate colour and rest of other tabs colour should change to black. How can I do this? Im using Viewpager.
I tried this code inside onpagelistener:
if(position == 0) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.red);
}
else if(position == 1) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.green);
}
But above code has no effect.
And Im using this code : Android Viewpager tutorial Androidhive

Finally I solved it. Thanks to #Xcihnegn for his idea. This is the solution:
/* For setting default selected tab */
actionBar.setSelectedNavigationItem(0);
actionBar.getTabAt(0).setCustomView(R.layout.fragmnt_red);
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
/*on changing the page make respected tab selected */
actionBar.setSelectedNavigationItem(position);
if(position == 0)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_red);
}else if(position == 1)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_orange);
}else if(position == 2)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_green);
}
}
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
viewPager.setCurrentItem(tab.getPosition());
}
When one tab gets unselected, setCustomView(null) changes its layout back to its original black colour. So only selected tabs will change colour. Unselecting the tabs will change its layout to original form.
#Override
public void onTabUnselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
if(tab.getPosition() == 0)
{
actionBar.getTabAt(0).setCustomView(null);
}else if(tab.getPosition() == 1)
{
actionBar.getTabAt(1).setCustomView(null);
}else if(tab.getPosition() == 2)
{
actionBar.getTabAt(2).setCustomView(null);
}
}
}
To remove unnecessary padding appear when setting the custom view we should use this code in styles.xml.
<style name="Custom.ActionBar.TabView.Empty" parent="#android:style/Widget.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:background">#000000</item>
</style>
<style name="CustomActionbartab" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarTabStyle">#style/Custom.ActionBar.TabView.Empty</item>
<item name="android:actionBarTabStyle">#style/Custom.ActionBar.TabView.Empty</item>
</style>
Dont forget to add the this code just above setcontentview in your activity.
settheme(R.styles.CustomActionbartab);
Custom layout for tabs.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/red">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="RED"
android:textStyle="bold"
android:gravity="center"
android:textColor="#ffffff"/>
</RelativeLayout>

There is tutorial Styling tabs in the Android action bar. You can choose your parent theme as Theme.Holo for API>=3, or Theme.AppCompat for support library V7, etc.
And besides, for <item name="android:background">, you could set it to a selector you create for tab state change:
android:background="#drawable/selector_tab"
For selector_tab can be like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/pressed_color"
android:state_pressed="true" />
<item android:color="#color/selected_color"
android:state_selected="true" />
<item android:color="#color/normal_color" />
</selector>
[UPDATE]
For change tab color dynamically, suggest to use custom view with tab:
//your_custom_tab.xml
<?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="wrap_content"
>
<TextView
android:id="#+id/tab_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:maxLines="1" />
</LinearLayout>
LinearLayout customView = (LinearLayout) getLayoutInflater().inflate(R.layout.your_custom_tab, null);
then setCustomeView(customView) when add tab to ActionBar. And in your tab/page change listener:
Tab selectedTab = yourActionBar.getSelectedTab();
View tabView = selectedTab.getCustomView();
tabView.setBackgroundColor(your_select_color);
To remove possible gap around tab caused by custom view, you can set tab style:
<style name="ActionBarTabStyle" parent="#android:style/Widget.AppCompat.Light.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
</style>
and use your theme parent accordingly.
Hope this help!

I had a similar problem. In my case, I wanted to change the color of the action bar whenever the user clicked on one of the fragments in the navigation drawer.
Here is the code I used to resolve this issue.
Since you can't access the Action bar from a fragment, you have to create it in your main menu. Here is the method I used.
public void restoreActionBar(int parsedColor) {
this.parsedColor = parsedColor;
ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setTitle(mTitle);
actionBar.setBackgroundDrawable(new ColorDrawable(parsedColor));
}
public boolean onCreateOptionsMenu(Menu menu) {
if (!mNavigationDrawerFragment.isDrawerOpen()) {
// Only show items in the action bar relevant to this screen
// if the drawer is not showing. Otherwise, let the drawer
// decide what to show in the action bar.
getMenuInflater().inflate(R.menu.main_activity_trekkly, menu);
restoreActionBar(parsedColor);
return true;
}
return super.onCreateOptionsMenu(menu);
}
Now in your class that extends fragment:
public void onAttach(Activity activity) {
super.onAttach(activity);
((MainActivityTrekkly)activity).onSectionAttached(4);
MainActivityTrekkly mA = ((MainActivityTrekkly)getActivity());
mA.restoreActionBar(Color.parseColor("#028482"));
}
I got this working with the Navigation drawer so you might have to adapt this code.
Did this help?