Question

I have a custom dialog in my app that descends from Activity and uses RelativeLayout, with all positioning and properties being handled by the XML file and none in the code. I have the layout exactly the way I want it, but because of the length of some of the items in the dialog, some lines of the information wrap to the next line. This isn’t a problem, except for the fact that the Close button in the dialog looks like someone sat on it in these cases.

This is a screenshot from the emulator that shows the button as fine, but I want some padding on the right of the description text so it’s not butted up against the right side of the dialog:

Seeing this, I added android:layout_marginRight="5dp" to the layout file, hoping to get my margin, which it seems to do – and I get my wrap – but the button isn’t right. The height of the dialog isn’t changing when I would expect it to because the description is now wrapping a line.

Here’s my full layout XML. This is the first time I’ve used RelativeLayout, so hopefully this is something simple I’m overlooking.

    <?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="fill_parent">
        <ImageView
                android:id="@+id/achievement_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_marginLeft="7dp"
                android:contentDescription="@string/achievement_icon" />
        <TextView
                android:id="@+id/achievement_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:textColor="#ffffff"
                android:textStyle="bold"
                android:layout_toRightOf="@+id/achievement_icon" />
        <TextView
                android:id="@+id/achievement_gamerscore"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:textStyle="bold"
                android:layout_marginLeft="5dp"
                android:layout_below="@+id/achievement_name"
                android:layout_toRightOf="@+id/achievement_icon" />
        <TextView
                android:id="@+id/achievement_description"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="7dp"
                android:layout_marginRight="5dp"
                android:layout_alignLeft="@+id/achievement_icon"
                android:layout_below="@+id/achievement_icon" />
        <TextView
                android:id="@+id/achievement_earned"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="7dp"
                android:layout_marginRight="5dp"
                android:layout_alignLeft="@+id/achievement_description"
                android:layout_below="@+id/achievement_description" />
        <Button
                android:id="@+id/cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="7dp"
                android:layout_centerHorizontal="true"
                android:text="@string/button_close"
                android:layout_below="@+id/achievement_earned" />
    </RelativeLayout>

Answer 1

The problem is you’re running out of room for the button.

To make room for the button:

1.)You can move the button maybe top right and display it as like an x.

2.)You could limit the size of the description TextView and set it to scroll vertically by surrounding the TextView in a scrollview (cleaner ways to do this also without the need of the ScrollView but you get my drift.

3.) Make the height of the button smaller.

Also I’d be wary of how the app phone looks on phones with different screens resolutions/densities. So please be aware of this when designing the UI.

Example of what I mean is:

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scrollbars="vertical"
    android:fillViewport="true">

     <TextView
            android:id="@+id/achievement_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="7dp"
            android:layout_marginRight="5dp"
            android:layout_alignLeft="@+id/achievement_icon"
            android:layout_below="@+id/achievement_icon" />

</ScrollView>

However you will need to limit the height of the “achievement_description” textview to a certain value instead of wrapping content.