I'm referencing a great demo here regarding material design. It has tabs, but when I add too many the tab items get squished (see screenshot). How can I make it scroll horizontally?
I believe below is the layout I should make the change, but I combed the docs and can't seem to get it, pls help!
<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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
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.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
TabLayout has a method setTabMode() which can be either MODE_FIXED (default) or MODE_SCROLLABLE which is what you need.
You can also define this in XML with app:tabMode="scrollable".
You can add this app:tabMode="scrollable" to your android.support.design.widget.TabLayout
If you added
app:tabMode="scrollable"
like mentioned above and it,
shows the layout and you are not able to scroll
Then maybe you have put it at the top of the XML file and below it added matchh_parent (height/width) to the ViewPager. Because the viewpager is above the tab layout you will not be able to scroll.
Add it at the bottom of the XML so another view does to overlap the tab layout.
SlidingTabLayout and SlidingTabStrip classes is what are you looking for
You need to copy these classes from google developers site, add sliding tab layout in xml, and in set viewpager for sliding tab layout in java. Hope it'll help.
Related
I need image witch partly in toolbar and partly in view. I does not find good examples of it, maybe someone know how to do it? I currently work in Xamarin, but examples for Android Studio will be helpful to.
Use a CoordinatorLayout and a layout_anchor:
<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:id="#+id/app_bar"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
<ImageView android:id="#+id/image_anchored"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="16dp" android:src="#drawable/image_anchor"
app:layout_anchor="#id/app_bar" app:layout_anchorGravity="bottom|start|left"/>
</android.support.design.widget.CoordinatorLayout>
Maybe create a custom view for the ActionBar?
And also you can set custom height for the ActionBar.
Then I think your content can go behind the ActionBar. And you can use transparency on the ActionBar too.
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'm having a very strange issue using MaterialDesign toolbar and I haven't been able to figure out what's causing it.
I have a toolbar with a custom menu icons which I use in different layouts using <include> I wanted to use the toolbar in another layout without all the icons and menus so I included this in the xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
But the toolbar that shows when on this activity view is the same one I use across other activities. I even tried using a different id name but it still uses the other toolbar and not the one I have included.
The other issue is that, I want to use material design scrolling by using the coordinator layout. While the scrolling works on every other layout, it doesn't work on this particular one when I have the toolbar set. If I remove the toolbar then the scroll works for the view below it. The scroll property app:layout_scrollFlags="scroll|exitUntilCollapsed"on both the toolbar and the view below it. Here's the full code for this layout:
<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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Yourtime.NonSwipeableViewpager
android:id="#+id/profileviewpager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/appbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<FrameLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:id="#+id/profile_container"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="#dimen/profile_tabs_height"
app:tabMode="fixed"
style="#style/MyCustomTabLayout"
app:tabGravity="center"
android:id="#+id/profiletabs" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I will really appreciate if someone can help with either of the questions.
so i am trying to create like a social media kind of tool bar, check this out. This is like the toolbar that includes a navigation drawer slider and when you swipe around, it becomes just like a tabbed activity.
(sorry for only 1 picture, stackover flow is not allowing me to post more than 3 links)
I have been thinking what to use and ways to do it.
Here are my conclusions
Create a drawer and customise the toolbar by adding tabs into it. If tabs cannot be added, i will try to add image button and then use it along with fragments. Sliding effect might be compromised.
Create a tabbed activity, set the icons and try to get the slider/drawer to work. Which i think might be possible. I just thought of another idea which VSCO app was using, slider drawer to be placed in a floating action button. Brilliant, this might work.
I am leaning more on choice 2 btw.
GUYS I NEED SOME INPUT, CRITICISE ME. GO.
whatever unsure of can be clarified with me of course.
Yes, you can add TabLayout inside the toolbar with DrawerLayout. See below XML it work for me.
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/Theme.AppCompat.NoActionBar">
<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"
android:background="?attr/colorPrimary"
android:elevation="6dp"
app:tabMode="fill"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</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>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerRecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:background="#color/WhiteColor"
android:fitsSystemWindows="true"
android:scrollbars="vertical"/>
</android.support.v4.widget.DrawerLayout>
I am using the new TabLayout introduced in the design support library. I have the code like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/lines_coordinator"
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.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"/>
</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.support.design.widget.CoordinatorLayout>
</LinearLayout>
The problem is, that the tabs overlap the top of the content the fragments display. How can I fix this? I am using the TabLayout like in the examples on Github, so I believe there is no issue with my code. I already have a Toolbar because I use the tabs in a fragment in a navigation drawer, so I removed it from the AppBarLayout.
You need to add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your ViewPager: this is what changes the height of the View to be below the AppBarLayout rather than the full match_parent height.