TextView inside an ImageView

Question

I have this picture which is the template for an italian license plate:

My app manages vehicles. I've thought to display all user's vehicles in a RecyclerView with CardView, where each CardView contains an ImageView (which displays the previous image) and a TextView, which contains the license plate. But how could I do to put the TextView in the correct position compared to the image displayed in the ImageView? And, the worst thing I think, how could I do to place the TextView correctly for all screens resolutions?

https://stackoverflow.com/questions/6931900/programmatically-set-left-drawable-in-a-textview — OneCricketeer, Jun 04 '17 at 14:42
You can also do it in a harder way. Add imageview and textview in a Suitable layout and give `stroke` background to the layout. — pz64_, Jun 04 '17 at 14:50
@cricket_007 I don't understand: if I need to write **inside** this image, how could I do this using `drawableLeft` attribute? — , Jun 04 '17 at 14:56
You seem to have two images. One on the left, and one stroke around the box — OneCricketeer, Jun 04 '17 at 15:00
@cricket_007 mmh, I've understand, I'll try to create a custom `TextView` — , Jun 04 '17 at 15:06

pz64_ · Accepted Answer · 2019-03-22T11:09:24.827

I've tried a sample code ..

res/layout/numberplate.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="30dp">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background"
    android:orientation="horizontal">

<LinearLayout
    android:layout_margin="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="46dp"
        android:layout_height="46dp"
        android:background="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_marginLeft="20dp"
        android:gravity="center"
        android:text="Number"
        android:textSize="25dp" />
    </LinearLayout>
</LinearLayout>
</LinearLayout>

res/drawable/background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#d0d0d0" />
<corners android:radius="5dp" />
<stroke android:color="#202020" android:width="3dp"/>
</shape>

And how it looks like.

You can change the values to match the way you want.. Hope this helps..

thank you very much, but why two `LinearLayout`s? It's simple with just the second, isn't it? — , Jun 04 '17 at 17:21

score 1 · Answer 2 · answered Jun 04 '17 at 15:55

You could place both the views in a RelativeLayout and superimpose each other. For example,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:padding="30dp">
     <ImageView
         android:layout_width="46dp"
         android:layout_height="46dp"
         android:layout_gravity="center"
         android:background="@drawable/your_numberplate_image" />
     <TextView
         android:layout_width="46dp"
         android:layout_height="46dp"
         android:layout_marginLeft="10dp"
         android:gravity="center"
         android:text="Number"
         android:textSize="25dp" />
</RelativeLayout>

score 0 · Answer 3 · answered Jun 04 '17 at 15:50

0

The best way to overlap two view is using a FrameLayout as parent than use layout_gravity and margin attributes on FrameLayout children to set their position

answered Jun 04 '17 at 15:50

dade.sliep

137
1
5

TextView inside an ImageView

3 Answers3

Linked