Here is what I did: I created a style for the text
<!-- Change tab text appearance -->
<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
<item name="android:textAppearance">#style/CustomTabWidgetText</item>
</style>
<style name="CustomTabWidgetText"
parent="#android:style/TextAppearance.Widget.TabWidget">
<item name="android:textSize">16sp</item>
</style>
then I set it to my tablayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.HomeActivity"
tools:showIn="#layout/app_bar_main">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:titleTextColor="#ffffff"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
app:tabSelectedTextColor="#ffffff"
app:tabTextAppearance="#style/MyCustomTextAppearance"
app:tabTextColor="#ffffff" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout" />
</RelativeLayout>
Here is the result:
As you can see, the "D-day complete" text is smaller than others. I have request to make its size equal to others but I dont know how. Please help me, thanks.
You can try to set padding in TabLayout
(app:tabPaddingStart="-1dp", app:tabPaddingEnd="-1dp")
like
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
app:tabSelectedTextColor="#ffffff"
app:tabTextAppearance="#style/MyCustomTextAppearance"
app:tabTextColor="#ffffff"
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"/>
It helped me)
Per this post, this worked really well for me:
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="fill"
app:tabIndicatorHeight="5dp"
/>
The tabMode and tabGravity attributes did the trick. This lets the labels span as long as need be and scroll like so:
After experiencing something similar, and after reading the TabLayout source code, I try overriding a dimension, in my dimens.xml file, like this:
<dimen name="design_tab_text_size_2line" tools:override="true">48sp</dimen>
and don't forget to add the namespace in the root of your file, like this:
<resources xmlns:tools="http://schemas.android.com/tools">
and it works for me.
Hope it helps!
EDIT :
It seems like it doesn't work on every situation (it's actually supposed to work when your text has two lines or more), but it helps when the style doesn't work. So what I do is that I use both technics (style and overridden dimension).
This is works for me:
app:tabMode="scrollable"
app:tabGravity="fill"
In think the best approach is to use a custom view. You will have the maximum flexibility. For instance:
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="36dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabGravity="fill"
app:tabMode="fixed">
<com.google.android.material.tabs.TabItem
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout="#layout/view_tab_text_layout" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout="#layout/view_tab_text_layout" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tab3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout="#layout/view_tab_text_layout" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tab4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout="#layout/view_tab_text_layout" />
</com.google.android.material.tabs.TabLayout>
The view_tab_text_layout could be:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:background="#color/colorPrimary"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatTextView
android:maxLines="1"
android:lines="1"
android:id="#+id/tabTextView"
android:textColor="#android:color/white"
android:textAllCaps="false"
android:textSize="18dp"
android:textStyle="bold"
app:autoSizeMaxTextSize="18dp"
app:autoSizeMinTextSize="12dp"
android:ellipsize="end"
app:autoSizeTextType="uniform"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
tools:text="Tab 1" />
</FrameLayout>
And you can access the the custom views like this:
tabLayout = findViewById(R.id.tabs);
((TextView) tabLayout.getTabAt(0).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab1);
((TextView) tabLayout.getTabAt(1).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab2);
((TextView) tabLayout.getTabAt(2).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab3);
((TextView) tabLayout.getTabAt(3).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab4);
As full working example could be found here: https://bitbucket.org/mspapant/tablayout-example
Related
I'm trying to achieve AppbarLayout with background, inside the AppbarLayout to have a static Toolbar, under the the Toolbar i'm using a CollpasingToolBar that now contains a Toolbar and later supposed to include also a Custom View that it's content will be scaled according to scrolling position, and in the bottom of the AppBarLayout i'm using a TabLayout.
The issue i can't resolve is: i want that the AppbarLayout Drawable will be also be spread over the status bar, currently i failed to achieve this.
I'm attaching the xml layout and also a screen shot:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:windowDrawsSystemBarBackgrounds = "true"
android:statusBarColor="#android:color/transparent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#drawable/winterscenery"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="180dp"
app:statusBarScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Two" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Three" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_text_one" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_button" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_text_two" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
After editing Manifest file :
<activity android:name=".ExitUntilCollapsedActivity" android:theme="#style/JustTryStyle" />
And creating the JustTryStyle style:
<style name="JustTryStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
</style>
I got the following apperance:
In your theme you need to add
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
Edit:
Add these two to the theme your activity uses as defined in the AndroidManifest.
If other activities also use use this theme but should not have the transparent navigationbar then you need to extend it and update your AndroidManifest accordingly.
Edit 2: try adding <item name="android:windowTranslucentStatus">true</item> instead or additionally
Edit 3: also add fitSystemWindow=true to constraintlayout and appbar
I wanted to create tabs aligned at the top. I was wondering if it was possible to add the icons which are listed in items within the menu.xml by using the app:menu/top_home_menu. If not is there any simpler way than just TabLayout.getTabAt(index).setIcon(directory)?
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentTop = "true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabs"
android:background="#drawable/white_grey_boarder_top"
app:menu="#menu/top_home_menu">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
</merge>
I thought it like how bottomnavigationbar could add the icons through making seperate menu
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomNavViewBar"
android:background="#drawable/white_grey_boarder_top"
app:menu="#menu/bottom_navigation_menu">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
</merge>
In new version of TabLayout, google added TabItem which easily can add Icon through your XML with following code:
<android.support.design.widget.TabLayout
app:tabTextColor="#color/gray"
app:tabMode="fixed"
app:tabBackground="#color/red"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#color/purple"
app:tabPadding="2dp"
app:tabSelectedTextColor="#color/white"
app:tabMinWidth="64dp"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<!--add height and width to TabItem -->
<android.support.design.widget.TabItem
android:text="#string/tab_text"/>
<android.support.design.widget.TabItem
android:icon="#drawable/ic1"/>
Please refer this link for more information link here
Hope this wil help
I have a tablayout with 6 tabs. Tabs are fixed in the display but their text does not show completely. I do the solutions in here so that I can summarize them in these lines:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
But it did not solve my problem. I also use custom TabLayout in here and still I have the same problem.
Here are my codes:
I use a custom tablayout with this custom_tab.xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:layout_centerHorizontal="true"
android:id="#+id/tabIcon"/>
<CustomViews.CustomTextView
android:id="#+id/basket_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:background="#drawable/notification_circle"
android:padding="2dp"
android:textColor="#ffffff"
android:textSize="8sp" />
<CustomViews.CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/tab_inactive"
android:textSize="8sp"
android:layout_centerHorizontal="true"
android:layout_below="#id/tabIcon"
android:layout_marginBottom="2dp"
android:maxLines="1"
android:id="#+id/tabTitle"/>
</RelativeLayout>
The first ImageView shows the tab icon. The next ImageView is used for the badge and the CustomTextView is used for showing the tab title.
Here is my layout file include tablayout:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabMaxWidth="0dp"
android:layoutDirection="rtl"
android:id="#+id/avatar_tabLayout"
app:tabIndicatorColor="#null"
/>
</LinearLayout>
Is there a way to set up tab width with Maximum existence tab size? Or any other solutions?
Try to get rid off
app:tabGravity="fill"
app:tabMode="fixed"
in your <android.support.design.widget.TabLayout
Replace it with app:tabMode="scrollable"
I'm using a viewpager to show fragments on my app, but I'm having some issues with the XML, I would like to fix my code because when I run the fragments, the viewpager doesn't show the the last part of the design, I'm using a listview on each fragment, and the last row is being cut. What do I need to change on my code to fix that?
Code:
<android.support.design.widget.CoordinatorLayout 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="match_parent"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#c42542">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="8dp"
android:background="#d12240"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:text="Live rooms"
android:textColor="#ffffff"
android:textSize="18dp" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="23dp"
android:src="#mipmap/ic_share" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="20dp"
android:src="#mipmap/ic_search" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<!-- Scrollable View -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Thank you.
Hey it seems this can occur when using ListView within the CoordinatorLayout, but you can fix it by simply changing it to a RecycleView. There's also a solution for Android 5.0+. Check out Sha's answer here for more info.
Assign bottom margin to Listview.
<ListView
android:paddingBottom= "20dp"/>
I have a 11 Fragment in the viewPager, and when tablayout want to show these 11 fragment name , their text not show correctly.
this is the screenshot of my problem :
and this is my activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/xmlDrawerLayoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.Toolbar
android:id="#+id/xmlToolbarMain"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- navigation opener -->
<ImageButton
android:id="#+id/btnHomeToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="?attr/colorPrimary"
android:paddingRight="10dp"
android:clickable="true"
android:src="#drawable/menu"/>
<!-- app name -->
<TextView
android:id="#+id/txttitleToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title"
android:layout_gravity="right"
android:textColor="#ffffff"
android:textSize="16sp"
android:paddingRight="10dp"/>
<!-- search box-->
<ImageButton
android:id="#+id/btnSearchToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:paddingLeft="10dp"
android:clickable="true"
android:src="#drawable/search"
android:background="?attr/colorPrimary"/>
</android.support.v7.widget.Toolbar>
<!-- Tablayout -->
<android.support.design.widget.TabLayout
android:id="#+id/xmlTabLayoutMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/xmlToolbarMain"
android:background="?attr/colorPrimary"
android:elevation="8dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- ViewPager -->
<android.support.v4.view.ViewPager
android:id="#+id/xmlViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/xmlTabLayoutMain"/>
<!-- navigationDrawer -->
<!--<android.support.design.widget.NavigationView-->
<!--android:id="#+id/xmlNavigation"-->
<!--android:layout_width="198dp"-->
<!--android:layout_height="match_parent"-->
<!--android:layout_gravity="start"-->
<!--app:headerLayout="#layout/header_navigation_view"-->
<!--app:menu="#menu/nav_menu" />-->
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
and I set this on my tablayout in the MainActivity.java but still i have a problem :
appTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
try to use like that
<android.support.design.widget.TabLayout
android:id="#+id/xmlTabLayoutMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/xmlToolbarMain"
android:background="?attr/colorPrimary"
android:elevation="8dp"
app:tabMode="scrollable"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
also try to use if not working
app:tabGravity="fill"
tabMode will make your tab scrollable.So it should solve your problem.
You could create a custom style for your text and there define all the constraints like normal text view attributes. then just set tab text appearance to your custom style.
Your tab layout will be like -
<android.support.design.widget.TabLayout
android:id="#+id/tabs_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabTextAppearance="#style/MineCustomTabText"
app:tabMode="scrollable"
/>
And in your style.xml file define the style, like this -
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">16sp</item>
<item name="android:maxLines">1</item>
</style>