How to allign views properly according to a design?

a designer made some design for my Android app, here is a design for a ListView (not the real one but the same idea..):

So in the middle of the green area there is some text, and in the orange area an imageview (clickable..), and in the middle of the blue area another text.. this is 1 listview.. so if you swipe one row the other also swipe the same.. (they arent 3 listviews..) The yellow area is empty

How do I align the views so it works on all screen sizes? How can I center the text in the green and blue area?

Thanks

Here is the xml of the row I used:

<?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:paddingLeft="40dip"
android:paddingRight="40dip">
<TextView android:id="@+id/Start_Numbering" android:textSize="19.5sp"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_weight="0.3" 
    />

<ImageView android:id="@+id/Start_ImageView"
    android:layout_weight="0.1" android:layout_height="wrap_content"
    android:layout_width="fill_parent"        android:src="@drawable/list_noaudioavailable"
    ></ImageView>


<TextView android:id="@+id/Start_Name" android:textColor="#a7e9fe"
    android:textSize="21dip" android:layout_width="fill_parent"
    android:layout_weight="0.6"
    android:layout_height="w开发者_开发知识库rap_content" />

Here is getView:

 @Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder     holder;

    if(convertView == null) {
        convertView = mInflater.inflate(R.layout.start_row, null); //line 47
        holder=new ViewHolder();

        holder.tv_Name   =(TextView)convertView.findViewById(R.id.Start_Name);
        holder.tv_PageNumber = (TextView)convertView.findViewById(R.id.Start_Numbering);
        holder.im_Audio=(ImageView)convertView.findViewById(R.id.Start_ImageView);
        convertView.setTag(holder);
    } else {
        holder  = (ViewHolder) convertView.getTag();
    }

    holder.tv_Name.setText(Names[position]);
    holder.tv_PageNumber.setText(Integer.toString(PageNumber[position]));
    return convertView;
}

class ViewHolder {
    TextView       tv_Name;
    TextView       tv_PageNumber;
    ImageView      im_Audio;
}

But all I get is this, why the tv_Name isnt being display?:

Omar, your questions wasn't crystal clear, but I will give it a shot.

You use

In your row.xml, you would use

1. LinearLayout as the parent with orientation as horizontal

2. It will have five child elements

   • a. Yellow View with layout_weight=2
   • b. Blue TextField with layout_weight=5
   • c. Orange ImageField with layout_weight=3
   • d. Green TextField with layout_weight=4
   • e. Yellow View with layout_weight=1

For centering the text use appropriate text align property. All of these elements should have layout_width defined as fill_parent.