Prevent a view from getting outside of the screen

Question

I'm working with the Google Maps API v2, and I overrided getInfoContents() from InfoWindowAdapter for having a customized InfoWindow. Inside getInfoContents()I inflate an xml containing an ImageView, and three TextViews.

My problem comes when the text that is set inside the snippet is larger than the view, then the count TV it's set outside the view. This is illustrated above with some screenshots.

enter image description here

Here my xml layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView 
        android:id="@+id/categoryIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignBottom="@+id/count"
        android:src="@drawable/ic_launcher"/>

    <LinearLayout
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_toRightOf="@+id/categoryIcon"
        android:layout_centerVertical="true"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Title"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/snippet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Snippet" />
    </LinearLayout>

    <TextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#111177"
        android:text="0"
        android:textSize="20sp"
        android:padding="10dp"
        android:textColor="#FFF"
        android:layout_toRightOf="@+id/text"
        android:singleLine="true" />

</RelativeLayout>

How can I change this layout for getting the count TextView inside of the screen, and the snippet in multiline?

I want to always show the count TextView.

UPDATE: Finally with the answer of Simon Marquis I realized a way to accomplish this. Here the new code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView 
        android:id="@+id/categoryIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignBottom="@+id/text"
        android:src="@drawable/ic_launcher"/>

    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:layout_toRightOf="@+id/categoryIcon">

        <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Title"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/snippet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Snippeta" />
    </LinearLayout>

    <TextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#111177"
        android:text="0"
        android:textSize="20sp"
        android:padding="10dp"
        android:textColor="#FFF"
        android:singleLine="true" />

    </LinearLayout>

</RelativeLayout>

score 2 · Accepted Answer · answered Aug 29 '14 at 15:22

You should add this to the LinearLayout:

android:layout_width="0dp"
android:layout_weight="1"

The new layout file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView 
        android:id="@+id/categoryIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignBottom="@+id/count"
        android:src="@drawable/ic_launcher"/>

    <LinearLayout
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_toRightOf="@+id/categoryIcon"
        android:layout_centerVertical="true"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Title"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/snippet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Snippet" />
    </LinearLayout>

    <TextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#111177"
        android:text="0"
        android:textSize="20sp"
        android:padding="10dp"
        android:textColor="#FFF"
        android:layout_toRightOf="@+id/text"
        android:singleLine="true" />

</RelativeLayout>

The use of weight inside a RelativeLayout doesn't affecto to the view, so what I have done is create another LinearLayout that contains the other Linear and the count. I update my answer with the solution. — Gabriel Esteban, Aug 29 '14 at 17:01
Worked for me! Thanks. @Simon please, do you think you could help me with this question? http://stackoverflow.com/questions/25598696/recommended-way-order-to-read-data-from-a-webservice-parse-that-data-and-inse — Axel, Sep 01 '14 at 23:10

score 1 · Answer 2 · answered Aug 29 '14 at 15:34

One solution if you want that the count TextView always appears at right is the following:

Put the count Text View before the LinearLayout and add android:layout_alignParentRight="true"

And add android:layout_toLeftOf="@id/count" in the Linear Layout

<TextView
    android:id="@+id/count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="#00F"
    android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@id/count"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/snippet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

This will work always that the text is larger than the view, but when it's smaller, the view will have it's maximum size, because the view is alignedParentRight and android uses the top left corner for setting the bounds of the views. So it will have the appearence that width = MATCH_PARENT — Gabriel Esteban, Aug 29 '14 at 16:53

Prevent a view from getting outside of the screen

2 Answers2