How to make constraint layout centre and expand when the textview text is bigger

user_3046669 0
Viewed 287

i have a image and a textview in a constraint layout, what what I am trying to do is, to centre both image and textview in the centre and when the text is smaller I want it to expand from the centre when the text is longer

What I want to get to is

enter image description here

What I have at the moment is

enter image description here enter image description here

When the text is longer it is fine but when the text is smaller I want them at the centre

is that possible please

code I have at the moment

 <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/tariffTileHeader"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/tariffIconIV"
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:layout_marginTop="4dp"
            android:src="@drawable/ic_electricity_circle_logo"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tariffDescTV"
            style="@style/Text.Large.Bold"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:lines="3"
            app:layout_constraintStart_toEndOf="@+id/tariffIconIV"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="This is a very " />

    </androidx.constraintlayout.widget.ConstraintLayout>
android-constraintlayout kotlin android
3 Answers

You can horizontally chain the two views and set the chainStyle to packed.

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/tariffTileHeader"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/tariffIconIV"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginTop="4dp"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintEnd_toStartOf="@+id/tariffDescTV"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tariffDescTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:lines="3"
        android:textAlignment="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tariffIconIV"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="This is a very " />

</androidx.constraintlayout.widget.ConstraintLayout>
user_108333250

I think you can constraint baseline of your imageView to baseline of your textView

<androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/tariffIconIV"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginTop="4dp"
        android:src="@drawable/ic_electricity_circle_logo"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBaseline_toBaselineOf="@id/tariffDescTV" />
user_164399640

your requirement need some trick: capsulate both ImageView and TextView inside a LinearLayout(Horizontal) then put linearlayout(here is our parent for ImageView and TextView) as child inside constraintlayout and constraint it by:

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

by this solution,when your text get smaller or get longer, both component(ImageView and TextView) are in center of screen and next to each other here is my full sample XML file:

<?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayoutxmlns: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">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:text="lorium ipsum" />

</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

I hope this answer help you

user_77721740
Related