Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent views from overlapping in RelativeLayout

I'm trying to develop an android application, but I'm having some problems with the GUI design. The following part of screenshot is my problem (red and blue lines were generated by Android debug options).

my problem

This is the code:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/caption"
    android:layout_below="@+id/caption" >

    <ImageButton
        android:id="@+id/button_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/content_edit"
        style="?android:attr/borderlessButtonStyle" />

    <TextView
        android:id="@+id/myText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="@string/num_placeholder"
        android:textAppearance="?android:attr/textAppearanceLarge" />


</RelativeLayout>

As you can see, the TextView myText overlaps the ImageButton button_edit. A simple solution would be to use a LinearLayout instead of a RelativeLayout. The problem is that:

  1. I need the edit button on the right
  2. I need the text to fill the rest of the layout (at the left of edit button obviously)

I also tried to set myText's layout_width to 'fill_parent', but it fill the entire rest of the screen at the left of the edit button.

The expected behavior would be myText to increase its height (becoming a two-lines TextView) instead of overlapping 'button_edit'

Can anyone help me? Thanks

like image 631
Gnufabio Avatar asked Aug 29 '13 19:08

Gnufabio


1 Answers

use layout_toLeftOf in TextView layout

like this:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/caption"
android:layout_below="@+id/caption" >

<ImageButton
    android:id="@+id/button_edit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:src="@drawable/content_edit"
    style="?android:attr/borderlessButtonStyle" />

<TextView
    android:id="@+id/myText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:text="@string/num_placeholder"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:layout_toLeftOf="@+id/button_edit" />

like image 103
moh.sukhni Avatar answered Oct 04 '22 21:10

moh.sukhni