Trying to understand Android layouts, image sizes and relations

Question

I'm developing apps for android since over a year now with success, but one thing is still a problem for me: How to design a layout with a combination of TextViews, ImageViews and Buttons while retaining the relation between each elements on different screen sizes.

I want to build a layout like this:

It's for a listview, so many of these layouts are used. The app has a different layout for smartphones and tablets.

So the orange button on the right should always have 3 lines of text but should still have a maximum width, the image on the left should have the same height as the button on the right. The 3 lines of text in the middle should take up as many space as they can. The star image should have the same hight as the text on their right.

I've managed to build a similar test layout with a TableLayout, here are the previews from AndroidStudio: Nexus S

Nexus 6

On the Nexus S screen size, the layout is OK but on bigger screens it's ugly. The button is too small, the image on the left is also too small.

Here is the code for my test layout:

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow android:orientation="horizontal"
          android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:contentDescription="@string/dummy"
        android:padding="@dimen/raster4dp"
        android:scaleType="fitXY"
        android:src="@drawable/avatar_1" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="some nice text here"
            android:layout_alignParentLeft="true"
            android:textAppearance="?android:attr/textAppearanceMedium"
            />
        <ImageView
            android:id="@+id/iv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv1"
            android:src="@drawable/ic_male_user_bw"
            android:layout_alignParentLeft="true"
            />
        <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="more nice text"
            android:layout_toRightOf="@id/iv2"
            android:layout_alignBottom="@id/iv2"
            android:textAppearance="?android:attr/textAppearanceMedium"
            />
        <ImageView
            android:id="@+id/iv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/iv2"
            android:layout_alignParentLeft="true"
            android:src="@drawable/ic_male_user_bw"
            />
        <TextView
            android:id="@+id/tv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="more nice text"
            android:layout_toRightOf="@id/iv3"
            android:layout_alignBottom="@id/iv3"
            android:textAppearance="?android:attr/textAppearanceMedium"
            />
    </RelativeLayout>

    <Button
        android:id="@+id/btn1"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@drawable/button_dropshadow_black_xml"
        android:text="Line1\nLine2\nLine3"
        android:textColor="@android:color/white" />
</TableRow>
</TableLayout>

So hopefully my question is not too silly, but i have some problems understanding how to fix this. Currently I'm using a width of fixed 80dp on the button and the image to the left. I think this is not realy the way it works on Android. What sizes do i need to use here, what kind of layouts?

The sections about sreensizes etc. on the developer site is known by me (https://developer.android.com/guide/practices/screens_support.html) but it wasn't that helpful to me.

Thanks for help! :)

Answer 1

DP is for setting a fixed amount of pixels, if you don't want to consider the pixel density of your device's screen. This lets you that a button would be shown with the same size in a Nexus 4,5 or in a Samsung Galaxy Mini.

The same "absolute" size. This means that if your image is too big, it could fit in Nexus, but no in the other because of its smaller screen. This is due to the fact that it does not depend on the screen size, neither the pixel density.

What I hardly recommend you is the use of LinearLayouts (with their attribute weight) and RelativeLayouts as direct children (in case you need them). This could be "the same" (not exactly) than the use of "%" in CSS.

Here, you can see an example of weight attribute (The second answer gives you more tips).

Linear Layout and weight in Android

I hope this helps!!

Answer 2

check this .... increase parent layout height if needed:

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

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="dummy"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="6"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="some nice text here"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/iv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <TextView
                android:id="@+id/tv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="more nice text"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/iv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <TextView
                android:id="@+id/tv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="more nice text"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/iv23"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <ImageView
                android:id="@+id/iv24"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
        </LinearLayout>
    </LinearLayout>

    <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="#565657"
        android:text="Line1\nLine2\nLine3"
        android:textColor="@android:color/white" />

</LinearLayout>

Answer 3

Each terminal has different dimensions. If you put a button that has a size of 80dp, when other terminal screen is larger, that button is going to be smaller compared to the terminal screen you were doing the tests.

You should play with WEIGHT.

|             |                         |            |  
|_____________|_________________________|____________|
      0.3                0.5                 0.2        0.3 + 0.5 + 0.2 = 1 <-Weight.

Read this, will help. Also there's a question similar to yours, check it too.