Atul Atul - 3 months ago 6
Android Question

Adding overflow icon in each row of list

I am trying to add overflow icon (to display popup menu) to each row of list. Each row has image on left side (70dp*70dp) and overflow icon image on right side (27dp*70dp).

My current layout is like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/list_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:paddingLeft="7dp"
android:paddingStart="7dp"
android:paddingRight="7dp"
android:paddingEnd="7dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:clickable="true"
android:background="?android:attr/selectableItemBackground"
android:orientation="vertical">

<!-- ListRow Left side Thumbnail image -->
<LinearLayout android:id="@+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginRight="5dip"
android:layout_marginEnd="5dip">

<ImageView
android:id="@+id/neighborlisticon"
android:contentDescription="@string/icon_description"
android:layout_width="70dip"
android:layout_height="70dip"/>
</LinearLayout>

<TextView
android:id="@+id/name"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/name"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_alignTop="@+id/thumbnail"
android:layout_toRightOf="@+id/thumbnail"
android:layout_toEndOf="@+id/thumbnail"/>

<TextView
android:id="@+id/middleline"
android:textSize="13sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/middleline"
android:layout_below="@id/name"
android:layout_marginTop="1dip"
android:layout_toRightOf="@+id/thumbnail"
android:layout_toEndOf="@+id/thumbnail"/>

<TextView
android:id="@+id/text"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:layout_below="@id/middleline"
android:layout_marginTop="1dip"
android:layout_toRightOf="@+id/thumbnail"
android:layout_toEndOf="@+id/thumbnail"/>

<ImageView
android:id="@+id/item_overflow"
android:layout_width="27dp"
android:layout_height="70dip"
android:layout_gravity="top|right"
android:padding="5dp"
android:scaleType="center"
android:src="@drawable/ic_more_vert_black_24dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />

</RelativeLayout>


And the output is like this:

enter image description here

So we can see clearly text in middle row is overlapping image (three dots) on right side. Which I don't want. The problem is, tap on overflow icon is treated as tap on row and hence popup menu never appears.

How to specify in RelativeLayout to align left image to left side and right image to right side and use all available space in middle for textview(s) ?

Answer

You use this layout for overlapping image (three dots) on right side

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/list_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:paddingLeft="7dp"
android:paddingStart="7dp"
android:paddingRight="7dp"
android:paddingEnd="7dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:clickable="true"
android:background="?android:attr/selectableItemBackground"
android:orientation="vertical">

<!--  ListRow Left side Thumbnail image -->
<LinearLayout android:id="@+id/thumbnail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginRight="5dip"
    android:layout_marginEnd="5dip">

    <ImageView
        android:id="@+id/neighborlisticon"
        android:contentDescription="@string/icon_description"
        android:layout_width="70dip"
        android:layout_height="70dip"/>
</LinearLayout>

<TextView
    android:id="@+id/name"
    android:textSize="16sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/name"
    android:layout_toLeftOf="@id/item_overflow"
    android:textStyle="bold"
    android:layout_alignParentTop="true"
    android:layout_alignTop="@+id/thumbnail"
    android:layout_toRightOf="@+id/thumbnail"
    android:layout_toEndOf="@+id/thumbnail"/>

<TextView
    android:id="@+id/middleline"
    android:textSize="13sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/middleline"
    android:layout_toLeftOf="@id/item_overflow"
    android:layout_below="@id/name"
    android:layout_marginTop="1dip"
    android:layout_toRightOf="@+id/thumbnail"
    android:layout_toEndOf="@+id/thumbnail"/>

<TextView
    android:id="@+id/text"
    android:textSize="14sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/black"
    android:layout_toLeftOf="@id/item_overflow"
    android:layout_below="@id/middleline"
    android:layout_marginTop="1dip"
    android:layout_toRightOf="@+id/thumbnail"
    android:layout_toEndOf="@+id/thumbnail"/>

<ImageView
    android:id="@+id/item_overflow"
    android:layout_width="27dp"
    android:layout_height="70dip"
    android:layout_gravity="top|right"
    android:padding="5dp"
    android:scaleType="center"
    android:src="@drawable/ic_more_vert_black_24dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

android:layout_toLeftOf="@id/item_overflow" and android:layout_toStartOf="@id/item_overflow" is used for overlapping issues in your file.

Comments