There are two transparent vertical strips on both sides of my TabLayout. It looks like this:
It appeared after I removed android:theme="#style/AppTheme.ActionBar" from TabLayout, because it didn't show TabLayout indicator:
What might be the issue?
My layout:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="my.beeline.kz.ui.ScrollableController">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.ActionBar"
app:layout_collapseMode="none"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:titleMarginStart="#dimen/toolbar_title_margin"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
app:tabMinWidth="120dp"
app:tabSelectedTextColor="#color/black"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/gray_solid"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray_very_light"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Update:
Solution was to remove android:background="#null" from AppBarLayout
This code worked for me I hope it worked for you :
<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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<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.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Here I'm going to show you how to implement material design tabs in your android app.
1. Open build.gradle of app level and add design support library because TabLayout is a part of Android Design Support Library:
compile 'com.android.support:design:27.0.2'
2. Add Tab layout and View pager in you layout activity_main.xml or wherever you willing to add
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<include layout="#layout/app_bar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?actionBarSize"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabIndicatorHeight="4dp"
app:tabBackground="#color/colorPrimary"
app:tabMode="fixed">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
3. app_bar.xml for 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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/MyToolbarTheme"
app:title="#string/app_name"/>
4. style.xml
<style name="MyToolbarTheme"
parent="#style/ThemeOverlay.AppCompat.Dark">
<item name="colorControlNormal">#color/white</item>
<item name="titleTextColor">#color/white</item>
</style>
Some options to customize tabs appearance:
app:tabGravity=”fill” for Navigation tab gravity. Other is the centre for placing navigation tabs from centre
app:tabIndicatorColor=”#color/white” for an indicator in tabs. Here you can see the white indicator.
app:tabIndicatorHeight=”4dp” for indicator height.
app:tabMode=”fixed” for tab mode. Other is scrollable for many more tabs.
app:tabTextColor=”#color/semi_yellow” for unselected tab text color.
app:tabSelectedTextColor=”#color/yellow” for selected tab text color.
If you want to add icons to tab, you have to do is call setIcon() method of the tab. Create icon array and assign each one for each tab like this:
Tabs with the icon:
private int[] tabIcons = {
R.drawable.home,
R.drawable.notification,
R.drawable.star
};
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
And the time of Result:
Without icon
Happy Coding!!!
Related
I need to move navigation drawer icon (hamburger) from action bar to tab layout to make it look like provided for example. That should be performed on list scroll. Is there any possibility to move views from action bar to tab layout?
Action bar
Expected result
You can include a tabLayout in a toolbar like this:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:background="#color/colorPrimary"
android:layout_weight="1">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
app:tabIndicatorColor="#color/colorAccent"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="scrollable"
android:background="#color/colorPrimary" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I have a TabLayout that I'm using along with AppBarLayout, ToolBar, and ViewPager in order to have scrollable tabs. At the moment, I have a single tab, but rather than being left aligned the tab is centered.
<?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: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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Set your TabLayout attributes to:
app:tabGravity="center"
app:tabMode="scrollable"
hope this help.
Try using the XML attribute set
android:layout_gravity="left"
This is all that I could find on this topic it is documented
that set layout_gravity is a value for a tabbed layout.
More documentation here. And here
Just change TabLayout widhth to wrap_content... that will make that single tab to be left aligned
I have got AppBarLayout with Toolbar and CoordinatorLayout.
I have got RecyclerView inside this FrameLayout.
I made TabLayout.setVisibility(GONE);
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_actionbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/colorText"
app:tabSelectedTextColor="#color/colorText"
app:tabIndicatorColor="#color/colorText"
app:tabIndicatorHeight="6dp" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
My issue is white Toolbar sometimes when its back from top edge.
When white color is appear and I drag more down it is back to normal Toolbar color.
I don't know where is problem.
It is an issue with the new v 23.0.0 library. If you use v 22.2.1 or lower you wont have that issue.
I am using TabLayout and a View Pager to show multiple tabs. I want to change the selected tab indicator. I have used app:tabIndicatorColorbut the colour is not changing. It shows a greenish colour. I have read that by default the tabIndicator colour is set tocolor/accent, however the greenish colour is not my accent colour.
My xml is as below:
<?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:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/primary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/primary_light"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
app:headerLayout="#layout/header_layout"
app:menu="#menu/menu_drawer"
/>
What am I missing?
Image here: http://imgur.com/uNcbviv
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#color/material_blue_grey_800"
app:tabIndicatorColor="#color/orange"
app:tabSelectedTextColor="#color/orange"
app:tabTextColor="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
It can help You.
app:tabIndicatorColor="#color/orange" here is the line which change the color.
You can try the following customization for your TabLayout,
<android.support.design.widget.TabLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#id/pages_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="4dp"/>
This should solve the indicator color!
According to the source code of TabLayout, the tabTextColor must reference a selector color instead of a single color. This is the part in the source code where it uses getColorStateList:
if (a.hasValue(R.styleable.TabLayout_tabTextColor)) {
// If we have an explicit text color set, use it instead
mTabTextColors = a.getColorStateList(R.styleable.TabLayout_tabTextColor);
}
so you should define your colors in file like this for example res/color/your_colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:color=""#color/primary_light"/>
<item android:color="#0000ff"/>
</selector>
you can set color Programmatically like
tabLayout.setSelectedTabIndicatorColor(R.color.black);
With the new Android Support Design library, there has come some cool features with regards to the AppBar.
I'm looking at implementing the same scroll effect as shown in the gif above. (Taken from Google Play Games -> My Games)
I've had a look at adding the following attribute to the nestedscrollview, placing the content above the appbar.
app:behavior_overlapTop
It works as expected when all the components inside appbar is set to scroll.
app:layout_scrollFlags="scroll"
If I want the TabLayout to be pinned at the top, the space below it will also be pinned. So it looks weird:
In short, is there any way to create the above using the new design library, or do I have to make it some other way?
Requested XML:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/content"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBar
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="164dp"
android:background="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBar>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="32dp"/>
</android.support.design.widget.CoordinatorLayout>
Try this, Hope its work
Set app:layout_scrollFlags="scroll|enterAlways" in Toolbar
and android:scrollbars="horizontal" in TabLayout
As per my suggestion, you should remove this line app:layout_scrollFlags="scroll|enterAlways" in your TabLayout
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:app1="http://schemas.android.com/apk/res/com.samsung.ssc"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context="com.samsung.ssc.LMS.LMSListActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutLMSList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpagerLMSList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCreateNewLMS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="right|bottom"
android:layout_margin="#dimen/margin_15"
android:onClick="onNewLeaveCreateClick"
android:src="#drawable/ems_pencil"
app1:rippleColor="#color/ems_status_sky_blue_color"
app:backgroundTint="#color/ems_status_yellow_color"
app:borderWidth="#dimen/margin_0"
app:elevation="#dimen/margin_5" />