Home > Enterprise >  How to adjust my app's text and widgets straight
How to adjust my app's text and widgets straight

Time:05-05

I'm new to working with android layout, I'm building a form app but all my text widgets, dropdowns, and edit text are moving to the left can anyone tell what's wrong?

PS: Code will be appreciated

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="40dp"
        tools:context=".MainActivity">

        <TextView
            android:id="@ id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="159dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="126dp"
            android:text="ERDI"
            android:textColor="#000000"
            android:textSize="40sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Spinner
            android:id="@ id/spinner3"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="61dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView5" />

        <TextView
            android:id="@ id/textView18"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="58dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="208dp"
            android:text="Spectre Shape"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/spinner3" />

        <TextView
            android:id="@ id/textView4"
            android:layout_width="136dp"
            android:layout_height="21dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="108dp"
            android:layout_marginEnd="179dp"
            android:gravity="right"
            android:text="Collateral Damage"
            android:textAlignment="gravity"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView2" />

        <Spinner
            android:id="@ id/spinner5"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="61dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView4" />

        <TextView
            android:id="@ id/textView5"
            android:layout_width="118dp"
            android:layout_height="25dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="196dp"
            android:text="Ground Shaking"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/spinner2" />

        <TextView
            android:id="@ id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="56dp"
            android:layout_marginTop="128dp"
            android:layout_marginEnd="238dp"
            android:text="Hazard"
            android:textColor="#000000"
            android:textSize="24sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@ id/editTextTextPersonName4"
            android:layout_width="252dp"
            android:layout_height="46dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="63dp"
            android:ems="10"
            android:hint="Enter the Height..."
            android:inputType="textPersonName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView18" />

        <TextView
            android:id="@ id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="56dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="229dp"
            android:text="Zone Factor"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/spinner5" />

        <Spinner
            android:id="@ id/spinner2"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="61dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView3" />

        <Spinner
            android:id="@ id/spinner4"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="61dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView8" />

        <TextView
            android:id="@ id/textView10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="56dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="148dp"
            android:text="FSI (Floor Space Index)"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/spinner4" />

        <TextView
            android:id="@ id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="56dp"
            android:layout_marginTop="72dp"
            android:layout_marginEnd="215dp"
            android:text="Exposure"
            android:textColor="#000000"
            android:textSize="24sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/editTextTextPersonName4" />

        <TextView
            android:id="@ id/textView8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="56dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="224dp"
            android:text="Importance I"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView7" />

        <EditText
            android:id="@ id/editTextTextPersonName2"
            android:layout_width="255dp"
            android:layout_height="47dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="60dp"
            android:ems="10"
            android:hint="Enter the FSI..."
            android:inputType="textPersonName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView10" />

        <Spinner
            android:id="@ id/spinner7"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="12dp"
            android:layout_marginEnd="61dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView13" />

        <Spinner
            android:id="@ id/spinner6"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginStart="56dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="61dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView12" />

        <TextView
            android:id="@ id/textView13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="56dp"
            android:layout_marginTop="12dp"
            android:layout_marginEnd="89dp"
            android:text="Economic Loss Inducing Factors"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/spinner6" />

        <TextView
            android:id="@ id/textView12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="56dp"
            android:layout_marginTop="48dp"
            android:layout_marginEnd="139dp"
            android:text="Life Threatening Factors"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/textView11" />

        <Button
            android:id="@ id/postdataBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="147dp"
            android:layout_marginTop="108dp"
            android:layout_marginEnd="133dp"
            android:text="SUBMIT"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/spinner7" />

        <TextView
            android:id="@ id/textView11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="127dp"
            android:layout_marginTop="80dp"
            android:layout_marginEnd="108dp"
            android:text="Vulnerability"
            android:textColor="#000000"
            android:textSize="24sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/editTextTextPersonName2" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>


I'm using constraint layout inside Scroll View layout, I tried various text alignment, widget alignment but the layout still remains to align left. the layout I want

CodePudding user response:

I Have Used Linear Layout And Updated Your Code to look like a form If it Helps Accept My Answer !!

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="40dp"
        android:gravity="start"
        tools:context=".MainActivity">

        <TextView
            android:id="@ id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ERDI"
            android:textColor="#000000"
            android:textSize="20sp"
            android:textStyle="bold"
             />

        <Spinner
            android:id="@ id/spinner3"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="61dp"/>

        <TextView
            android:id="@ id/textView18"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="Spectre Shape"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@ id/textView4"
            android:layout_width="136dp"
            android:layout_height="21dp"
            android:layout_marginTop="20dp"
            android:gravity="right"
            android:text="Collateral Damage"
            android:textAlignment="gravity"
            android:textSize="16sp"
            android:textStyle="bold"/>

        <Spinner
            android:id="@ id/spinner5"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="61dp"/>

        <TextView
            android:id="@ id/textView5"
            android:layout_width="118dp"
            android:layout_height="25dp"
            android:layout_marginTop="24dp"
            android:text="Ground Shaking"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@ id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="Hazard"
            android:textColor="#000000"
            android:textSize="24sp"
            android:textStyle="bold"/>

        <EditText
            android:id="@ id/editTextTextPersonName4"
            android:layout_width="252dp"
            android:layout_height="46dp"
            android:layout_marginTop="20dp"
            android:ems="10"
            android:hint="Enter the Height..."
            android:inputType="textPersonName"/>

        <TextView
            android:id="@ id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="Zone Factor"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"/>

        <Spinner
            android:id="@ id/spinner2"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginTop="20dp"/>

        <Spinner
            android:id="@ id/spinner4"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginTop="20dp"/>

        <TextView
            android:id="@ id/textView10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:text="FSI (Floor Space Index)"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@ id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="Exposure"
            android:textColor="#000000"
            android:textSize="20sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@ id/textView8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:text="Importance I"
            android:textSize="16sp"
            android:textStyle="bold"/>

        <EditText
            android:id="@ id/editTextTextPersonName2"
            android:layout_width="255dp"
            android:layout_height="47dp"
            android:layout_marginTop="20dp"
            android:ems="10"
            android:hint="Enter the FSI..."
            android:inputType="textPersonName"/>

        <Spinner
            android:id="@ id/spinner7"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginTop="12dp"/>

        <Spinner
            android:id="@ id/spinner6"
            android:layout_width="254dp"
            android:layout_height="41dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="61dp"/>

        <TextView
            android:id="@ id/textView13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:text="Economic Loss Inducing Factors"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@ id/textView12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="Life Threatening Factors"
            android:textAlignment="textEnd"
            android:textSize="16sp"
            android:textStyle="bold"/>

        <Button
            android:id="@ id/postdataBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="108dp"
            android:text="SUBMIT"
            android:layout_gravity="center" />

        <TextView
            android:id="@ id/textView11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="80dp"
            android:text="Vulnerability"
            android:textColor="#000000"
            android:textSize="24sp"
            android:textStyle="bold"/>


    </androidx.appcompat.widget.LinearLayoutCompat>

</ScrollView>

CodePudding user response:

What I would suggest you to do is to fit everything into a Linear Layout, like this:

<?xml version="1.0" encoding="utf-8"?>

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

    <ScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent">

       your code here

    </ScrollView>

</LinearLayout>

Also, as someone said in your comments, you should, inside of the ScrollView, use LinearLayout with vertical alignment, and then use proper paddings and margins in order to make the UI look good. You can use gravity and layout-gravity to align every element you want.

  • Related