CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
LeTadas
LeTadas

Reputation: 3556

ConstraintLayout center align image and text

how can I align TextView to end of ImageView that TextView would be centered vertically using ConstraintLayout I managed to align it to the end of ImageView but it's not centered vertically because ImageView is a bit bigger than TextView I know how to do it using RelativeLayout, but wanna use best practices and use only ConstraintLayout

Here is an example how it should look (Cloud icon and text Last Backup)

enter image description here

Upvotes: 9

Views: 16452

Answers (5)

Rohit269
Rohit269

Reputation: 117

<ImageView
        android:id="@+id/ivImg"
        android:layout_width="@dimen/dimen_24dp"
        android:layout_height="@dimen/dimen_24dp"
        android:layout_marginTop="@dimen/dimen_40dp"
        android:src="@android:drawable/ic_menu_search"
        android:layout_marginEnd="@dimen/dimen_20dp"
       app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintEnd_toStartOf="@+id/txtlbResult"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txtlbResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="@dimen/text14sp"
        android:layout_marginTop="@dimen/dimen_40dp"
        android:text="@string/your_result_are_here"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/ivImg"
        app:layout_constraintTop_toTopOf="parent" />

Upvotes: 0

PK Chahar
PK Chahar

Reputation: 111

Set parent constrain end top and bottom. These constraints will set center of constrain app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent".

Upvotes: 0

Sandeep Parish
Sandeep Parish

Reputation: 2238

Use drawable left for your TextView like this and change gravity by your root layout as you want

<TextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:drawablePadding="15dp"
     android:drawableLeft="@drawable/google"
     android:text="@string/textGoogle" />

Upvotes: 5

Jaymin
Jaymin

Reputation: 2912

You can do like in using ConstraintLayout:

Set Textview top and bottom constrain to ImageView top and bottom. These constraints will set TextView in center of ImageView.

<?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.support.v7.widget.AppCompatImageView
    android:id="@+id/imageview"
    android:layout_width="50dp"
    android:layout_height="50dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_icon"/>


 <android.support.v7.widget.AppCompatTextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:textColor="@android:color/white"
    android:textSize="14sp"
    app:layout_constraintStart_toEndOf="@+id/imageview"
    app:layout_constraintBottom_toBottomOf="@+id/imageview"
    app:layout_constraintTop_toTopOf="@+id/imageview"/>

</android.support.constraint.ConstraintLayout>

Upvotes: 1

Hong Duan
Hong Duan

Reputation: 4294

Just use app:layout_constraintTop_toTopOf and app:layout_constraintBottom_toBottomOf together, and it will cause the TextView center vertical align to the ImageView.

<ImageView
    android:id="@+id/imageView"
    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:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:text="Last Backup"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    />

Upvotes: 23

Related Questions