CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-studio
Jyotirmoy S.
Jyotirmoy S.

Reputation: 136

Android app layout issue: elements appear in the corner of the screen in phone

I'm very new to Android app developing. I've designed the layout using drag and drop of elements. But when I run this app in the mobile all the elements of the app are gathered in the top left corner of the display. I've added screenshot how I designed the layout

how I designed

and how it appears on my mobile screen.

how it appears

Here the XML code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.jyotirmoy.myapplication.MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Enter any text"
        tools:layout_editor_absoluteX="70dp"
        tools:layout_editor_absoluteY="57dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Print"
        tools:layout_editor_absoluteX="89dp"
        tools:layout_editor_absoluteY="-250dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Your text will be displayed here:"
        tools:layout_editor_absoluteX="307dp"
        tools:layout_editor_absoluteY="-35dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onButtonClick"
        android:text="Print"
        tools:layout_editor_absoluteX="133dp"
        tools:layout_editor_absoluteY="122dp" />
</android.support.constraint.ConstraintLayout>

Upvotes: 0

Views: 1001

Answers (4)

riadrifai
riadrifai

Reputation: 1158

If the layout is as simple as this then there's no need to use ConstraintLayout. Check out LinearLayout where you could set the orientation of the items. Or RelativeLayout where you have more flexibility with items.

Meanwhile here's a solution with LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Enter any text"/>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="print"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your text will appear here"/>
</LinearLayout>

Upvotes: 0

Ahmed Abdelmeged
Ahmed Abdelmeged

Reputation: 2419

The problem here you don't use constrains for your views when using ConstraintLayout you should put constrains for your views to appear as you designed the correct layout will be like there

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="44dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Enter any text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.503"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:onClick="onButtonClick"
        android:text="Print"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
</android.support.constraint.ConstraintLayout>

Upvotes: 4

Vishal Vaishnav
Vishal Vaishnav

Reputation: 3422

Use whole layout inside LinearLayout;

 <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="Enter any text"
    tools:layout_editor_absoluteX="70dp"
    tools:layout_editor_absoluteY="57dp" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Print"
    tools:layout_editor_absoluteX="89dp"
    tools:layout_editor_absoluteY="-250dp" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your text will be displayed here:"
    tools:layout_editor_absoluteX="307dp"
    tools:layout_editor_absoluteY="-35dp" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="onButtonClick"
    android:text="Print"
    tools:layout_editor_absoluteX="133dp"
    tools:layout_editor_absoluteY="122dp" />

</LinearLayout>

Upvotes: 0

Madalin Sisu
Madalin Sisu

Reputation: 92

You can use LinearLayout with vertical orientation instead of ConstraintLayout

Upvotes: 0

Related Questions