Forum Xamarin.Android

How to Overlay an Image On a View.

DylanMcClureDylanMcClure USMember ✭✭
edited July 2015 in Xamarin.Android

I want to overlay an image over a TextView. It looks good in Xamarin, but when I run it on a nexus 4, the image is at the top and the text view is below it. (I want the image to be directly to the left of the TextView, but the TextView (which says "Welcome") should be centered, so I cannot specify, for example, android:layout_left="@id/....).

Note: this is stored in the layout-land, so it must be condensed. Otherwise there is no room. That is why I am running into this problem in the first place.

The Signup.axml (again, in layout-land) is below (sorry it would not let me attach it). Thank you in advance for your help.

layout-land/Signup.axml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:background="#ffec4431"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TextView
            android:text="Welcome"
            android:id="@+id/create_welcome_txt"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#ffffffff"
            android:background="#ffec4431"
            android:gravity="center"
            android:layout_marginTop="40.0dp"
            android:layout_marginBottom="10dp" />
        <ImageView
            android:src="@drawable/loco_logo"
            android:id="@+id/signup_logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:textColor="#ffffffff"
            android:background="#ffec4431"
            android:layout_marginTop="0.0dp"
            android:layout_marginBottom="0.0dp" />
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="80.0dp"
            android:layout_marginLeft="80.0dp"
            android:layout_marginBottom="3.0dp"
            android:layout_marginTop="0.0dp"
            android:layout_below="@id/signup_logo"
            android:id="@+id/relativeLayout1">
            <View
                android:id="@+id/fakeView"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_centerInParent="true" />
            <EditText
                android:hint="Last Name"
                android:id="@+id/signup_last_name"
                android:textColor="#ffaaaaaa"
                android:textColorHint="#88aaaaaa"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/fakeView"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="4.0dp"
                android:layout_below="@id/sign_up_first_name"
                android:lines="1"
                android:background="@drawable/rounded_edittext"
                android:phoneNumber="false" />
            <EditText
                android:hint="First Name"
                android:id="@+id/create_welcome_txt"
                android:textColor="#ffaaaaaa"
                android:textColorHint="#88aaaaaa"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@id/fakeView"
                android:layout_alignParentLeft="true"
                android:layout_marginRight="4.0dp"
                android:layout_below="@id/loco_logo"
                android:lines="1"
                android:background="@drawable/rounded_edittext"
                android:phoneNumber="false"
                android:layout_above="@id/create_welcome_txt" />
        </RelativeLayout>
        <EditText
            android:hint="Email"
            android:id="@+id/signup_email"
            android:textColor="#ffaaaaaa"
            android:textColorHint="#88aaaaaa"
            android:inputType="textEmailAddress"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginRight="80.0dp"
            android:layout_marginLeft="80.0dp"
            android:layout_marginBottom="3.0dp"
            android:layout_marginTop="3.0dp"
            android:layout_below="@id/relativeLayout1"
            android:lines="1"
            android:background="@drawable/rounded_edittext"
            android:phoneNumber="false" />
        <EditText
            android:hint="Password"
            android:id="@+id/signup_password"
            android:textColor="#ffaaaaaa"
            android:textColorHint="#88aaaaaa"
            android:inputType="textPassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginRight="80.0dp"
            android:layout_marginLeft="80.0dp"
            android:layout_marginBottom="3.0dp"
            android:layout_marginTop="3.0dp"
            android:layout_below="@id/signup_email"
            android:lines="1"
            android:background="@drawable/rounded_edittext"
            android:password="true"
            android:phoneNumber="false" />
        <EditText
            android:hint="Password (confirmed)"
            android:id="@+id/signup_password_conf"
            android:textColor="#ffaaaaaa"
            android:textColorHint="#88aaaaaa"
            android:inputType="textPassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginRight="80.0dp"
            android:layout_marginLeft="80.0dp"
            android:layout_marginBottom="3.0dp"
            android:layout_marginTop="3.0dp"
            android:layout_below="@id/signup_password"
            android:lines="1"
            android:background="@drawable/rounded_edittext"
            android:password="true"
            android:phoneNumber="false" />
        <Button
            android:text="Sign Up"
            android:id="@+id/signup_signup_button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#ffec4431"
            android:fontFamily=""
            android:textSize="22sp"
            android:layout_marginRight="80.0dp"
            android:layout_marginLeft="80.0dp"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:layout_below="@id/signup_password_conf"
            style="?android:attr/borderlessButtonStyle" />
        <Button
            android:text="Already a User? Sign In."
            android:id="@+id/signup_signin_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffec4431"
            android:fontFamily=""
            android:textSize="16sp"
            android:layout_marginRight="80.0dp"
            android:layout_marginLeft="80.0dp"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:layout_alignParentBottom="true"
            style="?android:attr/borderlessButtonStyle" />
    </RelativeLayout>

Best Answer

Answers

  • DylanMcClureDylanMcClure USMember ✭✭

    Thank you! This is very close. Is there any way to get the image to float top-left and the TextView to be *centered on the screen (not within its box)?

  • LoriLalondeLoriLalonde CAInsider, University, Developer Group Leader ✭✭✭

    Try using a FrameLayout with it's width set to fill_parent. In playing with it to achieve the look you want, I'm noticing the Welcome text isn't perfectly centered. With a FrameLayout, the items will be added in the order they appear on top of each other. With the proper gravity and layout_gravity settings, you can achieve the desired look:

    <FrameLayout
            android:id="@+id/logoLayout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp">
            <TextView
                android:text="Welcome"
                android:id="@+id/create_welcome_txt"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffffff"
                android:background="#ffec4431"
                android:gravity="center"
                android:layout_gravity="center" />
            <ImageView
                android:src="@drawable/icon"
                android:id="@+id/signup_logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#ffffffff"
                android:layout_gravity="left"
                android:background="#ffec4431" />        
        </FrameLayout>
    
Sign In or Register to comment.