Search code examples
androidandroid-linearlayoutandroid-view

Android LinearLayout, Can't get image to appear to right of a LinearLayout

I'm trying to get an image of a "play" icon to appear to the right of a list item I have in a LinearLayout.

<?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="wrap_content"
    android:orientation="horizontal"
    android:padding="4dp">

    <ImageView
        android:id="@+id/album_image"
        android:layout_width="@dimen/list_item_height"
        android:layout_height="@dimen/list_item_height" />

    <LinearLayout
            android:id="@+id/text_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="vertical"
            android:paddingLeft="16dp">
        <TextView
            android:id="@+id/artist_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:text="Artist" />

        <TextView
            android:id="@+id/song_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:text="Song Name" />
    </LinearLayout>

    <ImageView
        android:id="@+id/play"
        android:layout_width="@dimen/list_play_icon_height"
        android:layout_height="@dimen/list_play_icon_height"
        android:layout_gravity="center_vertical"
        android:paddingRight="8dp"
        android:src="@drawable/song_play" />
</LinearLayout>

However, for some reason, the image appears off screen (as demonstrated in the picture below).

Android LinearLayout Problem

I'm taking a class on Mobile App Development now, so I'm not 100% familiar with every layout yet. What is causing this?

Solution

  • You have set width of text_container is match_parent. You should set is 0dp and add layout_weigh for this element 

    <?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="wrap_content"
    android:orientation="horizontal"
    android:padding="4dp">

    <ImageView
        android:id="@+id/album_image"
        android:layout_width="@dimen/list_item_height"
        android:layout_height="@dimen/list_item_height" />

    <LinearLayout
            android:id="@+id/text_container"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:orientation="vertical"
            android:paddingLeft="16dp">
        <TextView
            android:id="@+id/artist_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:text="Artist" />

        <TextView
            android:id="@+id/song_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:text="Song Name" />
    </LinearLayout>

    <ImageView
        android:id="@+id/play"
        android:layout_width="@dimen/list_play_icon_height"
        android:layout_height="@dimen/list_play_icon_height"
        android:layout_gravity="center_vertical"
        android:paddingRight="8dp"
        android:src="@drawable/song_play" />
</LinearLayout>