Aligning Text and Icons in a TextView Android

Question

i am working on a ui design assignment in android studio. i have been able to get this

here is my code

    <?xml version="1.0" encoding="utf-8"?>
<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" tools:context=".MainActivity">

    <ImageView
        android:id="@+id/topImage"
        android:src="@drawable/shebaartist"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop" />

    <TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
        android:drawableLeft="@drawable/about"
        android:layout_below="@+id/topImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawablePadding="5dp"
        android:padding="10dp"
        android:textSize="16dp"
        android:fontFamily="sans-serif-black"
        android:background="#F0E68C"
        android:id="@+id/descText" />

    <TextView android:text="150 Alimi Rd, Alore, Ilorin, Kwara State"
        android:drawableLeft="@drawable/marker"
        android:layout_below="@+id/descText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:singleLine="true"
        android:drawablePadding="5dp"
        android:padding="10dp"
        android:textSize="16dp"
        android:fontFamily="sans-serif-light"
        android:id="@+id/addrText"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView android:text="shebaeventss@gmail.com"
        android:drawableLeft="@drawable/message"
        android:layout_below="@+id/addrText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:singleLine="true"
        android:drawablePadding="5dp"
        android:padding="10dp"
        android:background="#F0E68C"
        android:textSize="16dp"
        android:fontFamily="sans-serif-black"
        android:id="@+id/emailText"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView android:text="07055393673"
        android:drawableLeft="@drawable/phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:singleLine="true"
        android:drawablePadding="5dp"
        android:padding="10dp"
        android:textSize="16dp"
        android:fontFamily="sans-serif-light"
        android:id="@+id/mobilenoText"
        android:layout_below="@+id/emailText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

I want to align the icons and text in the text views on the same line and with the same size. my question is that how do i do this? please point out my errors and help me with fixing this.

Answer 1

Please add gravity property to your TextView with center alignment and icon size change with 24dp .

<TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
        android:drawableLeft="@drawable/about"
        android:layout_below="@+id/topImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawablePadding="5dp"
        android:padding="10dp"
        android:textSize="16dp"
        android:gravity="center"
        android:fontFamily="sans-serif-black"
        android:background="#F0E68C"
        android:id="@+id/descText" />

Answer 2

If this is what you want, then you just need change gravity from android:gravity="center" to android:gravity="center_vertical"

Answer 3

It seems you want to use a compound drawable, see this answer:

How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView