Question

I’ve been trying to successfully align the views so they look the same on other phones but I can’t succeed. I just can’t get it to work. Here is the background:

I want a TextView in the middle of the green zone, and in the middle of the blue zone, and an imageview in the orange zone. I already asked this and I got a suggestion to use layout_weight here. But I can’t correctly calculate the weight. How can I do this? Is the layout_weight is the right way to go? how do I calculate it?

The measures:
The left and right side of the screen (yellow) are empty.. 40 px each..
The green zone have a TextView at the centrer .. 236 px
The orange zone has an imageview at the center .. 44 px
The blue zone has a TextView at the center .. 120 px

The xml I used for the custom_row:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:orientation="horizontal"
android:layout_height="wrap_content"  android:paddingTop="10dip" android:paddingBottom="10dip">

<TextView android:id="@+id/Start_Numbering" android:textSize="19.5dip"
    android:layout_width="0dp" android:layout_height="wrap_content"
    android:layout_weight="0.3" android:background="@drawable/list_number_bg"
    android:gravity="center"
    />

<ImageView android:id="@+id/Start_ImageView"
    android:layout_weight="0.1" android:layout_height="fill_parent" android:scaleType="center" 
    android:layout_width="0dp" android:src="@drawable/list_noaudioavailable"
    android:gravity="center"
    ></ImageView>


<TextView android:id="@+id/Start_Name" android:textColor="#a7e9fe"
    android:textSize="25dip" android:layout_width="0dp"
    android:layout_weight="0.6"
    android:gravity="center"  android:background="@drawable/list_name_bg"
    android:layout_height="wrap_content" />

Answer 1

If you want your layout to be flexible for different screen sizes then you DON’T want to hard code pixel widths instead you should use layout_weights as was the answer in your previous question. For a ViewGroup you can define a total weightSum and then the individual weights must be defined for each of the children which must add up to the weightSum of the parent. Here is a simple example that is similar to what you described above using black and white colors:

<LinearLayout android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="20"> 
        <View android:id="@+id/view1" 
            android:layout_weight="2"
            android:layout_width="0dp" 
            android:layout_height="fill_parent"
            android:background="@android:color/white"/>

        <View android:id="@+id/view2" 
            android:layout_weight="7"
            android:layout_width="0dp" 
            android:layout_height="fill_parent"
            android:background="@android:color/black"/>

        <View android:id="@+id/view3" 
            android:layout_weight="2"
            android:layout_width="0dp" 
            android:layout_height="fill_parent"
            android:background="@android:color/white"/> 

        <View android:id="@+id/view4" 
            android:layout_weight="7"
            android:layout_width="0dp" 
            android:layout_height="fill_parent"
            android:background="@android:color/black"/>

        <View android:id="@+id/view5" 
            android:layout_weight="2"
            android:layout_width="0dp" 
            android:layout_height="fill_parent"
            android:background="@android:color/white"/>

</LinearLayout>

The measures:
The left and right side of the screen (yellow) are empty.. 40 px each..
The green zone have a TextView at the centrer .. 236 px
The orange zone has an imageview at the center .. 44 px
The blue zone has a TextView at the center .. 120 px

just convert those pixels vales into width valuse and use the sum of those pixels values as the weightSum in the parent