约束布局在不同设备上表现不同

Question

我正在尝试将我的相对布局转换为约束布局以适合所有设备，但我遇到了一些问题。在 Android Studio 的编辑器中，它看起来像这样：

我使用 Pixel C 作为模拟器制作的。现在，我在 Samsung Galaxy 选项卡上试用了该应用，结果如下：

为什么按钮不像第一张图那样在屏幕中央？这是 xml 的代码，如您所见，我什至锚定了元素以保持它们之间的距离：

<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:id="@+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background_main"
android:scaleType="centerCrop"
tools:context=".MainActivity">

<TextView
    android:id="@+id/textView2"
    android:layout_width="708dp"
    android:layout_height="231dp"
    android:layout_marginTop="152dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:fontFamily="@font/kotta_one"
    android:text="Test del pensiero\n       divergente"
    android:textColor="#000000"
    android:textSize="86dp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.57"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.195" />

<Button
    android:id="@+id/button_1"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="76dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/button_bg"
    android:text="@string/invioA"
    android:textAllCaps="false"
    android:textColor="#FFFFFF"
    android:textSize="18dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button_2"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="@+id/textView2"
    app:layout_constraintTop_toBottomOf="@+id/textView2"
    app:layout_constraintVertical_bias="0.028" />

<Button
    android:id="@+id/button_2"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:layout_marginEnd="188dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/button_bg"
    android:text="@string/invioB"
    android:textAllCaps="false"
    android:textColor="#FFFFFF"
    android:textSize="18dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/textView2"
    app:layout_constraintTop_toBottomOf="@+id/textView2"
    app:layout_constraintVertical_bias="0.028" />

<Button
    android:id="@+id/button_3"
    android:layout_width="161dp"
    android:layout_height="114dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/transparent"
    android:fontFamily="@font/kotta_one"
    android:text="Area\nDocenti"
    android:textAllCaps="false"
    android:textColor="#030000"
    android:textSize="26dp"
    app:layout_constraintEnd_toStartOf="@+id/textView2"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Answer 1

You are giving wrong width and height to button and textview.

Also, for horizontal button and same width and height you can use chain like below I used.

Here, I give you approx design and also you can use your ConstraintLayout because I have androidx migrated project.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/add_news_feed_bg"
    android:scaleType="centerCrop">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="Test del pensiero\n       divergente"
        android:textColor="#000000"
        android:textSize="86dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/bg_toolbar"
        android:text="invioA"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="18dp"
        app:layout_constraintBottom_toBottomOf="@+id/button_2"
        app:layout_constraintEnd_toStartOf="@+id/button_2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button_2" />

    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:background="@color/bg_toolbar"
        android:text="invioB"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="18dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button_1"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:background="@android:color/transparent"
        android:text="Area\nDocenti"
        android:textAllCaps="false"
        android:textColor="#030000"
        android:textSize="26dp"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

约束布局在不同设备上表现不同

Constraint Layout performs different on different devices

java

layout

android

tablet

android-constraintlayout