I have made a CustomView for the tabs in the TabLayout that contains aTextViewfor the tab title andImageViewfor the icons
But when I click on a tab, the text for the selected tab is not highlighted!
I have tried every combination of XML attributes for the tablayout wigdet and nothing is working out. I tried to Google the problem, but couldn't find any solutions.
MainActivity.class
The implemeneation of the Tablayoyut with custom view.
mainTablayout = (TabLayout) findViewById(R.id.tablayout_activity_main);
mainViewpager = (ViewPager) findViewById(R.id.main_viewpager);
mainTablayout.addTab(mainTablayout.newTab().setText("Search"));
mainTablayout.addTab(mainTablayout.newTab().setText("Inbox"));
mainTablayout.addTab(mainTablayout.newTab().setText("Edit"));
mainTablayout.addTab(mainTablayout.newTab().setText("Profile"));
mainTablayout.getTabAt(0).setCustomView(R.layout.custom_tablayout).setIcon(R.drawable.ic_search);
mainTablayout.getTabAt(1).setCustomView(R.layout.custom_tablayout).setIcon(R.drawable.ic_tab_envelope);
mainTablayout.getTabAt(2).setCustomView(R.layout.custom_tablayout).setIcon(R.drawable.ic_tab_cogwheel);
mainTablayout.getTabAt(3).setCustomView(R.layout.custom_tablayout).setIcon(R.drawable.ic_tab_profile_1);
mainViewpager.setAdapter(new MainPagerAdapter(getSupportFragmentManager()));
mainViewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mainTablayout));
mainTablayout.addOnTabSelectedListener(this);
custom_tablayout.xml:
The layout for the custom tabs
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<TextView
android:textSize="12sp"
android:textStyle="bold"
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-6dp" />
</LinearLayout>
activity_main.xml:
This is the attribute used on the Tablayout wigdet
<android.support.design.widget.TabLayout
android:id="#+id/tablayout_activity_main"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentBottom="true"
android:layout_below="#id/tablayout_activity_main"
android:background="#f5f5f5"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabTextColor="#color/tab_off"
app:tabSelectedTextColor="#color/colorPrimary" />
You could try to select the tab through the tab-layout.
I'm using com.android.support:design:23.2.1 support library.Using below code you can highlight selected tab.
tabLayout.getTabAt(0).select();
You can refer following link: https://guides.codepath.com/android/google-play-style-tabs-using-tablayout
Related
I am using a library for sliding tabSmartTabLayout - ogaclejapan. I want to add one more sliding tab inside one tab of parent sliding tab. But when I do so I can't see the second sliding tab.
Refer the image
Here is the MainActivity which contains the parent sliding tab.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:id="#+id/root"
tools:context="com.virtualsquadz.letsgo.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:id="#+id/topBar"
android:layout_marginTop="#dimen/_16sdp"
android:paddingBottom="#dimen/_5sdp">
<ImageButton
android:layout_width="wrap_content"
android:id="#+id/backButton"
android:layout_height="wrap_content"
android:src="#drawable/back_0"
android:background="#null"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/title_transport"
android:text="Getting Around"
style="#style/title_transport"
android:paddingTop="#dimen/_2sdp"
android:layout_centerInParent="false"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
<com.ogaclejapan.smarttablayout.SmartTabLayout
android:id="#+id/viewpagertab"
android:layout_below="#id/topBar"
android:layout_width="match_parent"
android:layout_height="48dp"
app:stl_indicatorAlwaysInCenter="false"
app:stl_indicatorWithoutPadding="false"
app:stl_indicatorInFront="false"
app:stl_indicatorInterpolation="smart"
app:stl_indicatorGravity="bottom"
app:stl_indicatorColor="#40C4FF"
app:stl_indicatorThickness="4dp"
app:stl_indicatorWidth="auto"
app:stl_indicatorCornerRadius="2dp"
app:stl_overlineColor="#4D000000"
app:stl_overlineThickness="0dp"
app:stl_underlineColor="#4D000000"
app:stl_underlineThickness="1dp"
app:stl_dividerColor="#4D000000"
app:stl_dividerThickness="1dp"
app:stl_defaultTabBackground="?attr/selectableItemBackground"
app:stl_defaultTabTextAllCaps="true"
app:stl_defaultTabTextColor="#color/flight_white"
app:stl_defaultTabTextSize="#dimen/_12sdp"
app:stl_defaultTabTextHorizontalPadding="#dimen/_16sdp"
app:stl_defaultTabTextMinWidth="0dp"
app:stl_distributeEvenly="true"
app:stl_clickable="true"
app:stl_titleOffset="24dp"
app:stl_drawDecorationAfterTab="false"
/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/viewpagertab"
android:layout_marginTop="#dimen/_5sdp"
/>
</RelativeLayout>
MainActivity.java
SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
ViewPager viewPager=(ViewPager)findViewById(R.id.viewpager) ;
ViewPagerItemAdapter adapter = new ViewPagerItemAdapter(ViewPagerItems.with(this)
.add(R.string.transportOption1, R.layout.activity_flights)
.add(R.string.transportOption2, R.layout.activity_train)
.add(R.string.transportOption3, R.layout.activity_buses)
.add(R.string.transportOption4, R.layout.activity_cars)
.create());
viewPager.setAdapter(adapter);
viewPagerTab.setViewPager(viewPager);
Similary I designed for 'trains' inside train.java
SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab2);
ViewPager viewPager=(ViewPager)findViewById(R.id.viewpager2) ;
ViewPagerItemAdapter adapter = new ViewPagerItemAdapter(ViewPagerItems.with(this)
.add(R.string.trainSearchOption1, R.layout.trainsearchoption1)
.add(R.string.trainSearchOption2, R.layout.trainsearchoption2)
.create());
viewPager.setAdapter(adapter);
viewPagerTab.setViewPager(viewPager);
I tried to find the solution from here. But unfortunately I couldn't find an answer. If you are wondering which ViewPager should be called if they are nested then take a situation as example - First child view pager is called when swipping left / right and when we are at extreme end of left / right respectively of child view pager then parent view pager is called. Or we can also click on tabs of parent to change it.
Google Material Design guidelines doesn't allow using nested tabs. It is a bad programming practice.
It is highly recommend to modify your UI to conform to Google design guidelines.
I can't deal with setting custom view on TabLayout tabs. I want to set underline (like indicator on active tab) with specific color on every inactive tab. I created view in this way:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#style/tab_layout_item"
android:layout_centerInParent="true"
tools:text="All in"/>
<View
android:layout_width="wrap_content"
android:layout_height="7dp"
android:background="#color/colorPrimaryDark"
android:layout_alignParentBottom="true"/>
but wrap_content parameter didn't work and view occupied max tab width.
Here is my TabLayout xml:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/background_primary"
app:tabIndicatorHeight="0dp"
app:tabMode="scrollable"
app:tabGravity="fill"
app:tabPaddingBottom="0dp"
app:tabPaddingTop="0dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
android:layout_gravity="bottom"/>
How to create custom view for TabLayout tabs which is suited to text inside (especially when String inside is short)?
Maybe is a better way to achieve this result?
Inflate your tabs:
LayoutInflater inflater = getActivity().getLayoutInflater();
RelativeLayout tab1 = (RelativeLayout) inflater.inflate(R.layout.component_custom_tab,null);
RelativeLayout tab2 ...
Add id to your divider:
<View
android:id="#+id/divider"
android:layout_width="wrap_content"
android:layout_height="7dp"
android:background="#color/colorPrimaryDark"
android:layout_alignParentBottom="true"/>
Set color for each tab:
tab1.findViewById(R.id.divider).setBackgroundColor(getColor(R.color.color_1));
tab2 ....
Add tabs in TabLayout:
mTabLayout.addTab(mTabLayout.newTab().setCustomView(tab1), index1);
mTabLayout.addTab(mTabLayout.newTab().setCustomView(tab2), index2);
...
I have a simple Layout in a Dialog with a AppCompat Toolbar and TabLayout inside. I want my tabs to have icons left of text.
Here is a layout of the dialog.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
/>
</android.support.v7.widget.Toolbar>
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
then I programatically add the tabs.
tabs.addTab(tabs.newTab()
.setTag(SettingsTabTag)
.setText("Settings")
.setIcon(R.drawable.scan_tab_settings_black), true);
tabs.addTab(tabs.newTab()
.setTag(MetadataTabTag)
.setText("Metadata")
.setIcon(R.drawable.scan_tab_metadata_black));
But the icon is always rendering above the text and a very small.
1.create a custom tab layout
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"/>
2.IN Your activity set the custom tab
TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
newTab.setText("tab1"); //tab label txt
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);
setCompoundDrawablesWithIntrinsicBounds does the work.
Here are code commonly used to get icon to the left of tab title.
In my case, I have to add a linear layout to center tablayout title. I have also added some space characters to get margin between the icon and the text.
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="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="#+id/tabContent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAlignment="center"
android:textColor="#android:color/white"
android:gravity="center"/>
</LinearLayout>
Initialization code:
LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
tabContent.setText(" "+getApplicationContext().getResources().getString(tabTitles[i]));
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i], 0, 0, 0);
mTabLayout.getTabAt(i).setCustomView(tabContent);
So the effect will be each individual tab will be a little larger in addition to the text color change. I've tried using the setCustomTabView() but it only applies to the first tab and the rest of my tabs are unrendered.
So here is an example using setCustomTabView():
In your layout you have the ViewPager and the SlidingTabLayout :
<com.yourProject.SlidingTabLayout <--- IMPORT latest from Google[*see link]
android:id="#+id/sliding_tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager android:id="#+id/viewPager"
android:layout_marginTop="#dimen/text_size_medium"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/SlidingTabLayout.java and also here you will find SlidingTabStrip, which is also needed.
Then in your fragment or activity, set the custom view for the the sliding tab like this:
viewPager = (ViewPager) rootView.findViewById(R.id.viewPager);
mSlidingTabLayout = (SlidingTabLayout) rootView.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.accent));
mSlidingTabLayout.setCustomTabView(R.layout.sliding_tab_layout_custom, R.id.item);
mSlidingTabLayout.setDistributeEvenly(false);
mSlidingTabLayout.setViewPager(viewPager);
With your custom layout for the tab being:
../layout/sliding_tab_layout.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="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/text_size_small"
android:textColor="#color/primary"
android:textSize="#dimen/text_size_medium"/>
</LinearLayout>
The example was tested, so it should work. Hope it helps :)
Here is my layout inside ViewPager. I would like to change the color of the current tab highlighter which is below the text. Actually it is showing in black color. But I don't know whether it is a color by default or not. And also I have one more doubt. If I use PagerTitleStrip this tab highlighter doesn't appear. Is there a way to bring that with titlestrip?
Here is my layout:
<android.support.v4.view.PagerTabStrip android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#color/pager_titlestrip_bg"
android:textColor="#color/pager_titlestrip_text"
android:paddingTop="5dp"
android:paddingBottom="4dp" >
</android.support.v4.view.PagerTabStrip>
This just works.
PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_title_strip);
pagerTabStrip.setDrawFullUnderline(true);
pagerTabStrip.setTabIndicatorColor(Color.RED);
Thanks!
It can be done in both programmatically with jAVA or with XML
By XML
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#android:color/white"
android:layout_height="wrap_content" />
Or more simply you can solve this Code aswell
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
Similarly to change the Height
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
This works in my project.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
app:tabGravity="fill"
app:tabIndicatorColor="#color/text3"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/text3"
app:tabTextColor="#000" />