Align shape to center of textview on Relative layout

Question

I need to center a circle shape to the center of a Textview in a RelativeLayout, i already tried with android:gravity but is not working this this.

This is the actual layout I'm using:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/swipeLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp">

            <ImageView
                android:id="@+id/rvSincronizado"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:gravity="center_vertical"
                android:layout_marginLeft="5dp"
                android:background="@drawable/circle" />

            <TextView
                android:id="@+id/rvDescripcion"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_toRightOf="@id/rvSincronizado"
                android:text=""
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:textColor="#000000" />

            <TextView
                android:id="@+id/rvetMarca"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/rvDescripcion"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:text="@string/rvetMarca"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                />

            <TextView
                android:id="@+id/rvMarca"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/rvDescripcion"
                android:layout_toRightOf="@+id/rvetMarca"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                />

            <TextView
                android:id="@+id/rvetModelo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/rvDescripcion"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:text="@string/rvetModelo"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:layout_toRightOf="@id/rvMarca"/>

            <TextView
                android:id="@+id/rvModelo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/rvDescripcion"
                android:layout_toRightOf="@+id/rvetModelo"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" />

            <TextView
                android:id="@+id/rvetSerie"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/rvetMarca"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:text="@string/rvetSerie"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                />

            <TextView
                android:id="@+id/rvSerie"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/rvetModelo"
                android:layout_toRightOf="@+id/rvetSerie"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                />
        </RelativeLayout>
</LinearLayout>

This is how currently looks

Thanks for the help!!

Answer 1

You cannot accomplish what you're trying to do using RelativeLayout. It only allows you to specify one rule for vertical alignment (e.g. layout_alignTop or layout_alignBottom) and there's no "alignCenterVertically" or similar.

You could instead try using ConstraintLayout, which does allow you to specify multiple constraints for vertical alignment. You have to convert all of your android:layout_below attributes to app:layout_constraintTop_toBottomOf, and you have to convert all of your android:layout_toRightOf attrs to app:layout_constraintLeft_toRightOf, but the conversion is overall pretty simple. Once you've done that, you can add these two constraints to your circle ImageView:

app:layout_constraintTop_toTopOf="@+id/rvDescripcion"
app:layout_constraintBottom_toBottomOf="@+id/rvDescripcion"

Here's the whole thing:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipeLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp">

        <ImageView
            android:id="@+id/rvSincronizado"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="5dp"
            android:gravity="center_vertical"
            android:background="@drawable/circle"
            app:layout_constraintTop_toTopOf="@+id/rvDescripcion"
            app:layout_constraintBottom_toBottomOf="@+id/rvDescripcion"/>

        <TextView
            android:id="@+id/rvDescripcion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:textColor="#000000"
            android:text="PRENSA"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            app:layout_constraintLeft_toRightOf="@id/rvSincronizado"/>

        <TextView
            android:id="@+id/rvetMarca"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="5dp"
            android:text="@string/rvetMarca"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            app:layout_constraintTop_toBottomOf="@id/rvDescripcion"/>

        <TextView
            android:id="@+id/rvMarca"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="5dp"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            app:layout_constraintTop_toBottomOf="@id/rvDescripcion"
            app:layout_constraintLeft_toRightOf="@+id/rvetMarca"/>

        <TextView
            android:id="@+id/rvetModelo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="5dp"
            android:text="@string/rvetModelo"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            app:layout_constraintTop_toBottomOf="@id/rvDescripcion"
            app:layout_constraintLeft_toRightOf="@id/rvMarca"/>

        <TextView
            android:id="@+id/rvModelo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="5dp"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            app:layout_constraintTop_toBottomOf="@id/rvDescripcion"
            app:layout_constraintLeft_toRightOf="@+id/rvetModelo"/>

        <TextView
            android:id="@+id/rvetSerie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="5dp"
            android:text="@string/rvetSerie"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            app:layout_constraintTop_toBottomOf="@id/rvetMarca"/>

        <TextView
            android:id="@+id/rvSerie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="5dp"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            app:layout_constraintTop_toBottomOf="@id/rvetModelo"
            app:layout_constraintLeft_toRightOf="@+id/rvetSerie"/>

    </android.support.constraint.ConstraintLayout>

</LinearLayout>