Search code examples
androidandroid-layoutlistviewandroid-linearlayout

Elements out of screen in Android Layout

I'm currently working on a listview layout for Android. The following picture is how I want it to look.

...and this is my code.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="@drawable/list_selector"
android:orientation="horizontal">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:ellipsize="end"
        android:text=""
        android:textSize="10sp"
        android:textColor="@color/light_black"
        android:maxLines="2" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginLeft="5dp"
        android:contentDescription="" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal"
    android:gravity="center_horizontal">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_gravity="center"
        android:text=""
        android:textSize="13sp"
        android:textColor="@color/black"/>

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="4dp"
        android:text="@string/versus"
        android:textSize="10sp"
        android:textColor="@color/black"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_gravity="center"
        android:text=""
        android:textSize="13sp"
        android:textColor="@color/black"/>

</LinearLayout>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_gravity="right" />

...and this is the result I get

Do you have any idea why the second team logo is not showing on the screen. I already tried to put it in separate linearlayout but It did not work.

Solution

  • It's becasue your internal <LinearLayout> is using android:layout_width="match_parent". To make it not occupy all the space you need to set its layout_weight too:

    android:layout_weight="1"