Search code examples
androidandroid-layoutscrollviewandroid-linearlayoutandroid-design-library

How to setup a layout with ScrollView?


I am learning Android and right now I have an issue with the ScrollView.

I am using ScrollView as the main container of the layout with a LinearLayout as a child because I would like my screens support portrait and landscape orientation but this is not working as I want.

As you can see in the images below, space before the image doesn't appear, even the image is cut because the keyboard push up the layout and it doesn't fit to screen, as well in landscape orientation.

Could anyone help me about how to set up a Layout to support scrolling without losing the original design of the layout?

Code of the layout:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/gradient_background"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

        <LinearLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            tools:context=".LoginActivity"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="30dp">

            <ImageView
                android:id="@+id/sign_in_logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/trivia_wars_logo"
                android:layout_gravity="center"
                android:rotation="-8"
                android:scaleX="0.75"
                android:scaleY="0.75"
                android:padding="5dp"/>

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/sign_in_input_layout_username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/TextInputLayoutStyle"
                android:layout_marginTop="15dp">

                <EditText
                    android:id="@+id/sign_in_input_username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/hint_email_username"
                    style="@style/EditTextStyle"
                    android:inputType="textPersonName"/>

            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/sign_in_input_layout_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/PasswordInputLayoutStyle"
                android:layout_marginTop="15dp"
                app:passwordToggleEnabled="true">

                <EditText
                    android:id="@+id/sign_in_input_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/hint_password"
                    style="@style/EditTextStyle"
                    android:inputType="textPassword"/>

            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:id="@+id/sign_in_action_btn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="50dp"
                android:paddingTop="12dp"
                android:paddingBottom="12dp"
                style="@style/RoundedButtonStyle"
                android:text="@string/sign_in"/>

            <com.google.android.material.button.MaterialButton
                android:id="@+id/sign_in_sign_up_btn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="12dp"
                android:paddingBottom="12dp"
                style="@style/OutlineRoundedButtonStyle"
                android:text="@string/sign_up"/>
        </LinearLayout>
</ScrollView>

Preview of the layout:

Preview of the layout

Layout tested in my device:

![Portrait layout with active keyboard

Landscape layout

Thanks.


Solution

  • Try adding

    android:windowSoftInputMode="adjustPan" 
    

    in manifest file inside your activity.

    <activity android:name=".YourActivity"
              android:windowSoftInputMode="adjustPan">
    
    </activity>
    

    You will find the information about windowSoftInputMode