The TabLayout documentation gives an example of nesting TabItem directly inside TabLayout like so:
<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.TabItem
android:text="#string/tab_text"/>
<android.support.design.widget.TabItem
android:icon="#drawable/ic_android"/>
</android.support.design.widget.TabLayout>
But it gives no example of how this could be used in practice, and the documentation for TabItem says:
This view is not actually added to TabLayout, it is just a dummy which allows setting of a tab items's text, icon and custom layout.
So what is TabItem for? After extensive Googling, I cannot find a single example of anyone defining TabItems in XML. Is there any way to set up a tabbed activity using TabItem in the resource file as shown above?
This appears to be a relatively recent addition to the design library, apparently added in version 23.2.0, though it's not mentioned in the revision history. It's functionality is pretty basic, and the only attributes it seems to use are the three given in its docs: text, icon, and layout.
From testing, it seems it's basically an XML shortcut for creating a new Tab, and setting its text, icon, and custom View, as one would usually do in code. When it says "This view is not actually added to TabLayout", I believe it's meant to suggest that it's not a View in the regular sense, in that you can't set any kind of standard layout attribute on it, like layout_width or background. It simply serves to cause the TabLayout to create a new Tab for each TabItem, and call setText(), setIcon(), and setCustomView() accordingly.
For example, to add a Tab in code, we would usually do something like this:
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
// Add Tab
TabLayout.Tab tab = tabLayout.newTab();
tab.setCustomView(R.layout.tab);
tab.setText("Tab 1");
tab.setIcon(R.drawable.ic_launcher);
tabLayout.addTab(tab);
Whereas now we can replace everything after the comment above by adding a TabItem in the layout.
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout="#layout/tab"
android:text="Tab 1"
android:icon="#drawable/ic_launcher" />
</android.support.design.widget.TabLayout>
Do note that the same requirements for the custom View layout still apply. That is, the TextView for the text must have the system Resource ID #android:id/text1, and the ImageView for the icon must have the ID #android:id/icon. As an example, the R.layout.tab from above:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView android:id="#android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Quick addition to #Mikes very helpful answer:
Android Studio now has a Template on how to use a TabLayout with TabItem setup in an XML layout. Create all needed files with "New > Activity > Tabbed Activity" and choose "Action Bar Tabs(with ViewPager)" as shown in the screenshot:
If you want to adjust the look of the TabItem without a custom view: use white vector assets as tab android:icon and tint them with a selector (providing different colors based on android:state_selected)
The color of the line under the currently selected tab is set as app:tabIndicatorColor on tag TabLayout.
It took me a while to get it to work, so the complete steps turned into such a long answer that I don't want to copy them here. You can find my more detailed answer with full code at:
https://stackoverflow.com/a/49603559/414581
please see com.google.android.material.tabs.TabItem class it accepts icon text from attributes, but seems like you will need to add Tags on runtime.
Related
I would like to get the background of the tab animated smoothly to the selected position (just like the default tabIndicator animates between tabs).
Here is how my TabLayout looks like
<android.support.design.widget.TabLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabLayout"
app:tabBackground="#drawable/tab_selector"
app:tabTextColor="#color/white"
android:background="#drawable/tab_layout_bg"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabIndicator="#null"
app:tabRippleColor="#null">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab1"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab2"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab3"/>
</android.support.design.widget.TabLayout>
Here, Tab 3 is selected. If i select Tab 1 the background should animate from Tab 3 to Tab 1.
I am using selector to change the background of the tabs.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="true"
android:drawable="#drawable/tab_layout_fg"/>
<item
android:drawable="#drawable/tab_layout_bg"/>
</selector>
Here i am attaching the sample animation. See just the tab bar.
Is it possible to achieve this kind of animation with approach i am following? If not please suggest me another way. I have been working on this from two days. Still can't figure it out.
Thanks in advance.
We've achieved the same effect in our app using TabLayout.
The trick for smooth animation is to use tabIndicator attirbute instead of tabBackground!
You can define a shape drawable (not selector) and assign it to TabLayout by:
app:tabIndicator="#drawable/tab_layout_fg"
This will add a tab indicator with smooth animation that you want to achieve.
If you find that tabIndicator color is not reflecting as defined in the drawable file, you can tint the tabIndicator using tabIndicatorColor attribute.
Note: Make sure you're using latest design support library v28.0.0 or material components library for Android X.
Check the #Maulik answer. It is what you are looking for.
Just to integrate the answer, without a custom shape (in your example you are using it) you can just use:
<com.google.android.material.tabs.TabLayout
app:tabIndicatorGravity="stretch"
app:tabIndicatorColor="#color/...."
..>
The INDICATOR_GRAVITY_STRETCH allows you to stretch the tab selection indicator across the entire height and width. In this way you can just use the app:tabIndicatorColor without drawable to set the selected color used.
The animation is provided by default.
I am using Google's new TabLayout from design support library and was wondering how can I center active tab inside that layout.
Currently I am centering whole layout like this:
<android.support.design.widget.TabLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
And now I would like to center active tab inside of that layout. Something like how it was done before TabLayout. No matter how many tabs were there, active one was always in center. How can I accomplish that? Thank you.
Need to use padding for SlidingTabStrip
Look here: https://stackoverflow.com/a/36886331/651770
I have a layout in my head that should look like that: http://i.imgur.com/H1nTRvd.png
Only part that will be dynamic is the blue one. I don't know the number of tabs that will be created before I load the activity, hence the number is acquired from server (could be either 5 or 24 for all I know).
The bottom buttons should not move when I swipe and the blue area changed.
Currently I have this implemented w/o tabs list using embedded fragment in my activity and gesture listener. There's no good looking transaction animation between fragments.
#Nick Pakhomov: You can use PagerTabStrip
PagerTabStrip
is intended to be used as a child view of a ViewPager widget in your XML layout. PagerTabStrip is most often used with fragment, which is a convenient way to supply and manage the Lifecycle of each fragment.
So here’s how a ViewPager with a PagerTabStrip in it would look like in the layout file:
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_tab_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#fff"
/>
</android.support.v4.view.ViewPager>
Please check this PagerSlidingTabStrip demo . I hope it will helps you .
FIRST PAGE
[/IMG]
SECOND PAGE
[/IMG]
I want show my two pages like this, When loading first page the second page title should be shown indicating the user about a second page. How can I achieve this?, I can put two tabs or viewpager with view pager indicator, i want that functionality but actually what I ask here is the view that is marked the image, the next tab to display half of its title indicating the user of next page.
Thanks in advance..
You can directly use ViewPager with PagerTabStrip provided in android support-v4 library.
Download android Support-V4 library here
Then extract the android Support-V4 jar and paste into your project libs Folder.
Right click and Add to build path.
Now use View pager with PagerTabStrip in your Main layout as:
main.xml
<?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.support.v4.view.ViewPager
android:id="#+id/viewpage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/pagetab"
>
<android.support.v4.view.PagerTabStrip
android:id="#+id/pagetab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#333333"
android:background="#ffffff"
android:layout_gravity="top"/>
</android.support.v4.view.ViewPager>
</RelativeLayout>
Now populate the ViewPager using Adapter in Main Class .see here
Now you can Achieve What you want.
I strongly advise you to use a library, instead creating the widget yourself.
That said, this library suit your requirements. It’s really easy to implement it:
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(yourViewPager);
You can found a complete implementation here
Any body please tell me how we can decrease or increase size of text in Tab button . Is it possible to do so?? I want use some large text in App.
Please help me.....
Thanks in advance
When we add tabs to our TabHost, we use TabHost.newTabSpec() to create a TabSpec object. Using the default tab look, we would call setIndicator(String, Drawable) on the TabSpec (passing the text and image we want displayed on the tab), and then call setContent(intent) on the TabSpec, passing an intent for an Activity we want to be used as that tab’s content. However, in this case, we want to use a custom layout for the tabs, and we want to simply use the Views defined in our tab_activity_layout.xml for the content, instead of individual Activities.
For custom tabs, first, we must define the custom layout of our tabs as a layout resource file. Then we will programatically inflate a View object using that layout, set whatever attributes we want, and pass it into TabSpec.setIndicator(View). Here is a very simple example layout, and some of the code to use it: Please check the link
Custom View for Tab
If you use the code yourEditText.setTextSize(16);
or if you use the .xml android:textSize="16sp"
You just could make your custom tab buttons and it is quite easy and straightforward:
Create a normal like xml layout for the tab. For example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="#+id/rlayout"
android:gravity="center_vertical|center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/icon4"
android:src="#drawable/somedrawable"
android:layout_height="42dp"
android:layout_width="42dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="News"
android:textSize="12dp"
android:textStyle="bold"
android:textColor="#FFFFFF"
android:paddingBottom="1dp"
android:layout_below ="#+id/icon4"/>
</LinearLayout>
Then in your tab activity class infalte this layout, like this:
LayoutInflater inflater0 = LayoutInflater.from(this);
View view0 = inflater0.inflate(R.layout.tabbuttonlayout, null);
Afterwards just use it normally in the tab host:
th = getTabHost();
th.addTab(th.newTabSpec("tag0").setIndicator(view0).setContent(intent0));
I hope this helps to better customize your tab.