I want the gridview to start from under the tablayout(marked red) but be scrollable beneath the transparent toolbar and the tablayout. I tried to set marginTop to the gridview but the gridview stays fixed in that place and doesn't scroll underneath the toolbar and tablayout. Is there any way to set margin to the 1st row of the gridview?
My XML code :
<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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".Fragments.CompetitionFragment">
<android.support.v4.view.ViewPager
android:id="#+id/container"
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:layout_marginTop="25dp"
android:background="#color/statusBarColor"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/comptoolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:background="#color/statusBarColor"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/glostarslogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Competition"
android:textColor="#color/white"
android:textSize="20sp"
android:visibility="visible" />
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="invisible" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/MyTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/fabs" />
</android.support.design.widget.CoordinatorLayout>
Related
Layout structure.
<android.support.v4.widget.DrawerLayout .... >
<android.support.design.widget.CoordinatorLayout .... >
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:background="#color/appbar"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="parallax">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imv_back"
android:layout_width="#dimen/toolbar_height"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:padding="#dimen/toolbar_icon_padding"
android:src="#drawable/icons8_back" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/toolbar_height"
android:background="#color/background"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/imv_tour_cover"
android:layout_width="match_parent"
android:layout_height="#dimen/cover_height"
fresco:actualImageScaleType="centerCrop" />
<TextView
android:id="#+id/txv_tour_area"
android:layout_width="wrap_content"
android:layout_height="#dimen/cover_height"
android:layout_centerHorizontal="true"
android:layout_marginTop="-14dp"
android:gravity="center"
android:text="Test string."
android:textColor="#000000"
android:textSize="28sp" />
</RelativeLayout>
<TextView
android:id="#+id/txv_tour_title"
style="#style/row_marginHorizontal_12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-34dp"
android:text="Test string."
android:textColor="#color/text_primary"
android:textSize="#dimen/text_size_6" />
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tbl_tour"
android:layout_width="match_parent"
android:layout_height="#dimen/tablayout_height"
android:background="#color/tab">
<android.support.design.widget.TabItem
android:id="#+id/tbi_tour_stroke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text string." />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView .... />
<android.support.design.widget.BottomNavigationView .... />
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
First look like this.
When scroll down...TabLayout will set on top.
Then scroll up a little, will expand part of CollapsingToolbarLayout (should be the toolbar's height).
Continue scrolling to the top, finally just like the first image.
My purpose is to show only Toolbar but not whole CollapsingToolbarLayout when enterAlways, the LinearLayout's content is still hide until top when scroll, is it possible?
I have a tab layout in MainActivity which has ViewPager, I am also adding bottom navigation to MainActivity, I want ViewPager to be of height that it touches the top of the bottom navigation.
Here is my main activity layout
<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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10sp"
android:paddingTop="10sp"
android:textAlignment="center"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="40sp"
android:text="#string/app_name" />
<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"
android:layout_weight="1"
android:layout_gravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/bottom_nav"></include>
</android.support.design.widget.CoordinatorLayout>
Currently ViewPager spans full height behind bottom navigation bar. I want my Viewpager to be like below
Use LinearLayout as a parent layout and also set weight to your ViewPager. It would work in your case. Check below code.
<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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10sp"
android:paddingTop="10sp"
android:textAlignment="center"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="40sp"
android:text="#string/app_name" />
<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="0dp"
android:layout_weight="1"
android:layout_gravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/bottom_nav"></include>
</LinearLayout>
Use Liner layout as a parent layout after co-ordinate layout.
<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:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10sp"
android:paddingTop="10sp"
android:textAlignment="center"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="40sp"
android:text="#string/app_name" />
<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"
android:layout_weight="1"
android:layout_gravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/bottom_nav"></include>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I am working on code that have FrameLayout and customview at bottom. I loaded a fragment inside FrameLayout, which is having CoordinatorLayout with ViewPager inside.
So problem is ViewPager takes full height of the phone and hide contents of list behind customview. Here is Code:
main_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/root_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/playerView"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/playerView"
android:layout_width="match_parent"
android:layout_height="#dimen/player_size"
android:layout_alignParentBottom="true"
android:background="#D7D7D7"
android:gravity="center"
android:text="Player View"
android:textSize="20sp" />
</RelativeLayout>
fragment_view.xml
<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="wrap_content">
<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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs_view_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabs_view_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
In above image you can see some content of list is hidden beside PlayerView.
Try to use LinearLayout with layout_weight instead of RelativeLayout inside main_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/root_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:id="#+id/playerView"
android:layout_width="match_parent"
android:layout_height="#dimen/player_size"
android:background="#D7D7D7"
android:gravity="center"
android:text="Player View"
android:textSize="20sp" />
</LinearLayout>
I'm trying to use the design support library to implement tabs. The issue is that the viewpager overlaps the toolbar and tablayout when i remove the attribute
app:layout_behavior="#string/appbar_scrolling_view_behavior"
of the viewpager.
viewpager overlaps the toolbar and tablayout
and when i add the attribute the viewpager overflows the screen.
viewpager overflows the screen
I just need the viewpager to occupy the space left after the tablayout and the toolbar and not overflow the screen...
Here is my activity_main.xml
<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"
app:tabGravity="fill"
app:tabMode="fixed" />
</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>
and here is my fragment_1.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/tV_item1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:gravity="center"
android:text="#string/tab1_q_persons"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0 people"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/iV_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/iV_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="#+id/nextBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="end"
android:background="#color/colorPrimary"
android:elevation="12dp"
android:text="#string/next" />
</RelativeLayout>
</LinearLayout>
Any help will be appreciated
I know it seems late. But I send my answer.
In activity_main.xml use RelativeLayout instead of CoordinatorLayout and you can remove AppBar. For defining Toolbar as AppBar you can use this code in MainActivity.java:
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
In fragment_1.xml use another widget like CardView or ScrollView instead of LinearLayout or you may use LinearLayout inside of replaced widget.
activity_main.xml
<RelativeLayout
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.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:layout_alignParentTop="true"/>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
android:layout_below="#id/toolbar"/>
<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:layout_below="#id/tablayout" />
</RelativeLayout>
fragment_1.xml
<android.support.v7.widget.CardView
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/tV_item1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:gravity="center"
android:text="#string/tab1_q_persons"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0 people"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/iV_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/iV_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="#+id/nextBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="end"
android:background="#color/colorPrimary"
android:elevation="12dp"
android:text="#string/next" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
This solution solved same problem for me.
If you don't really need the AppBar Layout, remove it.
<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.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"
app:tabGravity="fill"
app:tabMode="fixed" />
<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" />
This code works fine for me.
I am trying to use the AppBarLayout with Toolbar and Tabs so that Toolbar becomes hidden when user scrolls.
I tried to do it exactly the same way as Cheesesquare example but it still doesn't work.
Here is my XML code:
<RelativeLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.izzivizzi.avant2go.activities.ACLoginActivity"
android:background="#color/activity_background_light">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/green"
android:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_big"
android:layout_marginBottom="#dimen/margin_big"
android:orientation="vertical"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/white"
android:textSize="30sp"
android:text="#string/avantcar"/>
<View
android:layout_width="300dp"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="#color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_gravity="center"
android:textColor="#color/white"
android:textSize="18sp"
android:text="#string/main_slogan"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:layout_below="#id/toolbar"
app:tabIndicatorColor="#color/primary"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/primary"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</RelativeLayout>
I've also tried replacing RelativeLayout with CoordinatorLayout but it doesn't work.