CODEWITHSUNDEEP
androidandroid-layout
Sangar82
Sangar82

Reputation: 5230

Layout chat bubbles issues: TextView fills all the screen

I'm working on bubble chat. I use a adapter with two layouts, one for incoming messages and other for my messages. The adapter is working well. My problems are with the incoming layout, don't get show well the incoming time text. When the message text grows, fills the entire width of the screen, and it hidden the text of the message time.

First question: How can achieve this?

This is the incoming messages layout:

<?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:orientation="horizontal"
    android:animateLayoutChanges="true"
    android:gravity="left">

    <TextView
        android:id="@+id/message_text_server"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5sp"
        android:background="@drawable/speech_bubble_orange"
        android:shadowColor="@color/textShadow"
        android:shadowDx="1"
        android:shadowDy="1"
        android:text="Medium Text"
        android:textColor="@color/textColor"
        android:textSize="20sp" />

    <RelativeLayout
        android:id="@+id/message_server"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="left"
        android:layout_gravity="left" >
        
        <TextView
            android:id="@+id/sended_server"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="9dp"
            android:layout_marginTop="10sp"
            android:text="Enviado"
            android:textSize="10sp"
            android:visibility="gone" />        

        <TextView
            android:id="@+id/time_server"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="18dp"
            android:layout_marginTop="23dp"
            android:text="23:48"
            android:textSize="10sp" />
    </RelativeLayout>

</LinearLayout>

Second Question The layout of my messages is the same but changing the elements's position and are working well. Why?

This is an image of the problem:

Image

Edit

I need that the oranges bubbles to have the same behaviour that the green´s when i have only a word in the bubble and the same behaviour when the bubble is full of words (see green bubbles)

Image

Upvotes: 4

Views: 2351

Answers (4)

Blackbelt
Blackbelt

Reputation: 157487

add

 android:layout_weight="1"

to the TextView (the one with the buble). This way it should take all the space less the one needed to the RelativeLayout.

Edit:

the height of your root layout should be wrap_content, and you need also to assign a position to the children of the inner RelativeLayout:

android:layout_below="@id/sended_server" and android:layout_alignWithParentIfMissing="true" to the TextView with id time_server, should do the trick

Upvotes: 1

Igor Tyulkanov
Igor Tyulkanov

Reputation: 5549

Use RlativeLayout for this:

<?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"
    android:animateLayoutChanges="true" >

    <RelativeLayout
        android:id="@+id/message_server"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_gravity="left"
        android:gravity="left" >

        <TextView
            android:id="@+id/sended_server"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="9dp"
            android:layout_marginTop="10sp"
            android:text="Enviado"
            android:textSize="10sp"
            android:visibility="gone" />

        <TextView
            android:id="@+id/time_server"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="18dp"
            android:layout_marginTop="23dp"
            android:text="23:48"
            android:textSize="10sp"
            android:background="@drawable/speech_bubble_orange"
            android:shadowColor="@color/textShadow"
            android:textColor="@color/textColor />
    </RelativeLayout>

    <TextView
        android:id="@+id/message_text_server"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_margin="5sp"
        android:layout_toLeftOf="@id/message_server"
        android:shadowDx="1"
        android:shadowDy="1"
        android:text="Medium Text"
        android:textSize="20sp" />

</RelativeLayout>

Upvotes: 0

Marcin Orlowski
Marcin Orlowski

Reputation: 75645

Set layout_weight attribute (set android:layout_weight="1" on your message_text_server TextView object in both bubble layouts) to tell parent container how you want it to distribute available space to its children.

In result (aside from styles I stripped) you would get exactly what you want:

enter image description here

See the docs or check top answers in this question to find out more about layout_weight and use of it.

EDIT

You must do something wrong as setting parent container and server text and date textview fields width to match_parent and server text layout_width should be really sufficient to get that for both bubles.

EDIT 2

You (ab)using margin and padding in your layout.

I need that the oranges bubbles to have the same behaviour that the green´s when i have only a word in the bubble and the same behaviour when the bubble is full of words (see green bubbles)

You just need to play with layout_width and layout_gravity of the server_text TextView. Here the proper layout shot:

enter image description here

and then the layout behind it. No padding/margin needed. Just gravity and play width height and width plus weight. Just style it as you want later and you're home:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:animateLayoutChanges="true"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left">
        <TextView
            android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5sp"
            android:layout_weight="1"
            android:text="Foo bar foo foo foo"
            android:textSize="20sp" />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="Enviado"
                android:textSize="10sp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="23:48"
                android:textSize="10sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="Enviado"
                android:textSize="10sp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="23:48"
                android:textSize="10sp" />
        </LinearLayout>
        <TextView
            android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5sp"
            android:layout_weight="1"
            android:text="Foo bar foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left">
        <TextView
            android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5sp"
            android:layout_weight="1"
            android:text="Foo bar foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo"
            android:textSize="20sp" />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="Enviado"
                android:textSize="10sp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="23:48"
                android:textSize="10sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="Enviado"
                android:textSize="10sp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="23:48"
                android:textSize="10sp" />
        </LinearLayout>
        <TextView
            android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5sp"
            android:layout_weight="1"
            android:text="Foo bar foo foo"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

Basically no padding/margin needed.

Upvotes: 4

Akash Moradiya
Akash Moradiya

Reputation: 3322

For First try this,

<?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:animateLayoutChanges="true"
    android:gravity="left"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/message_text_server"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5sp"
        android:layout_weight="1"
        android:background="@android:color/holo_orange_light"
        android:shadowColor="@android:color/darker_gray"
        android:shadowDx="1"
        android:shadowDy="1"
        android:text="Medium Text"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

    <RelativeLayout
        android:id="@+id/message_server"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:gravity="left" >

        <TextView
            android:id="@+id/sended_server"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="9dp"
            android:layout_marginTop="10sp"
            android:text="Enviado"
            android:textSize="10sp"
            android:visibility="visible" />

        <TextView
            android:id="@+id/time_server"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="18dp"
            android:layout_marginTop="23dp"
            android:text="23:48"
            android:textSize="10sp" />
    </RelativeLayout>

</LinearLayout>

For second,

if you change the attribute position as if you put time textview first and message textview second then time textview get space as it needed then remaining space given to the second textview so for this reason its working fine when you changing attribute positions

Upvotes: -1

Related Questions