Nurlan Shukurov
Nurlan Shukurov

Reputation: 51

How to vertically scroll whole content with TabLayout, which starting in middle of screen?

I have TabLayout with 3 tabs and it works well. Tabs are scrolling inside if content not fitting to screen. Now I want to vertically scroll whole content except toolbar. Currently I'm scrolling inside tablayout, but I need to scroll header linearlayout and tablayout, which starts in middle of screen.

P.S. Tried ScrollView, but then scroll not worked at all (including scrolling tabs inside). Also content in tabs not showing up

Layout:

<?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=".GameInfoActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="#ffffff">

                <ProgressBar
                    android:id="@+id/progressBar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:visibility="gone" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_horizontal"
                        android:orientation="horizontal"
                        android:paddingBottom="8dp"
                        android:paddingTop="8dp">

                        <TextView
                            android:id="@+id/team1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:maxWidth="240dp"
                            android:text="Team 1"
                            android:textColor="@color/colorBlackBG"
                            android:textSize="15sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text=" - "
                            android:textColor="@color/colorBlackBG" />

                        <TextView
                            android:id="@+id/team2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:maxWidth="240dp"
                            android:text="Team 2"
                            android:textColor="@color/colorBlackBG"
                            android:textSize="15sp" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/gameInfo_league_name"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_horizontal"
                            android:text="League Name" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="100dp"
                        android:orientation="horizontal"
                        android:weightSum="3">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:gravity="center_horizontal"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/gameInfo_flag1"
                                android:layout_width="70dp"
                                android:layout_height="70dp"
                                android:layout_marginTop="8dp"
                                android:text="date"
                                android:textColor="#b71c1c"
                                android:textSize="14sp"
                                app:srcCompat="@drawable/game_info_flag_placeholder" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:gravity="center"
                            android:orientation="vertical">

                            <TextView
                                android:id="@+id/score"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="0:0"
                                android:textColor="#777777"
                                android:textSize="24sp" />

                            <TextView
                                android:id="@+id/date"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="8dp"
                                android:text="date"
                                android:textColor="#b71c1c"
                                android:textSize="14sp" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:gravity="center_horizontal"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/gameInfo_flag2"
                                android:layout_width="70dp"
                                android:layout_height="70dp"
                                android:layout_marginTop="8dp"
                                android:text="date"
                                android:textColor="#b71c1c"
                                android:textSize="14sp"
                                app:srcCompat="@drawable/game_info_flag_placeholder" />

                        </LinearLayout>

                    </LinearLayout>

                </LinearLayout>

            </RelativeLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimaryDark"
                app:tabIndicatorColor="@color/colorAccent"
                app:tabIndicatorHeight="4dp"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="@android:color/white">

                <android.support.design.widget.TabItem
                    android:id="@+id/tabItem"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/match_details" />

                <android.support.design.widget.TabItem
                    android:id="@+id/tabItem2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/head_to_head" />

                <android.support.design.widget.TabItem
                    android:id="@+id/tabItem3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/prediction" />

            </android.support.design.widget.TabLayout>

            <android.support.v4.view.ViewPager
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ffffff"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        </LinearLayout>

</LinearLayout>

Screenshot:

enter image description here

Upvotes: 0

Views: 163

Answers (1)

Prashanth Verma
Prashanth Verma

Reputation: 588

Please use Coordinate Layout and AppBarLayout. You can check this link for different scrolls.

https://github.com/codepath/android_guides/wiki/Handling-Scrolls-with-CoordinatorLayout

This link shows you exactly what you want to acheive

https://gist.github.com/iPaulPro/1468510f046cb10c51ea

Upvotes: 1

Related Questions