layout for different devices - constraintlayout and smallest width qualifier

1
votes

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>

1
androidandroid-layoutandroid-constraintlayout
If you use constraint layout doesn't mean it will work properly on all devices. If the layout is bad, then it doesn't matter what you use. You have to add more details about your problem, what your tried, what you expect and what you actually got. - danypata
I updated my Post :) - Tommotmot
So you use constraint layout but you use a fixed width/height for your buttons which makes the constraint layout, or any other layout useless. You will always have a button with that fixed width/height on all devices, and that's why on some it will look smaller and on some bigger. You have to figure out a way to make the content of your layout relative to the screen size, and use fixed width/height when you want to have the exact width/height on all devices. - danypata
is there a way to do a similar result with "wrap content"? Do you have a example? - Tommotmot

1 Answers

1
votes

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