CODEWITHSUNDEEP
androidandroid-linearlayoutandroid-view
Darin Beaudreau
Darin Beaudreau

Reputation: 391

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?

Upvotes: 1

Views: 494

Answers (4)

HenriqueMS
HenriqueMS

Reputation: 3974

I changed the icon and its constant size so I could preview the Layout in my android studio. If it were me, I would change the outer layout to RelativeLayout but it can also be done as you did.

You will notice that android:layout_width is not the final size of the elements that use weights , the weights attribute will reconfigure the Views. Spoiler: it is an expensive operation if there are a lot of nested layouts, therefore I would prefer a RelativeLayout. But this one is simple enough.

You have to use layout_weight in the children of the parent layout to distribute the available space.

Here it is:

enter image description here

<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="55dp"
        android:layout_height="55dp"
        android:src="@android:drawable/star_on"
        />

    <LinearLayout
        android:id="@+id/text_container"
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="vertical"
        android:paddingLeft="16dp"
        android:layout_weight="8">
        <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="55dp"
        android:layout_height="55dp"
        android:layout_gravity="center_vertical"
        android:paddingRight="8dp"
        android:src="@android:drawable/ic_media_play"
        android:layout_weight="1"/>
</LinearLayout>

Hope this helps! =)

Upvotes: 0

rapid3642
rapid3642

Reputation: 913

I am pretty new to Android Development too but let me know if this fixes it:

I believe you are running into this issue cause your second defined linear layout has a width and height of match_parent, when you should use wrap_content in this case. Because your match_parent is making it to where its the same size as your previous layout which is the size of the device screen and shoving the image outside the device screen parameters.

so for your code should be:

<?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="wrap_content"
            android:layout_height="wrap_content"
            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>

Upvotes: 0

Liem Vo
Liem Vo

Reputation: 5319

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>

Upvotes: 3

joebro
joebro

Reputation: 589

Probably because the text_container LinearLayout has a width of match_parent. Try changing it to wrap_conent

Upvotes: 0

Related Questions