CODEWITHSUNDEEP
androidxmllayoutcustom-controls
Christopher Rucinski
Christopher Rucinski

Reputation: 4867

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.

Basically, the playlist items should extend to the right side of the screen, and the colored text should be all on the right side of the screen (That is what the Designer is showing). Right now the colored text lines up right where the song title ends.

How do I fix this?

EXPECTED RESULT

Expected Result

WHAT I AM GETTING!

What I am getting

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"
android:layout_height="64dp"
android:orientation="horizontal" >

<ImageView
    android:id="@+id/imgSongThumbnail"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:layout_weight="0"
    android:contentDescription="@string/hello_world"
    android:src="@drawable/crayonpop_barbarbar" />

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_weight="0" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_margin="8dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/txtSongName"
            android:layout_width="fill_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" />

        <TextView
            android:id="@+id/txtGroupName"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/group"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#DDD" 
            android:singleLine="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:layout_margin="8dp"
        android:gravity="bottom"
        android:orientation="vertical" >

        <TextView
            android: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" />

    </LinearLayout>
</FrameLayout>

</LinearLayout>

UPDATE

Based I reworked my code to follow a hybrid LinearLayout x RelativeLayout scheme before I noticed a bunch of answers pop up here. @yahya was the almost identical to what I came up with, so I accepted that answer, as that answer really took into account the precise layout that I presented in the photos above with attention on reducing the use of a lot of margin code.

The following is what my code (which again is very similar to @yahya 's answer below) looks like on my phone. Go ahead...look up these songs and enjoy ;)

enter image description here

Upvotes: 1

Views: 445

Answers (6)

Scott W
Scott W

Reputation: 9872

Actually, this entire layout could be done with many fewer views by putting all of the children inside of a single RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="64dp"
    android:background="#333" >

    <ImageView
        android:id="@+id/imgSongThumbnail"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:contentDescription="@string/hello_world"
        android:src="@drawable/crayonpop_barbarbar" />

    <TextView
        android:id="@+id/txtSongName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:layout_toRightOf="@id/imgSongThumbnail"
        android:ellipsize="middle"
        android:singleLine="true"
        android:text="Bar Bar Bar Bar Bar Bar Bar"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#DDD" />

    <TextView
        android:id="@+id/txtGroupName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/txtSongName"
        android:layout_below="@id/txtSongName"
        android:layout_marginBottom="8dp"
        android:singleLine="true"
        android:text="Sistar"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#DDD" />

    <TextView
        android:id="@+id/txtSongMetaInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/txtGroupName"
        android:layout_alignRight="@id/txtSongName"
        android:layout_gravity="end"
        android:layout_weight="0"
        android:text="Remix #1"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@android:color/holo_blue_bright"
        android:textSize="12sp" />

</RelativeLayout>

Upvotes: 0

David Scott
David Scott

Reputation: 1666

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.

Upvotes: 0

RanjithKumarRagavan
RanjithKumarRagavan

Reputation: 61

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/vw_grey_btn" >

<ImageView
    android: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" />

<LinearLayout
    android: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" >

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android: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" />

        <TextView
            android: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 :

Upvotes: 1

yahya
yahya

Reputation: 4860

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent"
android:layout_height="64dp"
android:orientation="horizontal" >

<ImageView
    android:id="@+id/imgSongThumbnail"
    android:layout_width="64dp"
    android:layout_height="64dp" 
    android:contentDescription="@string/hello_world"
    android:src="@drawable/crayonpop_barbarbar" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_margin="8dp"
    android:layout_height="match_parent"  >

    <TextView
        android: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" />

        <LinearLayout  
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtSongName"
            android:orientation="horizontal" 
            android:gravity="right" >


            <TextView
                android: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" />

            <TextView
                android: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>

Upvotes: 2

focuser
focuser

Reputation: 897

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.

Upvotes: 0

prijupaul
prijupaul

Reputation: 2086

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.

Upvotes: 1

Related Questions