Tabs Layout is being cut from trom the bottom

Viewed 254

I'm using API 16 and in my main screen I have a Tab layout with two tabs. One of the tabs has the following layout:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp">

        <LinearLayout
            android:id="@+id/login_email_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical">

            <ImageView
                android:id="@+id/login_email_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_email_black_24dp"
                android:tint="@color/lightGrayColor"
                android:layout_marginRight="5dp"
                android:layout_marginEnd="5dp" />

            <EditText
                android:id="@+id/login_email_edit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/managerDetailsEditTextStyle"
                android:inputType="textEmailAddress"
                android:hint="@string/email"
                android:autofillHints="@string/email" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/login_password_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/login_email_layout"
            android:gravity="center_vertical">

            <ImageView
                android:id="@+id/login_password_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_lock_black_24dp"
                android:tint="@color/lightGrayColor"
                android:layout_marginRight="5dp"
                android:layout_marginEnd="5dp" />

            <EditText
                android:id="@+id/login_password_edit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/managerDetailsEditTextStyle"
                android:inputType="textPassword"
                android:hint="@string/password"
                android:autofillHints="@string/password" />
        </LinearLayout>

        <Button
            android:id="@+id/login_sign_in_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primaryColor"
            android:textColor="@android:color/white"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginTop="24dp"
            android:layout_below="@id/login_password_layout"
            android:text="@string/action_login" />

        <TextView
            android:id="@+id/login_recover_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_below="@id/login_sign_in_button"
            android:textColor="?android:textColorTertiary"
            android:text="@string/forgot_password"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            android:textSize="16sp"
            android:textIsSelectable="true" />

        <View
            android:id="@+id/login_tile_divider"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_below="@id/login_recover_text"
            android:layout_gravity="center"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            android:layout_marginTop="24dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="@color/lightGrayColor" />

        <Button
            android:id="@+id/login_sign_up_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primaryColor"
            android:textColor="@android:color/white"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginTop="24dp"
            android:layout_below="@id/login_tile_divider"
            android:text="@string/action_sign_up" />
    </RelativeLayout>
</ScrollView>

The main layout with the tabslayout:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_background"
    android:layout_margin="5dp">

    <!-- Main title -->
    <TextView
        android:id="@+id/main_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/primaryDarkColor"
        android:gravity="center"
        android:singleLine="true"
        android:text="@string/app_name"
        android:layout_marginTop="60dp"
        android:textSize="60sp"
        android:textStyle="bold" />

    <!-- Main subtitle -->
    <TextView
        android:id="@+id/main_subtitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/primaryDarkColor"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:singleLine="true"
        android:text="@string/app_subtitle"
        android:layout_below="@id/main_title"
        android:textSize="22sp"
        android:textStyle="bold" />

    <!-- Tabs layout -->
    <LinearLayout
        android:id="@+id/main_tabs_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="25dp"
        android:layout_marginBottom="25dp"
        android:layout_below="@id/main_subtitle"
        android:layout_centerVertical="true">

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp">

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

                <com.google.android.material.appbar.AppBarLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

                    <com.google.android.material.tabs.TabLayout
                        android:id="@+id/main_login_tabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:tabMode="fixed"
                        app:tabTextColor="@color/transparentWhite"
                        app:tabBackground="@color/primaryColor"
                        app:tabIndicatorColor="@android:color/white"
                        app:tabIndicatorHeight="4dp"
                        app:tabSelectedTextColor="@android:color/white"
                        app:tabGravity="fill" />
                </com.google.android.material.appbar.AppBarLayout>

                <com.technion.saderota.utilities.CustomViewPager
                    android:id="@+id/main_login_view_pager"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </LinearLayout>

</RelativeLayout>

For some reason, in some devices it cuts the bottom of the screen.

I suspect that it has something to do with the fact that I centered the tablayout in the middle of the screen. I tried some ways to resolve it but could not figure it out. How should I fix it?

1 Answers

Your content is simply too big for the screen. the 'empty' unused space is taken by the margins here:

   <LinearLayout
        android:id="@+id/main_tabs_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="25dp"
        android:layout_marginBottom="25dp"
        android:layout_below="@id/main_subtitle"
        android:layout_centerVertical="true">

and here:

  <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp">

You can either make your margins smaller, to give the views more space

Or you can make your main_tabs_layout a ScrollView to make it scrollable if there's not enough space.

Related