ListView row styling - left aligned text, and right-aligned icon

16,251

Solution 1

Step #1: Use a RelativeLayout base.

Step #2: Put your ImageButton as having android:layout_alignParentRight="true"

Step #3: Put your TextView has having android:layout_alignParentLeft="true", android:layout_toLeftOf="..." (where ... is the ID of your ImageButton), and perhaps some other RelativeLayout.LayoutParams value for vertical alignment

Solution 2

The following code snippet provides an example of how to create a ListView row that has some text (horizontally left-aligned, via android:layout_alignParentLeft="true"), and an icon (horizontally right-aligned via android:layout_alignParentRight="true"), and all vertically centred (android:layout_centerVertical="true").

It renders as follows (YMMV, depending on global styles):

Rendering of code example

There is also a commented-out additional icon that can be placed to the left of the right-most icon; remove the XML comment tags to enable.

Here is the layout XML:

<?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="?android:attr/listPreferredItemHeight"
    android:descendantFocusability="blocksDescendants"
    android:padding="6dp">
    <!-- Note: android:descendantFocusability="blocksDescendants" set to ensure that
     OnItemClickListener works by ensuring constituent controls do not take focus -->


    <TextView
        android:id="@+id/lbl_list_item_row_text"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:lines="1"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="My List Item Text"
        />

    <!-- This can be uncommented to add another button 

    <ImageButton
        android:id="@+id/btn_additional_icon"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/icon_additional_icon"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:padding="3dp"
        android:background="@null" 
        android:src="@drawable/icon_additional_icon" />

    -->

    <ImageButton
        android:id="@+id/icon_additional_icon"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@null"
        android:padding="3dp"
        android:src="@drawable/icon_right_aligned_icon" />
</RelativeLayout>
Share:
16,251
Kleptine
Author by

Kleptine

Updated on June 05, 2022

Comments

  • Kleptine
    Kleptine almost 2 years

    I'm trying to get ListView row to look like the following:

    | Text-Text-Text                        <ImageButton> |
    

    With the imagebutton snapped to the right edge. How can I do this? Here's the current layout code I'm using. What am I doing wrong?

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/layercontainer"
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:background="#699">
     <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       android:layout_gravity="left">
       <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="YO HOW SI IT GOESSDA" />
     </LinearLayout>
    
     <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       android:layout_gravity="right">
       <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/trash" />
     </LinearLayout>
    </LinearLayout>
    

    My code currently produces this: grrr