Android LinearLayouts conflicting with each other

Question

I have two LinearLayout

One contains a EditText with a patch9 image as a speech bubble and another with a TextView and ImageView

When I try typing into the EditText is begins to expand towards the right hand side then starts to reduce the width of the second LinearLayout (crushing the image)

XML is

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

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="left"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/summaryMessage"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/greeting_bubble_white"
            android:gravity="center" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="right"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/summaryImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/picture_frame" />

        <TextView
            android:id="@+id/summaryText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingLeft="10dp" />
    </LinearLayout>
</LinearLayout>

</LinearLayout>

Looks like this

enter image description here

Any ideas?

score 1 · Accepted Answer · edited May 23 '17 at 12:01

its expanding since you have specified that layout_width of your LinearLayout should be "wrap_content", you should specify a fixed dimension with dps so it doesn't expand beyond. Alternative use the weight tag

try out this modification:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/white"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_weight="0.7">

     <EditText
        android:id="@+id/summaryMessage"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/greeting_bubble_white"
        android:gravity="center" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.3"
    android:gravity="right"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/summaryImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/picture_frame" />

    <TextView
        android:id="@+id/summaryText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingLeft="10dp" />
</LinearLayout>

however I would suggest more that you use this one:

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

         <EditText
            android:id="@+id/summaryMessage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.7"
            android:background="@drawable/greeting_bubble_white"
            android:gravity="center" />

        <TextView
            android:id="@+id/summaryText"
            android:layout_weight="0.3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingLeft="10dp" />
</LinearLayout>

and that you use compound drawables on your summaryText here is a link that should help you: Using Compund Drawables

I changed the root LinearLayout to be wrap_content and still the same result. I have already tried weight tag as shown in the first post. What is dps? — user1177292, May 16 '12 at 23:25
I tried your suggestion but the edittext is above the image/textview in a vertical orientation. I need both the edittext and image/textview on the same horizontal layout with the edittext on the left and image/textview on the right — user1177292, May 16 '12 at 23:31
try reading this article about dps: http://developer.android.com/guide/practices/screens_support.html#density-independence — Raykud, May 17 '12 at 15:42

score 0 · Answer 2 · answered May 16 '12 at 22:57

0

Use a relative layout, the layout editor is in fact pretty good so use it to position your views

answered May 16 '12 at 22:57

Joelmob

1,076
2
10
22

I find LinearLayout easy to understand, so would prefer to stick with LinearLayout – user1177292 May 16 '12 at 23:22

Android LinearLayouts conflicting with each other

2 Answers2