I have a FrameLayout that includes a TabLayout and a ViewPager inside it. Obviously the ViewPager loads a fragment. Now the problem is that TabLayout goes under the content of fragment when it's loaded and therefore disappears.
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</FrameLayout>
How do I fix it?
EDIT:
using the following code I was able to make it work but now the tabs are always stuck to the top when scrolling... anyway to fix that?
<LinearLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"/>
</LinearLayout>
Change to a vertical LinearLayout. Then the ViewPager will appear beneath the TabLayout instead of drawing over it.
FrameLayout actually stacks all of its children on top of each other. So in your case this isn't a desired behavior. You should consider using a vertical LinearLayout or a RelativeLayout.
<LinearLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
You should use a LinearLayout with orientation of 'vertical' instead of a FrameLayout. A FrameLayout is generally used when you want to contain a single child (such as a fragment).
Related
I have a Fragment that contains a ViewPager which allows the user to swipe through three fragments.
Here's the problem: I want the ViewPager to have a background that remains fixed when the user swipes through the fragments. I tried setting an image in my drawable as the background of the ViewPager but that didn't work.. Here's my code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue"
tools:context=".fragments.cash.WalletFragment">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:background="#drawable/revenue"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Although there are many ways to achieve this feat, this approach works for me:
Simply create a FrameLayout with two children: Your ViewPager and the view(s) you want to use as the background of your viewpager. Here's an example:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue"
tools:context=".fragments.cash.WalletFragment">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/my_smiling_face"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</RelativeLayout>
Note that you can replace the Imageview with a layout (e.g RelativeLayout) containing all the composite views you want your background to contain.
I hope this helps.. Merry coding!
I'm looking for a way to put a view in my ViewPager below the TabBar.
I don't want it to be inside each fragment, because obiouvsly it would scroll every time I change the current fragment; I need that view to be fixed there without animations.
This is what I have now putting the View inside my TabLayout [code + img]
<android.support.v4.view.ViewPager
android:id="#+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/mTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#color/colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextColor="#color/white">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:background="#drawable/background_accent_fading"
android:paddingBottom="5dp"
android:paddingEnd="5dp"
android:paddingTop="5dp"
android:text="RIPASSO"
android:textAlignment="textEnd"
android:textColor="#color/white"
android:textStyle="bold" />
</android.support.design.widget.TabLayout>
</android.support.v4.view.ViewPager>
This, instead, is what I'm looking for
As you can see, RIPASSO is below my tabs, but it is fixed there.
Is there a way of obtaining it? I didn' find anything
Your TabLayout mustn't be a child of your ViewPager.
<LinearLayout
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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
style="#style/AppTabLayout"
app:tabTextAppearance="#style/AppTabTextAppearance"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabMode="fixed"
app:tabGravity="fill"/>
<!--here put your view, the one you want to appear in all pages.-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/popup_holder"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white"/>
</FrameLayout>
</LinearLayout>
you can use the default android tabs, follow this :
Right click on app > New > Activity > Tabbed Activity.
and it will create everything for you.
if you want to change the color of the background color - underline color or text color.
you can do it in the XML or user
TabLayout tabLayout = binding.tabs;
tabLayout.setupWithViewPager(mViewPager);
tabLayout.setTabTextColors(getResources().getColor(R.color.white), getResources().getColor(R.color.white));
I want to use
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/action_bar"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:visibility="gone">
<RelativeLayout
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="220dp">
<ImageView
android:id="#+id/cover_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:background="#color/card_background">
<android.support.design.widget.TabLayout
android:id="#+id/topTabs"
style="#style/TextAppearance.Tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#color/bpWhite"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/secondary_text_color"
custom:tabIndicatorColor="#color/secondary_text_color"
custom:tabIndicatorHeight="2dp" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="#id/topTabs"
android:background="#drawable/tab_layout_drop_shadow" />
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tab_layout" />
</RelativeLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
It is not able to scroll, that view-pager or tab-layout is not able scroll I tried all the ways.
1.Disable the touch event in view-pager and enable the touch event for scroll-view.
2.Tried other scroll-views like Nestedscrollview, Parallaxscrollview, Coordinator layout.If I use coordinator layout then not able to change he toolbar.
I used fillviewport true for all the scrollviews. but still it is not able to scroll.
Any Other ways to fix the issue.
You can use view pager without the toolbar, but you can't use the tabs without the toolbar.
Although it remains unclear, what you are trying to achieve here, there is no problem in the layout, really.
If you set up the Design Support Library correctly and
if you did not mess up your listeners with your attempts to disable some touch events and
if you take out the tools:visibility="gone" attribute (in order to show anything that can be scrolled) and
if you decide on a specific height (or wrap_content) for the ViewPager and
optionally if you take out the first RelativeLayouts which is unnecessary,
then you should be able to scroll. At least I am inside the layout editor of Android Studio.
I have a viewpager hosted in a scrollview. The viewpager hosts fragments with variable height linearlayouts. If I set the layout_width to wrap_content,I find that on some pages the viewpager holds are skewered. Ideally I would like the viewpager to resize dynamically
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<Scrollview
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:id="#+id/container_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/details_playWindow"
layout="#layout/details_play_window" />
<include
android:id="#+id/details_topPanel"
layout="#layout/details_header"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
android:id="#+id/details_body"
layout="#layout/details_header_body"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
android:id="#+id/relatedMovies"
layout="#layout/layout_stiff"
android:layout_width="match_parent"
android:layout_height="250dp" />
<LinearLayout
android:id="#+id/tv_show_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/view_series_header" />
</LinearLayout>
<!--Setting the height 2000dp is silly but for the mean time -->
<android.support.v4.view.ViewPager
android:id="#+id/download_pager"
android:layout_width="match_parent"
android:layout_height="1800dp" />
</LinearLayout>
</LinearLayout>
</Scrollview>
</RelativeLayout>
I am not sure you can do that using xml layouts only, but here is what I used to create flexibile layouts.
There is a LinearLayout atribute namely android:layout_weight. It is similar as percentage in CSS. What I would do can be roughly put in these steps:
Set view pagers parent Linear layout to be of vertical orientation and height to wrap content.
Set view pager android:layout_height=0dp and android:layout_weight="1" match parent.
More about layout weight here
I have an activity layout that looks like the following:
<android.support.design.widget.CoordinatorLayout 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.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"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
The viewpager has two fragments, one with a RecyclerView and one with a LinearLayout.
The fragment with RecyclerView works as expected and the action bar scrolls off screen when the RecyclerView is scrolled.
The other fragment with the LinearLayout isn't displaying as I would like it to however. The LinearLayout is drawn below the TabLayout and extends offscreen. I would like it to be resize to fill the space available below the TabLayout without extending offscreen. The LinearLayout looks like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/station_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/station_detail_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3" />
<include
layout="#layout/station_detail_body"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2" />
</LinearLayout>
<TextView
android:id="#+id/text_view_station_detail_empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:text="#string/text_view_station_detail_empty"
android:visibility="gone" />
</LinearLayout>
Thanks for any help, much appreciated!
I think you need to add nested scroll view to your linearlayout.
Alex I thing you have to use two CoordinatorLayout in two fragment and you can include your linear layout inside it .