Android – Image view to stretch fit table row width

androidandroid-layout

I have this layout XML that I want the ImageView in the second row to stretch to fit the row view if possible and the textview in the first row is stuck on the left of the screen and I would need it in the center. the ImageView is being filled with an image taken from the camera, any help is appreciated.

<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:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:stretchColumns="*" >

    <TableRow android:id="@+id/tableRow1" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="center"
                android:text="Set Your Personal Information Here"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>
    </TableRow>

    <TableRow android:id="@+id/tableRow2" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </TableRow>

    <TableRow android:id="@+id/tableRow3" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <QuickContactBadge
                android:id="@+id/quickContactBadge1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Name"
                    android:textAppearance="?android:attr/textAppearanceMedium" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Gender"
                    android:textAppearance="?android:attr/textAppearanceMedium" />

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Credits"
                    android:textAppearance="?android:attr/textAppearanceMedium" />
            </LinearLayout>
        </LinearLayout>
    </TableRow>
</TableLayout>

Best Answer

As @Brosa said in comment, use android:scaleType="fitXY" attribute.

Althrough you have find your solution, I am writing this answer to write about a brief description about different option of android:scaleType for future help.

There are several options in this attreibute. They are

  1. matrix
  2. fitXY
  3. fitStart
  4. fitCenter
  5. fitEnd
  6. center
  7. centerCrop
  8. centerInside

Here is a small description for those from the doc

1. matrix
Scale using the image matrix when drawing.

2. fitXY
Scale the image in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src.

3. fitStart
Scale the image by computing a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. START aligns the result to the left and top edges of dst.

4. fitCenter
Scale the image by computing a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The result is centered inside dst.

5. fitEnd
Scale the image by computing a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. END aligns the result to the right and bottom edges of dst.

6. center
Center the image in the view, but perform no scaling.

7. centerCrop
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

8. centerInside
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

Related Topic