将TableLayout中单元格的内容向右对齐

Question

I'm relatively new to android development. I have an activity with a TableLayout. The activity is built like in the image below.

I want the two smaller buttons to be on the right, so that both EditTexts can use the full remaining width. I also tried to set "android:gravity" like some posts suggested, but without any effects. How do I get that done?

Additionally, I have 2 tableRows for the both lines with the info, text & button. The rest of the activity is out of any tableRow to get them full-width. Is that common-use or bad programming? If so, how is the better way?

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="@string/strInputInfo"
        android:id="@+id/lblHexToRGB"
        android:layout_column="1" />


    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtHexInput"
        android:layout_column="1"
        android:textCursorDrawable="@null"
        android:hint="@string/strHexInputHint" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/strConvertButtonText"
        android:id="@+id/cmdConvertCode"
        android:layout_column="1"/>

<TableRow
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="@string/strRGBInfo"
            android:id="@+id/lblRGBInfo"
            android:layout_column="0" />

    <EditText
            android:layout_width="350px"
            android:layout_height="wrap_content"
            android:id="@+id/txtOutputRGB"
            android:textCursorDrawable="@null"
            android:layout_column="1"
        android:textAlignment="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/strButtonCopyText"
        android:id="@+id/cmdCopyRGBToClipboard"
        android:layout_column="2"
        android:layout_gravity="right"/>
</TableRow>


<TableRow
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="@string/strHexInfo"
        android:id="@+id/lblHexInfo"
        android:layout_column="0"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txtOutputHex"
        android:layout_column="1"
        android:textAlignment="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/strButtonCopyText"
        android:id="@+id/cmdCopyHexToClipboard"
        android:layout_column="2"/>
</TableRow>


<ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/imageView"
            android:layout_column="1"
            android:maxHeight="100dp"
            android:minHeight="100dp" />
</TableLayout>

Answer 1

Try setting the tablerow to fill_parent and then you can use android:layout_gravity="right"

<TableRow
    android:layout_width="fill_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="@string/strHexInfo"
        android:id="@+id/lblHexInfo"
        android:layout_column="0"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txtOutputHex"
        android:layout_column="1"
        android:textAlignment="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/strButtonCopyText"
        android:id="@+id/cmdCopyHexToClipboard"
        android:layout_gravity="right"
        android:layout_column="2"/>
</TableRow>

Answer 2

A TableRow layout is exactly like a LinearLayout (in fact, it's a subclass of LinearLayout), so you can use the layout_weight property from LinearLayout to allow a view in a row to expand to fill space in relation to the other views in its row.

For example, your EditText could be:

<EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/txtOutputRGB"
        android:textCursorDrawable="@null"
        android:layout_column="1"
        android:textAlignment="center"/>

Note that the width is 0 and the weight is 1. When the other views in the row have a weight of 0 (the default) This tells TableRow to allocate as much space as it can to the EditText while the other views get the minimal amount of space required to render.