不同设备的布局 - 约束布局和最小宽度限定符

Question

Hey I develop my first Android Application... I would like to develop my layout for these devices:

• 480×854 | 240 dpi
• 720×1280 | 320 dpi
• 1080×1920 | 420 dpi
• 1080×1920 | 480 dpi
• 1440×2672 | 640 dpi

I already use Constraint Layout - but it doesnt look nice at all devices, should I use smallest width qualifier and how do I find out swxxxdp for xxxdpi?

I have a CardView - this looks good for me on 480 x 800 but the Buttons and textsize are to little on other devices - I think because i dont use wrap content for these buttons and textviews.. How do they adapt to all devices?.. It's my first Android Project..

<android.support.v7.widget.CardView xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
card_view:cardElevation="10dp"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="7dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center">


<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"
    android:layout_gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/main_Image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/main_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="Vegane Bolognese"
        android:textColor="@color/colorBlack"
        android:textSize="15dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_Image" />

    <TextView
        android:id="@+id/main_Usp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Bolo mit Tofu"
        android:textColor="@color/colorBlack"
        android:textSize="12dp"
        app:layout_constraintDimensionRatio="w,16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_name" />

    <Button
        android:id="@+id/md_btn_time"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/ic_time"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_Usp" />

    <Button
        android:id="@+id/md_btn_difficulty"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/ic_difficulty"
        app:layout_constraintStart_toEndOf="@+id/md_btn_time"
        app:layout_constraintTop_toBottomOf="@+id/main_Usp" />

    <Button
        android:id="@+id/md_btn_servings"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/ic_servings"
        app:layout_constraintStart_toEndOf="@+id/md_btn_difficulty"
        app:layout_constraintTop_toBottomOf="@+id/main_Usp" />

    <Button
        android:id="@+id/md_btn_owner"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/ic_insta"
        app:layout_constraintStart_toEndOf="@+id/md_btn_servings"
        app:layout_constraintTop_toBottomOf="@+id/main_Usp" />

    <TextView
        android:id="@+id/md_time"
        android:layout_width="32dp"
        android:layout_height="16dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="35 Min"
        android:textAlignment="center"
        android:textColor="@color/colorBlack"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/md_btn_time"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/md_difficulty"
        android:layout_width="32dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Leicht"
        android:textAlignment="center"
        android:textColor="@color/colorBlack"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/md_time"
        app:layout_constraintTop_toBottomOf="@+id/md_btn_difficulty"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/md_servings"
        android:layout_width="32dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="4"
        android:textAlignment="center"
        android:textColor="@color/colorBlack"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/md_difficulty"
        app:layout_constraintTop_toBottomOf="@+id/md_btn_servings"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/md_owner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@VeganeKochapp"
        android:textAlignment="center"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/md_servings"
        app:layout_constraintTop_toBottomOf="@+id/md_btn_owner"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/main_Price"
        android:layout_width="60dp"
        android:layout_height="32dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/price_button"
        android:text="12,99 €"
        android:textColor="@color/colorWithe"
        android:textSize="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/md_owner"
        app:layout_constraintTop_toBottomOf="@+id/main_Usp"
        app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>

Answer 1

you have to set the constraints of Constraint Layout in a proper way then it will work on All devices perfectly.

Or you can add multiple layouts for different screen sizes Multiple Screen Sizes

Or you can use this library, it will adjust your items size according to screen dimensions SDP Library