• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

Apps Layouts being pushed off screen by AppBar and ViewPager

C

croninberg

Newbie
So I'm practicing working on layouts and I've run into a spot of bother where my content is being pushed off screen by the AppBar and ViewPager. The image shows what I mean.

frag_pushed_off_screen.png


Can someone explain how this can be solved. Here's my layout code.

activity_home_page.xml

Code: 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/activity_home_page"
    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"
    tools:context="com.dev.prestigious.heartmonitor.HomePageActivity"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:id="@+id/heartDisplay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="0.6">

        <LinearLayout

            android:layout_width="175dp"
            android:layout_height="175dp"
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:orientation="horizontal"
            android:background="@drawable/round_drawable"
            android:layout_gravity="top|center_horizontal"

            >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="125"

                    android:gravity="center"
                    android:textSize="40sp"
                    />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:orientation="horizontal"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="BPM"
                    android:gravity="bottom"
                    android:layout_gravity="bottom"
                    android:textSize="18sp"/>

            </LinearLayout>
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/newReadingButton"
        android:layout_marginTop="30dp"
        android:layout_weight="1.0"
        android:orientation="horizontal"
        android:gravity="center">

        <!-- References whether button should be normal or mini.
             We add margin 16dp, so we don't get the square of the button
             cutting cutting off the shadow. -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|center_horizontal">

            <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/heart"
                app:fabSize="normal"
                android:layout_margin="16dp"
                android:onClick="startNewHeartReading"/>

        </LinearLayout>


    </LinearLayout>

    <!-- Daily Activity stats -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1.0">

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/dailyActivity"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:textColor="@color/textColorPrimary"
                android:background="@color/colorPrimary"/>

        </LinearLayout>

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

            <!-- Distance Covered -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center"
                android:layout_weight="1">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/distance"
                    android:textSize="@dimen/textHeading"/>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/distanceValue"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/distanceValue"
                        android:textSize="@dimen/activityValue"
                        android:padding="2dp"
                        />

                    <TextView
                        android:id="@+id/distanceType"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/distanceType"
                        android:textSize="@dimen/activityValue"
                        android:padding="2dp"
                        />
                </LinearLayout>

            </LinearLayout>

            <!-- Time to cover distance -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center"
                android:layout_weight="1">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/time"
                    android:textSize="@dimen/textHeading"/>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/hourValue"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/hourValue"
                        android:padding="2dp"
                        android:textSize="@dimen/activityValue"
                    />

                    <TextView
                        android:id="@+id/hourText"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/hourText"
                        android:padding="2dp"
                        android:textSize="@dimen/activityValue"
                        />

                    <TextView
                        android:id="@+id/minValue"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/minValue"
                        android:padding="2dp"
                        android:textSize="@dimen/activityValue"
                        />

                    <TextView
                        android:id="@+id/minText"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/minText"
                        android:padding="2dp"
                        android:textSize="@dimen/activityValue"
                        />
                </LinearLayout>

            </LinearLayout>

            <!-- Calories lost per distance covered -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center"
                android:layout_weight="1">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/calories"
                    android:textSize="@dimen/textHeading"/>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/caloriesLost"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/caloriesLost"
                        android:textSize="@dimen/activityValue"
                        android:padding="2dp"
                        />

                    <TextView
                        android:id="@+id/caloriesText"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/caloriesText"
                        android:textSize="@dimen/activityValue"
                        android:padding="2dp"
                        />
                </LinearLayout>

            </LinearLayout>

        </LinearLayout>


    </LinearLayout>


</LinearLayout>


activity_main.xml

Code: 
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/activity_main"
    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"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways" />

        <!-- We use fixed tabs as we have a limited amount of tabs available -->
        <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>

    <!-- This allows you to flip left/right through the pages -->
    <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>

Thanks,,

Sean
 
I actually managed to fix this by placing a linear layout around the AppBarLayout and ViewPager.

Code: 
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <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">

            <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" />

            <!-- We use fixed tabs as we have a limited amount of tabs available -->
            <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>

        <!-- This allows you to flip left/right through the pages -->
        <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"/>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>
 
You must log in or register to reply here.
Back
Top Bottom