Defining sizes in pixels

Question

I have a ListView with a custom layout, whichs consists of an image on the left hand side, and two TextViews next to it.

Since the height of the list item should not be higher than the image, I have considered defining the height to be 150px, which is the size of the image.

However, this is causing Android Studio to show me a warning.

Is setting the height of the item in pixels considered bad practice in this case, and if so, how should I fix it?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:adjustViewBounds="true"
    android:scaleType="centerInside"
    android:src="@mipmap/ic_launcher" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:textAppearanceLarge"
        tools:text="Text" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textAppearance="?android:textAppearanceMedium"
        tools:text="Text" />

</LinearLayout>

This is a picture of the layout I want to create:

Using px in Android is bad practice in any case tbh. Why don't you say some more about the layout you're trying to achieve. Maybe a picture of what you want? Then we could help you with the "correct" approach for your case. — Bartek Lipinski, Feb 16 '18 at 14:23
Have a look of this thread:https://stackoverflow.com/questions/2025282/what-is-the-difference-between-px-dip-dp-and-sp — Zeero0, Feb 16 '18 at 14:26
@BartekLipinski I have edited my question to include an image — Larpee, Feb 16 '18 at 14:46
@Larpee Now you need to think how it should act when the text gets bigger (e.g. due to device text scaling). Look [here](https://i.imgur.com/iw9KfEw.png). Should it work like in `a)` or in `b)`? — Bartek Lipinski, Feb 16 '18 at 15:32
@BartekLipinski I chose option `b)`, and I edited my question to include the code I used. Thank you very much for your help! — Larpee, Feb 16 '18 at 18:43

Pavneet_Singh · Answer 1 · 2018-02-16T14:27:00.760

1

Is setting the height of the item in pixels considered bad practice in this case?

Because it will prevent android OS to adjust the size of the view according to the available space of different-2 screens

how should I fix it?

use dp instead of px

px mean actual pixel on the screen so the devices with higher density, will have more pixels per inch compared to small density screens so the view will be displayed with small size on higher density screens

dp is display independent pixel which is calculated with the help of below formula

px = dp * (dpi / 160)

A set of six generalized densities:

ldpi (low) ~120dpi
mdpi (medium) ~160dpi
hdpi (high) ~240dpi
xhdpi (extra-high) ~320dpi
xxhdpi (extra-extra-high) ~480dpi
xxxhdpi (extra-extra-extra-high) ~640dpi

edited Feb 16 '18 at 14:27

answered Feb 16 '18 at 14:20

Pavneet_Singh

36,884
5
53
68

This doesn't solve the issue. If the user is using text scaling on his device the text size can exceed the `150dp` height of the item. This will prevent the text from being displayed to the user (or at least not the whole text will be displayed). – Bartek Lipinski Feb 20 '18 at 09:04
@BartekLipinski for text scaling use `sp` not `dp` – Pavneet_Singh Feb 20 '18 at 13:53
using `sp` for item height is bad practice. – Bartek Lipinski Feb 20 '18 at 14:48
@BartekLipinski oh i thought its OP and i thought you want to scale text so that's why i said `sp` but anyway if that's the scenario then i would use [Autosizing TextViews](https://developer.android.com/guide/topics/ui/look-and-feel/autosizing-textview.html) – Pavneet_Singh Feb 20 '18 at 14:53

score 1 · Answer 2 · answered Feb 16 '18 at 14:31

1

you need different image sizes to support different screens.

for example mdpi is 1,0x, hdpi - 1,5x, means, if your picture has size in mdpi 150px, you need 225px picture for hdpi.

than your ListView could have size of 150dp (mdpi is 1,0x).

answered Feb 16 '18 at 14:31

anatoli

1,663
1
17
43

I'm getting the images using the wordpress API, so I can't include different sizes – Larpee Feb 16 '18 at 14:33

score 1 · Answer 3 · edited Feb 20 '18 at 15:33

Continuing the discussion from comments, you should modify your layout to work dynamically with other Views. Using pixels in your layouts is a bad practice 99.999% of the times (but don't quote me on that ).

I would suggest using ConstraintLayout that can flatten your hierarchy here, keeping all needed aspects of your case (including 1:1 ratio for your image).

Here's the layout that will work for you:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:textAppearance="?android:textAppearanceLarge"
        app:layout_constraintBottom_toTopOf="@+id/subtitle"
        app:layout_constraintLeft_toRightOf="@+id/image"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:textAppearance="?android:textAppearanceMedium"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/title"
        app:layout_constraintRight_toRightOf="@+id/title"
        app:layout_constraintTop_toBottomOf="@+id/title"/>

</android.support.constraint.ConstraintLayout>

Let me know if you can't understand the layout.

Defining sizes in pixels

3 Answers3