ImageView中的TextView

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?

Answer 1

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..

Answer 2

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>

Answer 3

重叠两个视图的最佳方法是使用FrameLayout作为父级，而不是使用FrameLayout子级上的layout_gravity和margin属性来设置它们的位置