Search code examples
androidxmlandroid-layoutlayout

Display size is affecting my app layout Android?

So I have been building a simple login screen and the display size of the device is affecting the layout and it keeps changing on different devices, New to the android studio is there a solution?

Layout under display - Small

Layout under display - Large

Layout under display - Xlarge

XML code

its a simple layout with Neumorphism .

**And I know we can make the layout responsive with constraint but is there any other way other than constraint layout? **

<ScrollView 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"
android:orientation="vertical"
tools:context=".Admin.AdminStuff.SettingUp.admin_log_in">

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


    <ImageView
        android:id="@+id/backButton_students"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/arrow_back"
        app:tint="@color/black" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:fontFamily="@font/muli"
        android:text="SUMS"
        android:textColor="@color/appcolor"
        android:textSize="60sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="2dp"
        android:fontFamily="sans-serif-medium"
        android:text="Log In"
        android:textColor="@color/black"
        android:textSize="28sp"
        android:textStyle="bold" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="20dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="-4dp"
            android:layout_marginTop="50dp"
            android:layout_marginBottom="-5dp"
            android:text="Please select the Institution &amp; Class"
            android:textAlignment="center"
            android:textColor="@color/darkblue"
            android:textSize="18sp"
            android:textStyle="bold" />

        <Spinner
            android:id="@+id/spinner_students_login"
            style="@style/Widget.AppCompat.DropDownItem.Spinner"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="30dp"
            android:background="#f5f7fa"
            android:textAlignment="center" />

        <Spinner
            android:id="@+id/spinner_programmes_students_login"
            style="@style/Widget.AppCompat.DropDownItem.Spinner"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="30dp"
            android:background="#f5f7fa"
            android:textAlignment="center" />


        <soup.neumorphism.NeumorphCardView
            style="@style/Widget.Neumorph.CardView"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="15dp"
            android:layout_marginBottom="5dp"
            app:neumorph_shapeType="pressed">


            <EditText
                android:id="@+id/registrationNumber_studentslogin"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/no_background"
                android:hint="Email Id"
                android:inputType="textEmailAddress"
                android:paddingStart="15dp"
                android:textCursorDrawable="@drawable/cursor" />


        </soup.neumorphism.NeumorphCardView>

        <soup.neumorphism.NeumorphCardView
            style="@style/Widget.Neumorph.CardView"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_marginStart="15dp"
            android:layout_marginEnd="15dp"
            app:neumorph_shapeType="pressed">


            <EditText
                android:id="@+id/password_studentslogin"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/no_background"
                android:hint="Password"
                android:inputType="textVisiblePassword"
                android:maxLines="1"
                android:paddingStart="15dp"
                android:textCursorDrawable="@drawable/cursor" />


        </soup.neumorphism.NeumorphCardView>


    </LinearLayout>

    <soup.neumorphism.NeumorphButton
        android:id="@+id/forgotpassword_students"
        style="@style/Widget.Neumorph.Button"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_gravity="right"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="-25dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:backgroundTint="@color/white"
        android:text="Forgot Password?"
        android:textColor="#636363"
        android:textStyle="bold"
        app:neumorph_lightSource="leftTop"
        app:neumorph_shadowColorDark="@color/white" />


    <CheckBox
        android:id="@+id/remeberme_student"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/login_teachers"
        android:layout_marginStart="25dp"
        android:layout_marginTop="-60dp"
        android:layout_marginBottom="25dp"
        android:text="Remember Me"
        android:textColor="@color/black"
        android:textSize="16sp" />


    <soup.neumorphism.NeumorphButton
        android:id="@+id/login_students"
        style="@style/Widget.Neumorph.Button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="25dp"
        android:layout_marginRight="15dp"
        android:layout_marginBottom="10dp"
        android:backgroundTint="@color/appcolor"
        android:text="Log In"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold"
        app:cornerRadius="4dp"
        app:neumorph_backgroundColor="@color/appcolor" />

    <ProgressBar
        android:id="@+id/progressbar_students"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:outlineSpotShadowColor="@color/white" />

    <soup.neumorphism.NeumorphButton
        android:id="@+id/adminNewUser_student"
        style="@style/Widget.Neumorph.Button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="-15dp"
        android:layout_marginRight="15dp"
        android:layout_marginBottom="10dp"
        android:backgroundTint="@color/white"
        android:shadowDx="-2"
        android:shadowDy="-2"
        android:shadowRadius="1"
        android:text="New User? Sign Up"
        android:textColor="@color/darkblue"
        android:textSize="18sp"
        android:textStyle="bold"
        app:cornerRadius="4dp" />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:layout_marginTop="80dp"
        android:src="@drawable/bottom" />


</LinearLayout>
Solution

  • No need to worry about dimensions.

    An android lib that provides size unit - dp and sp. This size unit scales with the screen size and font size. It can help Android developers with supporting multiple screens.

    or

    Simply use this dependency

    implementation 'com.intuit.ssp:ssp-android:1.0.6' implementation 'com.intuit.sdp:sdp-android:1.0.6'

    and then use ssp instance of sp and sdp instance of dp

    refer from

    https://github.com/intuit/ssp https://github.com/intuit/sdp