CODEWITHSUNDEEP
androidandroid-layoutalignmentandroid-relativelayout
Javier Toscano
Javier Toscano

Reputation: 38

Align shape to center of textview on Relative layout

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

Upvotes: 0

Views: 114

Answers (2)

Alireza Sharifi
Alireza Sharifi

Reputation: 1162

you can put them in linearLayout and adjust it with bit of a margin:

<?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">


        <LinearLayout
            android:id="@+id/lnDescripcion"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/rvSincronizado"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:layout_marginTop="2dp"
                android:layout_toEndOf="@+id/rvDescripcion"
                android:layout_toRightOf="@+id/rvDescripcion"
                android:background="@android:drawable/presence_away"
                android:scaleType="centerInside" />

            <TextView
                android:id="@+id/rvDescripcion"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:text="werwerwerwerwerwerwer"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:textColor="#000000" />
        </LinearLayout>


        <TextView
            android:id="@+id/rvetMarca"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/lnDescripcion"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:text="sdfsdfsdf"
            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/lnDescripcion"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/rvetMarca"
            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/lnDescripcion"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@id/rvMarca"
            android:text="sdfsdfsdf"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" />

        <TextView
            android:id="@+id/rvModelo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/lnDescripcion"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/rvetModelo"
            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="sdfsdfsdf"
            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_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/rvetSerie"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" />
    </RelativeLayout>
</LinearLayout>

like this

Upvotes: 0

Ben P.
Ben P.

Reputation: 54244

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>

Upvotes: 1

Related Questions