Simple Layout Issue - Aligning menu button to far right, center

Go To StackoverFlow.com

0

Having a lot of trouble getting an icon to huddle into the position I want it in. I looked at 3 different Stack Overflow questions and tried placing the image in a RelativeLayout, LinearLayout, and a TableRow. All with various XML options. Never managed to get the icon to go right and center itself between top and bottom of the allotted space. In the pic below, red is where it is now, blue is where I want it. Here's a pic (of how it looks now, which is incorrect) and the code (imageView1 is what I want to align):

enter image description here

And the code:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:id="@+id/loginScrollView">
    <TableLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:orientation="vertical"
        android:padding="5dp">

        <ImageView android:id="@+id/logoImageView"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:src="@drawable/logo" android:contentDescription="@string/app_name" />

        <TextView android:id="@+id/demoTextView"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="@string/logDetails" android:gravity="center_horizontal|center" />

        <EditText android:id="@+id/emailEditText"
            android:layout_width="match_parent" android:layout_height="wrap_content"
            android:hint="@string/loginHint" android:imeOptions="actionNext"
            android:inputType="textEmailAddress" android:padding="20dp" />

        <EditText android:id="@+id/passEditText"
            android:layout_width="match_parent" android:layout_height="wrap_content"
            android:hint="@string/password" android:imeOptions="actionDone"
            android:inputType="textPassword" android:padding="20dp" />

        <TableRow android:id="@+id/rememberTableRow"
            android:layout_width="wrap_content" android:layout_height="wrap_content">
            <TextView android:id="@+id/rememberTextView"
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="@string/rememberDetails" android:layout_gravity="center" />

            <CheckBox android:id="@+id/rememberCheckBox"
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:padding="20dp" />

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="showPopup"
                android:src="@drawable/abs__ic_menu_moreoverflow_holo_dark" android:layout_weight="1" android:layout_gravity="center|right"/>

        </TableRow>

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

            <Button android:id="@+id/registerButton" android:layout_width="0dip"
                android:layout_height="wrap_content" android:layout_gravity="bottom"
                android:layout_weight="1" android:text="@string/register" />

            <Button android:id="@+id/loginButton" android:layout_width="0dip"
                android:layout_height="wrap_content" android:layout_gravity="bottom"
                android:layout_weight="1" android:text="@string/login" />
        </TableRow>

    </TableLayout>
</ScrollView>

Here are the SO questions I've already looked at and tried to use as solutions: Aligning ImageView to right of the layout android Aligning with center in android with hierarchical Layouts Android ImageButton not displaying on right side of the screen

2012-04-05 20:58
by Davek804
Where is the imageview that you need help with? Is it in the picture - Jared Burrows 2012-04-05 21:05
Yep it's the one just to the right of the checkBox: it looks like a standard menu icon (3 vertical boxes) - Davek804 2012-04-05 21:08
Ahhh I just got home and some one answers it ha - Jared Burrows 2012-04-06 02:06
Well I gave ya a helpful comment anyways - Davek804 2012-04-06 02:19
Well thanks for the compliment - Jared Burrows 2012-04-06 02:50


1

There are multiple options, as far as I can tell. I'll give you two:

First option is to set a scaletype on the ImageView containing the overflow icon. You make it take up all remaining available space and set the scaletype to fitEnd. This will position the icon all the way at the right.

<ImageView android:id="@+id/imageView1"
    android:layout_width="0dp" android:layout_height="wrap_content"
    android:layout_gravity="center_vertical" android:scaleType="fitEnd"
    android:layout_weight="1" android:onClick="showPopup"
    android:src="@drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />

You can accomplish the same effect by setting a weight of 1 on the CheckBox, which will make it 'push' the ImageView with the overflow icon all the way to the right (thanks to a TableRow behaving similarly to a LinearLayout). You can then simply make the ImageView wrap its content. You may want to double check if there are no weird side effects to the clickable region in this case though.

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

    <TextView android:id="@+id/rememberTextView"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_gravity="center" android:text="@string/rememberDetails" />

    <CheckBox android:id="@+id/rememberCheckBox"
        android:layout_width="0dp" android:layout_height="wrap_content"
        android:layout_weight="1" android:padding="20dp" />

    <ImageView android:id="@+id/imageView1"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_gravity="center_vertical" android:onClick="showPopup"
        android:src="@drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />

</TableRow>
2012-04-05 21:49
by MH.
android:scaleTyle="fitEnd" worked perfectly. I actually removed the TableRow that I had tried using to put the menu image inside of as well. I hadn't seen scaleType before, so thanks very much - Davek804 2012-04-05 22:12
Ads