CODEWITHSUNDEEP
android
user5892486
user5892486

Reputation:

TextView inside an ImageView

I have this picture which is the template for an italian license plate: italian 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?

Upvotes: 3

Views: 4195

Answers (3)

pz64_
pz64_

Reputation: 2252

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. enter image description here

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

Upvotes: 1

Hemant Menon
Hemant Menon

Reputation: 198

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>

Upvotes: 1

dade.sliep
dade.sliep

Reputation: 187

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

Upvotes: 0

Related Questions