image overlaps text view in android activity

Question

Hi i am new to android and i have the following problem(see image).

enter image description here

As seen above the image over laps the text view. Can any one help me correct it.

I am using the following code.

<EditText
            android:id="@+id/outlet_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="170dp"            
            android:hint="@string/outlet_id_text"
            android:inputType="textAutoComplete" />

        <ImageView
            android:id="@+id/search_button"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_gravity="center"
            android:layout_marginTop="-48dp"
            android:adjustViewBounds="true"
            android:contentDescription="@string/cd_search_icon"
            android:src="@drawable/search_icon" />





<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background"
    android:orientation="vertical" >

    <LinearLayout       
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:background="@color/background"
        android:orientation="vertical" >

        <org.fluturasymphony.recommendation.ScrollingTextView

        android:text="Really Long Scrolling Text Goes Here.... ..... ............ .... ...."

        android:singleLine="true"

        android:ellipsize="marquee"

        android:marqueeRepeatLimit="marquee_forever"

        android:scrollHorizontally="true"

        android:id="@+id/TextView03"

        android:padding="25dip" 

        android:layout_width="wrap_content" 

        android:layout_height="wrap_content" />

        <EditText
            android:id="@+id/outlet_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="170dp"            
            android:hint="@string/outlet_id_text"
            android:inputType="textAutoComplete" />

        <ImageView
            android:id="@+id/search_button"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_gravity="center"
            android:layout_marginTop="-48dp"
            android:adjustViewBounds="true"
            android:contentDescription="@string/cd_search_icon"
            android:src="@drawable/search_icon" />

        <Button
            android:id="@+id/view_stores_on_map"
            android:layout_width="221dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="76dp"
            android:onClick="showStoreList"
            android:text="@string/view_stores_on_map" />

    <Button
        android:id="@+id/view_stores"

        android:layout_width="221dp"
        android:layout_height="wrap_content"


        android:layout_gravity="center"
        android:layout_marginTop="38dp"
        android:onClick="showStoreList"
        android:text="View List Of Stores" />

    </LinearLayout>


</RelativeLayout>

what layout are you using? you should use `RelativeLayout` and define the `layoutAbove` — thepoosh, Jan 02 '13 at 06:53
@user1844638 if you want to put imageview beside textview use linear layout. — Ajay S, Jan 02 '13 at 06:57
hi .. you have the options like android:drawableRight="@drawable/ic_launcher" in edit text itself.. you can use that right. — itsrajesh4uguys, Jan 02 '13 at 06:59
but wont that put the image to the extreme right. what i want is to put the image beside the text view — user1844638, Jan 02 '13 at 07:00

score 2 · Answer 1 · answered Jan 02 '13 at 07:00

you can use the following lines also . or if you want to use as a row items you can use orientation for those two items alone.

  <EditText
            android:layout_centerInParent="true"
            android:id="@+id/outlet_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="170dp"            
            android:hint="outlet_id_text"
            android:drawableRight="@drawable/ic_launcher"
            android:inputType="textAutoComplete" />

Pankaj Kumar · Answer 2 · 2013-01-10T04:51:15.137

2

Although you can manage your design using relative layout (BUT keep in mind your use is only show search image, so no need to add extra view for this requirement.), Here is simplest way is to do this

Use the android:drawableTop property on the EditText.

<EditText
    ...     
    android:drawableTop="@drawable/ic_action_search" />

and remove the <ImageView>

Other options are : android:drawableRight, android:drawableLeft, android:drawableBottom and more..

edited Jan 10 '13 at 04:51

answered Jan 02 '13 at 07:01

Pankaj Kumar

81,967
29
167
186

how do you reduce the width and height of the image. its really big if i do that. – user1844638 Jan 02 '13 at 07:15
You can set height of edittext to reduce height of image and you can add padding between drawable and text in text view using `android:drawablePadding="3dp"`. But I will suggest you to use smaller image. Follow the UI design patterns and make smaller image. – Pankaj Kumar Jan 02 '13 at 07:26

score 1 · Answer 3 · answered Jan 02 '13 at 06:57

If you wanna make it move up, change android:layout_marginTop of image view to a more negative value. Do the opposite if you need it to go down.

 <ImageView
    android:id="@+id/search_button"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_gravity="center"
    android:layout_marginTop="-48dp" <!-- add more  -ve value to move up, decrease to move down -->
    android:adjustViewBounds="true"
    android:contentDescription="@string/cd_search_icon"
    android:src="@drawable/search_icon" />

i dont want to move it up i need to move it to the right so that the image is right next to the text view. — user1844638, Jan 02 '13 at 07:17

score 1 · Answer 4 · answered Jan 02 '13 at 07:02

Try this I hope it will work.

<LinearLayout android:layout_width="fill_parent"
         android:layout_height="wrap_content" android:layout_marginTop="40dp">
    <EditText
            android:id="@+id/outlet_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/outlet_id_text"
            android:inputType="textAutoComplete" />

        <ImageView
            android:id="@+id/search_button"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:adjustViewBounds="true"
            android:contentDescription="@string/cd_search_icon"
            android:src="@drawable/ic_launcher" />
</LinearLayout>

Puneet · Answer 5 · 2013-01-02T07:19:55.747

Use android:layout_below="@+id/search_button" attribute to arrange your gadgets in View.

<EditText
        android:id="@+id/outlet_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp" 
        android:layout_below="@+id/search_button"           
        android:hint="@string/outlet_id_text"
        android:inputType="textAutoComplete" />

    <ImageView
        android:id="@+id/search_button"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_gravity="center"
        android:layout_marginTop="170dp"
        android:adjustViewBounds="true"
        android:contentDescription="@string/cd_search_icon"
        android:src="@drawable/search_icon" />

score 1 · Accepted Answer · answered Jan 02 '13 at 07:17

Try this :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:background="@color/background"
        android:orientation="vertical" >

        <org.fluturasymphony.recommendation.ScrollingTextView
            android:id="@+id/TextView03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:marqueeRepeatLimit="marquee_forever"
            android:padding="25dip"
            android:scrollHorizontally="true"
            android:singleLine="true"
            android:text="Really Long Scrolling Text Goes Here.... ..... ............ .... ...." />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="170dp"
            android:background="@color/background"
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/outlet_id"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/outlet_id_text"
                android:inputType="textAutoComplete" />

            <ImageView
                android:id="@+id/search_button"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:adjustViewBounds="true"
                android:contentDescription="@string/cd_search_icon"
                android:src="@drawable/search_icon" />
        </LinearLayout>

        <Button
            android:id="@+id/view_stores_on_map"
            android:layout_width="221dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="76dp"
            android:onClick="showStoreList"
            android:text="@string/view_stores_on_map" />

        <Button
            android:id="@+id/view_stores"
            android:layout_width="221dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="38dp"
            android:onClick="showStoreList"
            android:text="View List Of Stores" />
    </LinearLayout>

</RelativeLayout>

It will solve your problem.

Thanks.

Hi do you know how to implement this http://stackoverflow.com/questions/14119334/text-view-is-not-scrolling — user1844638, Jan 02 '13 at 09:11
@user1844638 I just see your message , is your problem solved? — Pratik Sharma, Jan 02 '13 at 09:29

image overlaps text view in android activity

6 Answers6