Android Studio: Différence dans la mise en page entre le mode Aperçu et le mode Simulateur

Question

Je viens de plonger dans le monde du développement d'applications Android et j'ai récemment créé ma première application de calculatrice. Quand je lance l'application sur le simulateur, j'ai vu un problème qu'il ya une différence entre la mise en page en mode Aperçu et celui en mode simulateur, comme vous pouvez le voir ci-dessous:

Et ici est mon fichier content_main.xml:

<?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" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:showIn="@layout/activity_main" 
    tools:context="com.example.sonduong.calculator.MainActivity"> 

    <TextView 
     android:id="@+id/textView3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="of" 
     android:textSize="24sp" 
     tools:layout_editor_absoluteX="181dp" 
     tools:layout_editor_absoluteY="255dp" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="%" 
     android:textSize="24sp" 
     tools:layout_editor_absoluteX="300dp" 
     tools:layout_editor_absoluteY="207dp" /> 

    <EditText 
     android:id="@+id/numberTxt" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:ems="10" 
     android:hint="Enter Number" 
     android:inputType="numberDecimal" 
     android:textAlignment="center" 
     tools:layout_editor_absoluteX="85dp" 
     tools:layout_editor_absoluteY="296dp" /> 

    <TextView 
     android:id="@+id/totalTextView" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:text="0" 
     android:textAlignment="center" 
     android:textSize="36sp" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_bias="0.101" /> 

    <TextView 
     android:id="@+id/textView" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="What is" 
     android:textSize="24sp" 
     tools:layout_editor_absoluteX="152dp" 
     tools:layout_editor_absoluteY="129dp" /> 

    <EditText 
     android:id="@+id/percentageTxt" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:ems="10" 
     android:hint="Enter Percentage" 
     android:inputType="numberDecimal" 
     android:textAlignment="center" 
     tools:layout_editor_absoluteX="85dp" 
     tools:layout_editor_absoluteY="193dp" /> 

    <Button 
     android:id="@+id/calcBtn" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="CALCULATE" 
     tools:layout_editor_absoluteX="147dp" 
     tools:layout_editor_absoluteY="374dp" /> 

</android.support.constraint.ConstraintLayout> 

Cependant, dans ce fichier xml J'ai aussi eu des erreurs et ils ressemblent:

Quelqu'un peut-il m'aider comment puis-je ajuster pour avoir la même vue entre Aperçu et Simulateur. Je vous remercie!

Answer 1

Ajuster Selon vos besoins.

Remplacez votre XML avec ce XML

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

<TextView 
    android:id="@+id/textView3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="of" 
    android:textSize="24sp" 
    android:layout_marginLeft="8dp" 
    app:layout_constraintLeft_toLeftOf="parent" 
    android:layout_marginRight="8dp" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintHorizontal_bias="0.501" 
    android:layout_marginBottom="92dp" 
    app:layout_constraintBottom_toTopOf="@+id/numberTxt" /> 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="%" 
    android:textSize="24sp" 
    android:layout_marginRight="8dp" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintBaseline_toBaselineOf="@+id/percentageTxt" 
    android:id="@+id/textView2" /> 

<EditText 
    android:id="@+id/numberTxt" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:ems="10" 
    android:hint="Enter Number" 
    android:inputType="numberDecimal" 
    android:textAlignment="center" 
    android:layout_marginLeft="8dp" 
    app:layout_constraintLeft_toLeftOf="parent" 
    android:layout_marginRight="8dp" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintHorizontal_bias="0.505" 
    android:layout_marginBottom="0dp" 
    app:layout_constraintBottom_toTopOf="@+id/calcBtn" /> 

<TextView 
    android:id="@+id/totalTextView" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:text="0" 
    android:textAlignment="center" 
    android:textSize="36sp" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    android:layout_marginTop="8dp" /> 

<TextView 
    android:id="@+id/textView" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="What is" 
    android:textSize="24sp" 
    android:layout_marginLeft="8dp" 
    app:layout_constraintLeft_toLeftOf="parent" 
    android:layout_marginRight="8dp" 
    app:layout_constraintRight_toRightOf="parent" 
    android:layout_marginTop="8dp" 
    app:layout_constraintTop_toBottomOf="@+id/totalTextView" 
    app:layout_constraintHorizontal_bias="0.502" /> 

<EditText 
    android:id="@+id/percentageTxt" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:ems="10" 
    android:hint="Enter Percentage" 
    android:inputType="numberDecimal" 
    android:textAlignment="center" 
    android:layout_marginLeft="8dp" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/textView2" 
    android:layout_marginRight="8dp" 
    app:layout_constraintHorizontal_bias="0.0" 
    android:layout_marginBottom="8dp" 
    app:layout_constraintBottom_toTopOf="@+id/textView3" 
    android:layout_marginTop="8dp" 
    app:layout_constraintTop_toBottomOf="@+id/textView" /> 

<Button 
    android:id="@+id/calcBtn" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="CALCULATE" 
    android:layout_marginLeft="8dp" 
    app:layout_constraintLeft_toLeftOf="parent" 
    android:layout_marginRight="8dp" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintBottom_toBottomOf="parent" 
    android:layout_marginBottom="9dp" 
    app:layout_constraintHorizontal_bias="0.502" /> 

Answer 2

ok, vous devez utiliser linear layout avec le poids pour ce faire ,, essayez ce code ..

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

    <TextView 
     android:id="@+id/textView3" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"  android:text="of" 
     android:textSize="24sp" 
     tools:layout_editor_absoluteX="181dp" 
     tools:layout_editor_absoluteY="255dp" /> 

    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"  android:text="%" 
     android:textSize="24sp" 
     tools:layout_editor_absoluteX="300dp" 
     tools:layout_editor_absoluteY="207dp" /> 

    <EditText 
     android:id="@+id/numberTxt" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"  android:ems="10" 
     android:hint="Enter Number" 
     android:inputType="numberDecimal" 
     android:textAlignment="center" 
     tools:layout_editor_absoluteX="85dp" 
     tools:layout_editor_absoluteY="296dp" /> 

    <TextView 
     android:id="@+id/totalTextView" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_weight="1"  android:text="0" 
     android:textAlignment="center" 
     android:textSize="36sp" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_bias="0.101" /> 

    <TextView 
     android:id="@+id/textView" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"  android:text="What is" 
     android:textSize="24sp" 
     tools:layout_editor_absoluteX="152dp" 
     tools:layout_editor_absoluteY="129dp" /> 

    <EditText 
     android:id="@+id/percentageTxt" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"  android:ems="10" 
     android:hint="Enter Percentage" 
     android:inputType="numberDecimal" 
     android:textAlignment="center" 

     tools:layout_editor_absoluteX="85dp" 
     tools:layout_editor_absoluteY="193dp" /> 

    <Button 
     android:id="@+id/calcBtn" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 

     android:text="CALCULATE" 
     tools:layout_editor_absoluteX="147dp" 
     tools:layout_editor_absoluteY="374dp" /> 

</LinearLayout>