Android Custom Control Layout Troubles

I have built a custom listView xml item; however, I am not getting what I expected...I changed the background colors to show in more detail what is happening on the second picture.

Solution 1:

I modified your layout, and reduce used embedded layouts to improve your view hierarc

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="64dp"android:orientation="horizontal" ><ImageViewandroid:id="@+id/imgSongThumbnail"android:layout_width="64dp"android:layout_height="64dp"android:contentDescription="@string/hello_world"android:src="@drawable/crayonpop_barbarbar" /><RelativeLayoutandroid:layout_width="match_parent"android:layout_margin="8dp"android:layout_height="match_parent"  ><TextViewandroid:id="@+id/txtSongName"android:layout_width="match_parent"android:layout_height="wrap_content"android:ellipsize="middle"android:singleLine="true"android:text="Bar Bar Bar Bar Bar Bar Bar"android:textAppearance="?android:attr/textAppearanceLarge"android:textColor="#DDD" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/txtSongName"android:orientation="horizontal"android:gravity="right" ><TextViewandroid:id="@+id/txtSongMetaInfo"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="end"android:layout_weight="0"android:text="@string/meta_data"android:textAppearance="?android:attr/textAppearanceSmall"android:textColor="@android:color/holo_blue_bright"android:textSize="12sp" /><TextViewandroid:id="@+id/txtGroupName"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/group"android:textAppearance="?android:attr/textAppearanceMedium"android:textColor="#DDD"android:singleLine="true" /></LinearLayout></RelativeLayout></LinearLayout>

Solution 2:

I would suggest you to use a RelativeLayout instead of LinearLayout. With RelativeLayout, you can align the components based on other components.

In this case,

The main textview with id txtSongName, should take width as match_parent.

txtGroupName should use layout_botton=@id/txtSongName

and txtSongMetaInfo should use layout_torightof=@id/txtGroupName and android:layout_alignParentRight="true"

Doing this the main advantages are reduced number layouts and hence better performance.

Solution 3:

Here comes your solution, just copy the below code it will suit your requirement.

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/vw_grey_btn" ><ImageViewandroid:id="@+id/imageView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_alignParentTop="false"android:layout_centerVertical="true"android:src="@drawable/logo" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="false"android:layout_centerVertical="true"android:layout_toRightOf="@+id/imageView1"android:orientation="vertical"android:padding="10dp" ><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Large Text"android:textAppearance="?android:attr/textAppearanceLarge" /><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:text="Medium Text"android:textAppearance="?android:attr/textAppearanceMedium" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:text="Small Text"android:textAppearance="?android:attr/textAppearanceSmall" /></RelativeLayout></LinearLayout></RelativeLayout>

Since my reputation is low am not able to attach my screen shot :

Solution 4:

Remove the weight on your ImageView, change the weight of your FrameLayout to 1 and width to 0dp, that should do it. But still, like @prijupaul suggested, use RelativeLayout to reduce the number of views, especially when its inside a ListView. BTW, I'd recommend you to take a look at this tool: jimulabs.com.

Solution 5:

What is your code for inflating the layout?

You should be inflating using something like this (assuming you are using a BaseAdapter)

convertView = mInflater.inflate(R.layout.XXXX, parent, false);

If you pass null as the ViewGroup root when you inflate, it will ignore the fill_parent/match_parent parameters of the root layout and set it to wrap_content, giving you the result you were getting.

Even though it looks like you've got the layout you wanted, you should ensure you are still inflating it correctly.