如何将TextView放在ImageView的顶部

Question

Is there an easy way to place a TextView on top of ImageView?

My code:

<ImageView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:src="@drawable/finaloval"
    android:elevation="10dp"
    android:layout_centerHorizontal="true"
    android:id="@+id/greencircleId"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="23dp"
    android:id="@+id/textView"
    android:textSize="40sp"
    android:textColor="@color/colorAccent" />

Example Image

The green circle would be my @drawable/finaloval. And the %100 organic would be the TextView.

Answer 1

Just use a LinearLayout as root and re-sequence your views from top to bottom, meaning in your case should be TextView then ImageView .

Edited based on comment

To do overlap of views, you can use RelativeLayout or FrameLayout as suggested by others.

Try this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text"
    android:layout_marginTop="23dp"
    android:id="@+id/textView"
    android:textSize="40sp"
    android:textColor="@color/colorAccent" />

<ImageView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:src="@drawable/finaloval"
    android:elevation="10dp"
    android:id="@+id/greencircleId"/>

</RelativeLayout>

Think this is the simplest way of doing. Hope this helps

Answer 2

<TextView android:id="@+id/tv_versionstatus"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:drawablePadding="5dp"  
                    android:drawableBottom="@drawable/icon_new"  
                    android:text="text"  
                    android:textColor="#363636"  
                    android:textSize="20sp" />  

drawableBottom is also a choise for you

Answer 3

Please try to set the background for the layout and place your textviews inside that , i have coded it as per the image you shared in it example
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:background="@drawable/finaloval">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="100% natural"
    android:layout_marginTop="23dp"
    android:id="@+id/natural"
    android:textSize="20sp"
    android:textColor="@color/colorAccent" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="organic"
    android:layout_marginTop="23dp"
    android:layout_below="@id/"
    android:id="@+id/natural"
    android:textSize="40sp"
    android:textColor="@color/colorAccent" />

</RelativeLayout>

Answer 4

try this xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/finaloval"
        android:layout_gravity="center"
        android:elevation="10dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text"
        android:textSize="40sp"
        android:layout_gravity="center"
        android:textColor="@color/text_black" />
</FrameLayout>

Answer 5

Try to set the imageview as the background of the textview.

Do you want to put some words upon a image or a sharp drawable?

I'll use a shape drawable to make an example.

Now I have a shape like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval"
   >

    <size
        android:height="100dp"
        android:width="100dp"
        />

    <solid
        android:color="#66ccff"
        />

</shape>

Then set it as the background of a textview in a layout xml.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/circle"
    android:text="Hello World!"
    />

That looks like it. It's a 100dp*100dp one. 100*100

And try to modify the width and height of the textview.

<TextView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/circle"
    android:text="Hello World!"
    />

Now it looks like this. A Lot Larger. 200*200

So the conclusion is:

• Change the size of drawable and use wrap_content in the layout xml.
• Change "layout_width" and "layout_height" in the layout xml.

But if you want to use the smaller one or the lager one, maybe you should add some control codes in the control java file.

(Sorry I'm not in a English-spoken country so maybe my words is not clear enough)

I'm sorry that I didn't obverse the rules before answer (cuz it's my first answer).