Android ImageView to expand the whole width of screen

Question

My xml is as follows

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow android:layout_weight="1" android:gravity="center">
        <ImageView android:layout_height="200dp"
            android:layout_width = "wrap_content"
            android:src="@drawable/saltnpepper"                
            android:scaleType="centerInside" />
    </TableRow>

     <TableRow android:layout_weight="3" >
    <ListView android:id="@+id/list1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
    >

    </ListView>
</TableRow>
<TableRow android:layout_weight="1" android:gravity="center">
    <ImageView android:layout_height="100dp"
            android:layout_width = "wrap_content"
            android:src="@drawable/halal"
            android:scaleType="centerInside"/>
</TableRow>
</TableLayout>

My screen is currently like this:

I want the Saltnpepper image to expand across the width of screen, I have tried setting ImageView's layout_height to 0dp but the image disappears then. also I have tried its layout_width as match_parent, but it didn't work

Also, I want to add some margin to the ListView but the whole table_layout moves if I add marginRight or marginLeft to the ListView element.

android:layout_width = "match_parent" does that work? and for the list view, try with paddingLeft and paddingRight — X3Btel, Nov 09 '16 at 22:22
Thanks Adeel it did work! only now the image is stretched may be i should put it in the background — Samra, Nov 10 '16 at 21:53

score 1 · Answer 1 · answered Nov 10 '16 at 04:27

On your ImageView set the layout-width to match_parent. Also, set the background color of the ImageView to something so you can see how much space it's actually taking up. From there, you want to use scaleType to shape (crop/fit/etc) the image to the ImageView's space.

score 1 · Answer 2 · answered Nov 10 '16 at 05:51

Use below code.... and Try it...

android:layout_width = "match_parent"
 android:paddingLeft="10dp"
 android:paddingRight="10dp"
 android:paddingTop="10dp"
 android:adjustViewBounds="true"

Finale code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TableRow android:layout_weight="1" android:gravity="center">
            <ImageView android:layout_height="200dp" 
                android:layout_width = "match_parent"
                android:src="@drawable/saltnpepper"
                android:paddingLeft="10dp"
                 android:paddingRight="10dp"
                  android:paddingTop="10dp"
              android:adjustViewBounds="true"
                android:scaleType="centerInside" />
        </TableRow>

         <TableRow android:layout_weight="3" >
        <ListView android:id="@+id/list1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
        >

        </ListView>
    </TableRow>
    <TableRow android:layout_weight="1" android:gravity="center">
        <ImageView android:layout_height="100dp"
                android:layout_width = "wrap_content"
                android:src="@drawable/halal"
                android:scaleType="centerInside"/>
    </TableRow>
    </TableLayout>

score 0 · Answer 3 · answered Nov 10 '16 at 04:39

0

Set image views width to match_parent and height to wrap_content, to maintain the aspect ratio you can use adjustViewBounds set to TRUE.

answered Nov 10 '16 at 04:39

Mohit

93
10

score -1 · Accepted Answer · answered Nov 10 '16 at 22:19

So i tried all of the solutions but one thing worked and the other thing got twisted. I tried Adeel Turk's solution fitXY, which immediately got my image fit to the screen but the image was too stretchy, so now i have put my image as background and it gives me good result.

Here is my xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"       
android:background="@drawable/saltnpepper">
<TableRow android:layout_weight="1" android:gravity="center">
   <TextView android:layout_height="200dp"/>
</TableRow>

 <TableRow android:layout_weight="4" >
<ListView android:id="@+id/list1"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
>

</ListView>
</TableRow>
<TableRow android:layout_weight="1" android:gravity="center">
<ImageView android:layout_height="100dp"
        android:layout_width = "wrap_content"
        android:src="@drawable/halal"
        android:scaleType="centerInside"/>
</TableRow>
</TableLayout></LinearLayout>

Android ImageView to expand the whole width of screen

4 Answers4