I am using a TabLayout. I want full screen width to be filled by TabLayout, so I added app:tabGravity="fill". My problem is that now tab text is not centered. Here is a screenshot:
The code of TabLayout is as follows:
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="#d3d3d3"
app:tabSelectedTextColor="#ffffff"
app:tabIndicatorColor="#ff00ff"
android:minHeight="?attr/actionBarSize"
/>
I have seen many questions but none of them solves my problem. Any help is highly appreciated. For details I want to tell that I am trying this example. Device is running on Android 2.3.6 (API 10). Screen is 320x240.
just do like this:-
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
Use this for adjusting the text:
android:gravity="center" OR android:textAlignment="center"
you should create a custom tab .. you are using these attributes for tabLayout which will not work ... the example link you provided above uses a file named custom_tab.xml . Use that for defining your textView and put these attributes inside it.
Add this to xml layout android:gravity="center"
you can refer this for more details
http://joshclemm.com/blog/?p=136
In default the text should be center if you do not overrided with another not centered style.
any way if you sure Gravity="center" is not working, you can also put your custom layout as tab background. so you create a relative layout that has a textView in center of it. ( in this way you are free to put wanted layout as tab items) so feel free.
TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
tabLayout.getTabAt(postion).setCustomView(resourceId);
hope helpful .
Oddly, the preview in Android Studio shows the tab labels centered, but on the device they are left-aligned.
As other answer have suggested, using a custom view is a good way to gain control over the layout.
Create a layout file layout/view_tab_label.xml with a TextView with id #android:id/text1, so you can still specify the tab text inside the TabItem:
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/tab_label"
android:gravity="center"/>
Reference this layout from the tab item (android:layout attribute in each TabItem):
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabIndicatorColor="#color/selected_tab"
app:tabBackground="#color/tab_background">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="#layout/view_tab_label"
android:text="#string/tab_1_title" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="#layout/view_tab_label"
android:text="#string/tab_2_title" />
</android.support.design.widget.TabLayout>
Create a color resource file color/tab_label.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/selected_tab" android:state_selected="true"/>
<item android:color="#color/unselected_tab" android:state_selected="false"/>
</selector>
My problem was that TextView wasn't centered inside layout. Not Text itself
So. In TextView.
android:layout_gravity="center"
Related
this is a very weird problem that I am facing for quite a lot of time. I was able to fix an issue which prevented any sort of widgets not appearing in an activity preview tab by adding "Base." to the theme. If I test it on my device, I can see my custom toolbar but in Android studio`s preview tab it all appears white. What I have tried:
1- Restarted Android studio
2- Invalidated caches and restarted Android studio
3- Changing app theme to different
toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#263238"
android:elevation="8dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="#+id/refToolbarTitleID"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEST TEXT" />
</RelativeLayout>
I can not properly setup my toolbar. Any help is appreciated, thanks!
Your forgot to add </android.support.v7.widget.Toolbar> at the end of your XML.
I think you using the toolbar in a wrong way, you have to put the toolbar inside a root layout, just like you would do it with buttons or textviews, and then you have to pin it to the top side of the screen.
I'm new to the Android Studio and on this page, I need to know how to change the color when a tab is selected.
I've tried from the design but I'm not successful. Here is the code:
android:id="#+id/tab_layout_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/logo_home"
android:background="#null"
android:visibility="visible"
app:layout_scrollFlags="enterAlways"
app:tabGravity="center"
app:tabPaddingBottom="0dp"
app:tabPaddingEnd="#dimen/content_inset_half"
app:tabPaddingStart="#dimen/content_inset_half"
app:tabPaddingTop="0dp"
app:tabTextColor="#color/tab_text_color_selector"
app:tabSelectedTextColor="#color/colorWindowsBackgroundLight"
I'll assume you are using a support library.
1...You can simply do this in your code like this:
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FF0000"));
tabLayout.setSelectedTabIndicatorHeight((int) (5 * getResources().getDisplayMetrics().density));
tabLayout.setTabTextColors(Color.parseColor("#727272"), Color.parseColor("#ffffff"));
2...You can, as well, do this in your xml. Add the following to your tab
app:tabSelectedTextColor="#color/color_primary_text"
app:tabTextColor="#color/color_secondary_text"
Your tablayout in xml will finally look like this
android:id="#+id/tab_layout_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/logo_home"
android:background="#null"
android:visibility="visible"
app:layout_scrollFlags="enterAlways"
app:tabGravity="center"
app:tabPaddingBottom="0dp"
app:tabPaddingEnd="#dimen/content_inset_half"
app:tabPaddingStart="#dimen/content_inset_half"
app:tabPaddingTop="0dp"
app:tabTextColor="#color/tab_text_color_selector"
app:tabSelectedTextColor="#color/colorWindowsBackgroundLight"
app:tabSelectedTextColor="#color/color_primary_text"
app:tabTextColor="#color/color_secondary_text" />
Try this:
xml code Tab layout
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:background="#color/button_background"
android:fillViewport="true"
app:tabBackground="#drawable/fixed_bottom_button"
app:tabIndicatorColor="#color/color_primary_text"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/color_primary_text"
app:tabTextColor="#color/color_secondary_text" />
Add two attributes in your tab layout like this
app:tabSelectedTextColor="#color/color_primary_text"
app:tabTextColor="#color/color_secondary_text"
Java Code
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FF0000"));
tabLayout.setSelectedTabIndicatorHeight((int) (5 * getResources().getDisplayMetrics().density));
tabLayout.setTabTextColors(Color.parseColor("#727272"), Color.parseColor("#ffffff"));
it helps you
Well, thanks for the support with your answers, I used a lot of all the information I found, but the problem was that I was not using a setText() in the getTabAt() method,I was using a setCustomView() which was a custom view in an xml, that's why it did not change color or the tabSelectedTextColor() methods did not work obviously.
Just remove the custom design and use the native one manually entering the title for the tabs and with this I worked.
I have a TabLayout, where I want the tabs to be displayed in the center of the screen.
Below is the XML for my TabLayout.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white"
app:tabGravity="center"
app:tabIndicatorColor="#color/about_tab_selected"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabPaddingEnd="20dp"
app:tabPaddingStart="20dp"
app:tabSelectedTextColor="#color/about_tab_selected"
app:tabTextAppearance="#style/UGTabTextAppearance"
app:tabTextColor="#color/about_tab_unselected" />
However, my Tabs are still displayed to the left, and I'm unable to center them in the Activity.
What I'm getting is this:
What I really want is:
Can somebody please tell me what I'm doing wrong here? If you need additional information regarding the rest of the XML, please let me know.
Tab gravity only effects MODE_FIXED.
One possible solution is to set your layout_width to wrap_content and layout_gravity to center_horizontal
Ok, so the problem was with layout_width="match_parent"
When I changed that to layout_width="wrap_content", it solved my problem.
The final XML is:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white"
app:tabGravity="center"
app:tabIndicatorColor="#color/about_tab_selected"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabPaddingEnd="20dp"
app:tabPaddingStart="20dp"
app:tabSelectedTextColor="#color/about_tab_selected"
app:tabTextAppearance="#style/UGTabTextAppearance"
app:tabTextColor="#color/about_tab_unselected" />
I'm using Tablayout + ViewPager as the UI frame.
There is a underline of the selected tab in tablayout.the length of text and the underline length don't equal.I wanna them equal
How to do this?
Thanks very much
I have the same requirement. You can use
app:tabIndicatorFullWidth="false"
I hope this will work for you.
You can change tabIndicator color and height like below
<android.support.design.widget.TabLayout
android:id="#id/pages_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="4dp"/>
AFAIK you the tab indicator length is set to its tab width, you can't change only indicator size
if you really want to change try changing tabWidth so indicator also vary with this change.
app:tabMaxWidth="30dp"
app:tabMinWidth="210dp"
app:tabMaxWidth="110dp"
Add just these two line of code in your XML. Its depend on your tab item. You can modified just increase and decrease both at a time.
You can add another layout over tab layout and give padding accordingly.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:layout_below="#+id/toolbar"
android:id="#+id/tabLayout"
android:background="#color/colorTangerine">
<com.techlabs.oodhaar.views.CustomTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#color/colorTangerine"
app:tabIndicatorColor="#color/colorBackground"
app:tabSelectedTextColor="#color/colorBackground"
app:tabTextColor="#color/colorBackground"
app:tabIndicatorHeight="4dp"
/>
</RelativeLayout>
I am trying to change the color of my tabStrip to white, the code below is not working? What am I doing wrong ?
getTabHost().getTabWidget().setLeftStripDrawable(Color.WHITE);
getTabHost().getTabWidget().setRightStripDrawable(Color.WHITE);
getTabHost().getTabWidget().setStripEnabled(true);
Use any drawable instead of color
means setLeftStripDrawable is requiring a drawable resource but you are giving int as a argument.
So either use a drawable image here. Or use a xml from drawable contaning the color.
i hope you want to change the color of the background of the tab strip. You could achieve this by creating a layout with a root element as
tab_strip.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
</android.support.design.widget.TabLayout>
and in your xml where you are using tab, you could add the tab_strip.xml as follows
<include android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
layout="#layout/tab_strip"/>
And this will make your tab strip colour to white.
You can change the color with app:tabIndicatorColor="#color/indicator_color inside the Tablayout.
<android.support.design.widget.TabLayout
app:tabIndicatorColor="#color/indicator_color
/>