How to put an image below textview in layout?

Question

How can I put the image view below two of the text views, tv_pw and tv_un. So that in the layout the two text views are on top of the image, while the image serves as a background for that two text views. How could I do that?

Here is my xml file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="510dip"
android:layout_marginTop="10dip"
android:background="#DDDDDD">"
 <EditText
     android:id="@+id/et_pw"
     android:layout_width="150dip"
     android:layout_height="wrap_content"
     android:layout_alignLeft="@+id/et_un"
     android:layout_below="@+id/et_un"
     android:background="@android:drawable/editbox_background"
     android:ems="10"
     android:inputType="textPassword" />

 <TextView
     android:id="@+id/tv_pw"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignBaseline="@+id/et_pw"
     android:layout_alignBottom="@+id/et_pw"
     android:layout_marginRight="20dp"
     android:layout_toLeftOf="@+id/et_pw"
     android:text="Password:"
     android:textColor="#444444"
     android:textSize="10pt" />

 <Button
     android:id="@+id/btn_login"
     android:layout_width="100dip"
     android:layout_height="wrap_content"
     android:layout_below="@+id/et_pw"
     android:layout_centerHorizontal="true"
     android:text="Login" />

 <TextView
     android:id="@+id/tv_un"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentTop="true"
     android:layout_alignRight="@+id/tv_pw"
     android:layout_marginTop="98dp"
     android:text="User Name:"
     android:textColor="#444444"
     android:textSize="10pt" />

 <EditText
     android:id="@+id/et_un"
     android:layout_width="150dip"
     android:layout_height="wrap_content"
     android:layout_alignTop="@+id/tv_un"
     android:layout_centerHorizontal="true"
     android:background="@android:drawable/editbox_background"
     android:ems="10"
     android:inputType="text" />

 <TextView
     android:id="@+id/textView1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_below="@+id/btn_login"
     android:layout_centerHorizontal="true"
     android:text="" />

 <TextView
     android:id="@+id/textView2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentTop="true"
     android:layout_centerHorizontal="true"
     android:layout_marginTop="32dp"
     android:text="text"
     android:textAppearance="?android:attr/textAppearanceLarge" />

 <ImageView
     android:id="@+id/imageView1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentTop="true"
     android:layout_centerHorizontal="true"
     android:layout_marginTop="14dp"
     android:src="@drawable/bkground" />

Answer 1

将两个TextView以垂直方向包装在线性布局中，并为线性布局分配背景。

Answer 2

There's a lot more in your XML but, focusing on what you are asking, you can use the margin attribute to overlap the textviews.

Try something like this

<RelativeLayout 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" >

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/myImage">
</ImageView>
<LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/image"
    android:layout_marginTop="-50dp"
    android:orientation="vertical">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world2" />
</LinearLayout>

</RelativeLayout>

In this example I wrapped the two textviews inside a linear-layout (vertical) and set the linear-layout below the imageview and a margin of -50dp so it goes up and overlap.

HIH

Answer 3

另一种方法是在textview中使用drawableBottom =“ @ drawable / ic_launcher”

Answer 4

If you don't care about having control on how the image scales, you can set the background of a LinearLayout that's wrapped around the TextViews.

<LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/your_background_image_here"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_view_1" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_view_2" />
</LinearLayout>

Answer 5

Try this way,hope this will help you to solve your problem.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="510dp"
    android:layout_marginTop="10dp"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#DDDDDD">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="98dp">
        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="@drawable/bkground">
            <TextView
                android:id="@+id/tv_un"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="User Name:"
                android:textColor="#444444"
                android:textSize="10pt" />

            <TextView
                android:id="@+id/tv_pw"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:text="Password:"
                android:textColor="#444444"
                android:textSize="10pt" />
        </LinearLayout>


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

            <EditText
                android:id="@+id/et_un"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:background="@android:drawable/editbox_background"
                android:ems="10"
                android:inputType="text" />
            <EditText
                android:id="@+id/et_pw"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:background="@android:drawable/editbox_background"
                android:ems="10"
                android:inputType="textPassword" />
        </LinearLayout>

    </LinearLayout>
    <Button
        android:id="@+id/btn_login"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Login" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Answer 6

在两个文本视图和繁荣上使用android:weight

Answer 7

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