Search code examples
androidandroid-layoutandroid-viewpagerandroid-scrollviewandroid-tablayout

Layout not adjusting in Landscape mode


I am working on a app in which layout structure is as follows -

Activity A - This activity is a Tab Layout Activity which uses viewpager for tabs and code is given below.

<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_container"
    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_marginTop="24dp"
            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="scrollable" />
    </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> 

The fragment that is added to the viewpager has a common layout for all tabs and code is given below.

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:background="@color/background_app"
    tools:context="com.peacecorps.pcsa.safety_tools.SafetyPlanActivity">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@color/primary_text_default_material_dark"
        android:textSize="20sp"
        android:textStyle="bold"
        android:text="@string/safety_plan_subtitle"/>

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/safety_plan_pager"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="320dp" />

    <Button
        android:id="@+id/actionButton"
        style="@style/NavigateButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:text="@string/see_action"
        android:layout_marginTop="10dp" />
</LinearLayout>

As you can see this fragment again contains a viewpager.This viewpager will always be populated by a fragment below.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <include android:id="@+id/text_to_show"
        layout="@layout/textview"/>
</ScrollView>

where textview is

<?xml version="1.0" encoding="utf-8"?>
<!--This is the common layout used for TextViews-->
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/primary_text_default_material_dark"
        android:textSize="@dimen/abc_text_size_medium_material"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/bg_textview_rounded_rectangle"
        android:padding="@dimen/textview_padding"
        android:scrollbars="vertical"
        android:fadeScrollbars="false"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:autoLink="web|email"
        android:textColorLink="@color/text_color_link"
    />

Here textview contains text of different amount which is set dynamically in java for different tabs. The problem I am facing is that only part of UI is available in landscape mode and some part is lost which is not scrollable too.Please help me, I am stuck on this for a really long time.


Solution

  • The problem you are facing is because you have 2 scrolling behavior. When the phone is on portrait mode it has a lot of space that 320dp height ViewPager won't be able to occupy all the spaces available, but when the phone is on landscape mode 320dp height ViewPager will occupy the whole screen so the layout will only scroll the second view pager, that means that the whole screen on landscape mode will only have access on the second ViewPager.

    Remember that the ones on the bottom are the first to be accessed. That means that a view that is on the bottom have a higher z-index - Code Reference not the actual view.