CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-constraintlayout
Pritish
Pritish

Reputation: 1368

How to put text on right centre of image view on constraint layout

Following is a part of my whole xml of constraint Layout.

<ImageView
            android:id="@+id/img_apn_not_set"
            style="@style/DeviceManagementImageView"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_sos"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view1" />

        <TextView
            android:id="@+id/tv_apn_not_set"
            style="@style/DeviceManagementHeaderText"
            android:text="Apn not set"
            android:layout_marginTop="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/img_apn_not_set"

            app:layout_constraintTop_toTopOf="@+id/img_apn_not_set" />

What I am trying to do is get the text view on exact centre on the right side of image view. In linear layout we achieve it mostly by gravity. Here I am using marginTop to achieve the same . So can I do the same by using any property . Is there a property something like rightOfCentreOf ? Thanks

Upvotes: 7

Views: 5772

Answers (5)

MathankumarK
MathankumarK

Reputation: 2905

Try this, If you want to move the text to the right or left use Horizontal bias, If you want to move your text to the top or bottom use vertical bias. 

<TextView
        android:id="@+id/tv_apn_not_set"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/app_name"
        app:layout_constraintBottom_toBottomOf="@+id/img_apn_not_set"
        app:layout_constraintEnd_toEndOf="@+id/img_apn_not_set"
        app:layout_constraintHorizontal_bias="0.63"
        app:layout_constraintStart_toStartOf="@+id/img_apn_not_set"
        app:layout_constraintTop_toTopOf="@+id/img_apn_not_set" />

Upvotes: 4

Muthukrishnan Rajendran
Muthukrishnan Rajendran

Reputation: 11622

You can use app:layout_constraintWidth_default="wrap" and give all 4 side constraint it will be at center

Example:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_apn_not_set"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/tv_apn_not_set"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Apn not set"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintTop_toTopOf="@+id/img_apn_not_set"
        app:layout_constraintBottom_toBottomOf="@+id/img_apn_not_set"
        app:layout_constraintLeft_toRightOf="@+id/img_apn_not_set"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

It will look like this

enter image description here

Upvotes: 1

Zezariya Nilesh
Zezariya Nilesh

Reputation: 400

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_apn_not_set"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_apn_not_set"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Apn not set"
        app:layout_constraintBottom_toBottomOf="@+id/img_apn_not_set"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/img_apn_not_set"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Upvotes: 2

AskNilesh
AskNilesh

Reputation: 69689

Try this

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/AmountLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBaseline_toBaselineOf="@id/Amount"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/Amount"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="NILESH"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@id/AmountLabel"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

RESULT

enter image description here

Upvotes: 2

Ketan Patel
Ketan Patel

Reputation: 2215

pls add one line in your textview 

app:layout_constraintBottom_toBottomOf="@+id/img_apn_not_set"

also remove android:layout_marginTop="5dp"

hope it help you

Upvotes: 7

Related Questions