I have two question with TabLayout
1)Can i remove TabLayout highlight or change highlight color of tab layout?
2)Can i add ripple effect for tab. Each tab contain TextView i try to add custom background something like this
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#drawable/btn_white_bg" />
</ripple>
but it doesn't work.
To remove the highlight, add the below line to your XML:
app:tabRippleColor="#android:color/transparent"
Another solution that works for me
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
app:tabMode="fixed"
app:tabGravity="fill"
android:clipToPadding="false"
android:elevation="0dp"
style="#style/MyCustomTabLayout"
android:background="#color/colorPrimary"
app:tabBackground="?attr/selectableItemBackground"
app:tabIndicatorColor="#color/app_yellow"
app:tabIndicatorHeight="4dip"
android:layout_height="wrap_content"/>
I just added following lines
android:background="#color/colorPrimary"
app:tabBackground="?attr/selectableItemBackground"
You can customize the TabLayout like this:
Make a xml file inside values MyCustomTabLayout.xml and then put these
<resources>
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">#dimen/tab_max_width</item>
<item name="tabIndicatorColor">#color/black</item>
<!-- <item name="tabIndicatorColor">?attr/colorAccent</item> -->
<item name="tabIndicatorHeight">5dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">#style/MyCustomTabTextAppearance</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">16sp</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
</style>
and inside ur layout add this:
<android.support.design.widget.TabLayout
android:id="#+id/mainSlidingTab"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tool_bar"
android:background="#color/ColorPrimary" />
<!-- app:tabMode="scrollable" when many tabs -->
Alternatively, you can make the ripple transparent programmatically:
val tabs = findViewById<TabLayout>(R.id.your_tablayout)
for (n in 0 until tabs.tabCount) {
val tab = (tabs.getChildAt(0) as ViewGroup).getChildAt(n)
tab?.let {
val ripple = it.background as? RippleDrawable
ripple?.setColor(ColorStateList.valueOf(Color.parseColor("#00000000")))
}
}
This approach can also be used to set own ripple color for each tab.
Related
i am using databinding to change the color of the selected tab of tab layout
#BindingAdapter(value = ["tabIndicatorColor", "context"])
fun setSelectedTabIndicatorColor(tabLayout: TabLayout, color: Int, context: Context) {
tabLayout.setSelectedTabIndicatorColor(getColor(context, color))
}
and setting it from the tabLayout view
<variable
name="professionalTypeColor"
type="Integer" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl_images"
android:layout_width="0dp"
android:layout_height="5dp"
tabIndicatorColor="#{professionalTypeColor}"
context="#{context}"
app:tabPaddingEnd="8dp"
app:tabPaddingStart="8dp" />
what i did until here is exactly as i wanted it to be, but for the unselected tabs i couldn't make a databinding Adapter for it so i change its color dynamically ,
i tried using
app:tabBackground="#color/grey"
or
app:tabBackground="#drawable/selector_tab_indicator"
but this need to be predefined color or a drawable with two colors (selected,unselected) which is not my desired result,
my question is how to make a databinding adapter to set the tabBackground dynamically , ( i couldn't find a setter in tablayout with attribute of tabbackground )
Create a style in style.xml and call in xml layout like below
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabTextAppearance">#style/MyCustomTabTextAppearance</item>
<item name="tabSelectedTextColor">#color/colorAccent</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">#dimen/title_text_size</item>
<item name="android:textColor">#color/secondaryText</item>
<item name="textAllCaps">false</item>
<item name="android:textStyle">normal</item>
</style>
Call here
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#android:color/white"
app:tabMode="scrollable"
**style="#style/MyCustomTabLayout"**
app:tabGravity="fill" />
I'm having this issue when I touch an EditText for changing text on Android:
A white frame appears around the red cursor, and I need it to be transparent for showing properly the line of the EditText. How do I change this?
code:
<EditText
android:id="#+id/login_user_name_text"
android:textCursorDrawable="#null"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="16sp"
android:inputType="textEmailAddress"
android:imeOptions="actionNext"
android:maxLines="1"
android:hint="#string/email"
android:maxLength="60"
/>
EDIT: I could fix it by replacing:
<item name="android:background">#color/white</item>
for
<item name="android:background">#color/transparent</item>
in styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDisablePreview">true</item>
<item name="android:background">#color/transparent</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
Sorry for the late,
I think you have <item name="android:popupBackground">#color/white</item> in your style from v21, just remove it, It may solve your problem
Another solution, which works if you are having this problem with an EditText inside a SearchView while using a Toolbar.
In your activity XML add the android:background="?attr/colorPrimary" attribute to Toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
android:background="?attr/colorPrimary"
android:elevation="2dp" />
Then, remove <item name="android:background">#color/colorPrimary</item> from your ToolBarStyle in styles.xml.
Hope this helps someone else looking for a solution for this particular case.
better using #android:color/transparent instead of null on the android:textCursorDrawable="#android:color/transparent"
Add the following to your EditText XML instead of null;
android:textCursorDrawable="#drawable/colorcursor"
Then, create a file called colorcursor.xml inside your drawable folder;
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="3dp" />
<solid android:color="#FFFFFF" />
</shape>
Setting android:background to transparent didn't do the trick for me.
In my case I set a theme to the parent viewgroup that defined the background to be a certain color, so it was applied to the EditText as well. Making sure that the background was just set for the parent solved it.
I want to change my toolbar text size and gravity. I create style in styles.xml like this:
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">normal</item>
<item name="android:color">#color/colorHighlight</item>
<item name="android:gravity">center</item>
</style>
and I set titleTextAppearance, everything here looks perfect but it didn't worked. My custom toolbar:
<?xml version="1.0" encoding="utf-8"?>
<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="?attr/actionBarSize"
android:background="#009688"
android:titleTextAppearance="#style/Toolbar.TitleText"
android:paddingTop="0dp"
app:theme="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
What is wrong with my toolbar?
my toolbar
try using
app:titleTextAppearance="#style/Toolbar.TitleText"
instead of
android:titleTextAppearance="#style/Toolbar.TitleText"
as shown here
For centering gravity refer to this question and this question
I would like to know that is it possible to change selected tab colour in new design tablayout? I found the solution for selected tab text color but I would like to know to change tab colour itself.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/TabLayout.Theme"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#+id/tabs"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
<style name="TabLayout.Theme" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/black</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabTextAppearance">#style/TextAppearance.Jacksonville.Tab</item>
<item name="tabSelectedTextColor">#color/text_dim</item>
<item name="tabBackground">#color/color_heading</item>
</style>
i need to change selected tab colour like this.
you just need to set app:tabBackground attribute
app:tabBackground="#drawable/tab_selector_color"
and create a drawable file as tab_selector_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/tab_selected" android:state_selected="true"/>
<item android:drawable="#color/tab_unselected"/>
</selector>
so The complete xml code will be look like
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="android:attr/listPreferredItemHeight"
android:minWidth="0dp"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="#color/white"
app:tabIndicatorColor="#color/mainBlue"
app:tabBackground="#drawable/tab_color_selector"/>
hi you can make the hight of the indicator to equal the height of the tablayout so the indicator will cover the all size of the selected item in tab layout
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<!-- the color you want in selected tab -->
<item name="tabIndicatorColor">#50000000</item>
<item name="tabTextAppearance">#style/MyCustomTabTextAppearance</item>
<!-- set the indicator hieght equal to tablayout height -->
<item name="tabIndicatorHeight">60dp</item>
<item name="tabSelectedTextColor">#222222</item>
I have difficulties changing the text size of the tabs of design library tablayout (android.support.design.widget.TabLayout).
I managed to change it by assigning tabTextAppearance in TabLayout
app:tabTextAppearance="#style/MyTabLayoutTextAppearance"
the following style
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
<item name="android:textSize">14sp</item>
</style>
but I have 2 side effects :
1) I lost the accent color of the selected tab
2) The tab text is not capitalized any more.
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">16sp</item>
</style>
Use is in TabLayout like this
<android.support.design.widget.TabLayout
app:tabTextAppearance="#style/MineCustomTabText"
...
/>
Go on using tabTextAppearance as you did but
1) to fix the capital letter side effect add textAllCap in your style :
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">true</item>
</style>
2) to fix the selected tab color side effect add in TabLayout xml the following library attributes :
app:tabSelectedTextColor="#color/color1"
app:tabTextColor="#color/color2"
Hope this helps.
Work on api 22 & 23
Make this style :
<style name="TabLayoutStyle" parent="Base.Widget.Design.TabLayout">
<item name="android:textSize">12sp</item>
<item name="android:textAllCaps">true</item>
</style>
And apply it to your tablayout :
<android.support.design.widget.TabLayout
android:id="#+id/contentTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/list_gray_border"
app:tabTextAppearance="#style/TabLayoutStyle"
app:tabSelectedTextColor="#color/colorPrimaryDark"
app:tabTextColor="#color/colorGrey"
app:tabMode="fixed"
app:tabGravity="fill"/>
Do as following.
1. Add the Style to the XML
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
</style>
2. Apply Style
Find the Layout containing the TabLayout and add the style. The added line is bold.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabTextAppearance="#style/MyTabLayoutTextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Try the snipped which is mentioned below, it works for me also.
In my layout xml where I have my TabLayout, have added style to the TabLayout like below :
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
and in my style.xml I have defined the style that is used in my layout xml, check code for styles added below :
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="android:background">YOUR BACKGROUND COLOR</item>
<item name="tabTextAppearance">#style/MyCustomTabText</item>
<item name="tabSelectedTextColor">SELECTED TAB TEXT COLOR</item>
<item name="tabIndicatorColor">SELECTED TAB INDICATOR COLOR</item>
</style>
<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
<item name="android:textSize">YOUR TEXT SIZE</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#android:color/white</item>
</style>
I hope it will work for you.....
I have similar problem and similar resolution:
1) Size
in the xml you have TabLayout,
<android.support.design.widget.TabLayout
...
app:tabTextAppearance="#style/CustomTextStyle"
...
/>
then in style,
<style name="CustomTextStyle" parent="#android:style/TextAppearance.Widget.TabWidget">
<item name="android:textSize">16sp</item>
<item name="android:textAllCaps">true</item>
</style>
If you do not want the characters in uppercase put false in "android:textAllCaps"
2) Text color of selected or unselected Tabs,
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector,null));
} else {
tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector));
}
then in res/color/tab_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_selected="true" />
<item android:color="#color/white" />
TabLayout tab_layout = (TabLayout)findViewById(R.id.tab_Layout_);
private void changeTabsFont() {
Typeface font = Typeface.createFromAsset(getActivity().getAssets(), "fonts/"+ Constants.FontStyle);
ViewGroup vg = (ViewGroup) tab_layout.getChildAt(0);
int tabsCount = vg.getChildCount();
for (int j = 0; j < tabsCount; j++) {
ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
int tabChildsCount = vgTab.getChildCount();
for (int i = 0; i < tabChildsCount; i++) {
View tabViewChild = vgTab.getChildAt(i);
if (tabViewChild instanceof TextView) {
((TextView) tabViewChild).setTypeface(font);
((TextView) tabViewChild).setTextSize(15);
}
}
}
}
This code is works for me using tablayout.
It will change size of fonts and also change font style.
This will also help you guys please check this link
https://stackoverflow.com/a/43156384/5973946
This code works for Tablayout change text color,type face (font style) and also text size.
I was using Android Pie and nothing seemed to worked so I played around with app:tabTextAppearance attribute. I know its not the perfect answer but might help someone.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabTextAppearance="#style/TextAppearance.AppCompat.Caption" />
XML FILE IN VALUES
<style name="tab">
<item name="android:textSize">#dimen/_10ssp</item>
<item name="android:textColor">#FFFFFF</item>
</style>
TAB LAYOUT
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_27sdp"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_marginRight="#dimen/_10sdp"
app:layout_constraintEnd_toEndOf="parent"
app:tabTextAppearance="#style/tab"
app:tabGravity="fill"
android:layout_marginTop="#dimen/_10sdp"
app:layout_constraintStart_toStartOf="parent"
>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TAB 1"
android:scrollbarSize="#dimen/_4sdp"
/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbarSize="#dimen/_6sdp"
android:text="TAB 2" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbarSize="#dimen/_4sdp"
android:text="TAB 3" />
</com.google.android.material.tabs.TabLayout>
> **create custom style in styles.xml** <style name="customStylename"
> parent="Theme.AppCompat">
> <item name="android:textSize">22sp</item> <item name="android:color">colors/primarydark</item>
> </style>
>
> **link to your material same name **
> <android.support.design.widget.TabLayout
> android:layout_width="match_parent"
> android:layout_height="wrap_content"
> android:id="#+id/tabs"
> app:tabTextAppearance="#style/customStylename"
> />
this is my solution
fun TabLayout.customizeTabSizeAndFont() {
val tabFont = Typeface.createFromAsset(context.assets, "font.ttf")
val tabTextSize = 21f
val viewGroup = this.getChildAt(0) as ViewGroup
for (tabVGPos in 0..viewGroup.childCount) {
val tabViewGroup = viewGroup.getChildAt(tabVGPos) as ViewGroup?
tabViewGroup?.let {
for (tabPos in 0..tabViewGroup.childCount) {
val tab = tabViewGroup.getChildAt(tabPos)
if (tab is TextView) {
tab.typeface = tabFont
tab.setTextSize(TypedValue.COMPLEX_UNIT_SP, tabTextSize)
}
}
}
}
}