ListView row styling - left aligned text, and right-aligned icon
-
22-09-2019 - |
Question
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:
Solution
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
OTHER TIPS
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):
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>