ImageViews and Buttons Android Apps

Question

I'm trying to build an android application and I've created a screen with a table layout and added to the first table row an image view and two large texts, to the second row I've added one button.
When I change the text of the button it automatically changes the size of the image view above to match the size of the button.

Here is the code:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".ChildInfoActivity" >

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:contentDescription="@string/child_info_image_descreption" />

    <TextView
        android:id="@+id/childInfoNameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/name_text_view"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_gravity="center_vertical" />

    <TextView
        android:id="@+id/childInfoHasArrivedTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/has_arrived_text_view"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_gravity="center_vertical" />

</TableRow>

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/more_info_button"
        android:layout_weight="1" />

</TableRow>

why is that?

Answer 1

The reason is because when using TableLayout, each TableRow will have same size for each same column. Since the ImageView and Button are both on column 0, everything that affects Button's width will also affect ImageView's width.

If you permit the Button to span over many columns, add android:layout_span="2" to the Button. Else, use different layout, such as LinearLayout or RelativeLayout.

Answer 2

Because your row item, which holds imageView and textViews, has "wrap_content" value as height. So probably when your texts' heights getting bigger than your imageviews it increases its parent height as well.

You may try to put imageView and textViews inside a relativeLayout and wrap textViews with imageViews height and then put that relativeLayout into row item. It will be nested, but i think still it is better than given exact size because that way it wouldn't be seen so good on some devices...

Answer 3

Your buttons have android:layout_width="wrap_content". If you set android:layout_width="100dp" then your width won't be dynamic.

Answer 4

remove android:layout_gravity="center_vertical" and as u have given added android:layout_weight="1" to button add this line to other components also