androidandroid-layoutandroid-constraintlayout

Reputation: 1903

Adding constraint in such a way that a view won't exceed it

I have the following configuration in my view using ConstraintLayout:

I want that "Admin" view was always on the right side of username view, but when username is too large admin view should always be visible. How to achieve it?

Currently:

EDIT:

Current code

  <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="@dimen/dp0"
        android:layout_height="match_parent"
        android:layout_weight="0.8">

        <TextView
            android:id="@+id/name"
            style="@style/Text.Black"
            android:layout_width="wrap_content"
            android:layout_marginTop="12dp"
            android:ellipsize="marquee"
            android:paddingBottom="@dimen/dp6"
            android:singleLine="true"
            android:textSize="@dimen/sp16"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="veryveryveryverylongvervrusername" />

        <TextView
            android:id="@+id/mail"
            style="@style/Text.Grey"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name"
            android:ellipsize="marquee"
            android:singleLine="true"
            tools:text="fjfdjdf"
            android:textSize="@dimen/sp12" />

        <TextView
            android:id="@+id/status"
            style="@style/Text.White"
            android:layout_height="@dimen/dp18"
            android:layout_marginLeft="@dimen/dp9"
            android:layout_marginStart="@dimen/dp9"
            android:layout_marginTop="@dimen/dp2"
            app:layout_constraintStart_toEndOf="@id/name"
            app:layout_constraintTop_toTopOf="@+id/name"
            android:ellipsize="marquee"
            android:paddingLeft="@dimen/dp5"
            android:paddingRight="@dimen/dp5"
            android:singleLine="true"
            tools:text="Admin"
            tools:background="@drawable/bg_text_round_corners_blue"
            android:textSize="@dimen/sp12" />

Upvotes: 0

Answers (6)

nulldroid

Reputation: 1230

First on Admin Textview (@id+id/status) you have to add

app:layout_constraintEnd_toEndOf="parent"

Then on Username Textview (@+id/name) you can try add the following lines,

app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="@id/status"

which whould constrain the width to be max until admin TextView

update (since i didn't fully understand your constraints)

the only way I could figure out to get this work is to create another ConstraintLayout inside the one that's already there, like this:

   <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.8"
        android:background="@color/colorPrimaryDark">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constrainedWidth="true"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="marquee"
                android:singleLine="true"
                app:layout_constrainedWidth="true"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/status"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                tools:layout_editor_absoluteY="12dp"
                tools:text="veryveryveryverylongvervrusername" />


            <TextView
                android:id="@+id/status"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:ellipsize="marquee"
                android:singleLine="true"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/name"
                tools:layout_editor_absoluteY="12dp"
                tools:text="Admin" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

The important point is to set

    app:layout_constrainedWidth="true"

for both the username TextView and and the inner ConstraintLayout

Upvotes: 2

bvk256

Reputation: 1903

Thank you all for the responses. I tried all of the solutions, but they either pushed "Admin" text out of the visibility when "username" is too large or made "admin" textview be glued to the right side without accounting the "username" size.

I was able to solve my problem to some extend by adding this percentage constraint to the "username" textview:

android:layout_width="0dp"
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.75"

So it behaves like this:

Upvotes: 0

theThapa

Reputation: 631

@bvk256

You can achieve the behavior with the following xml code, maybe slight bit cleanup.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
android:minHeight="90dp"
android:padding="16dp"
tools:context=".MainActivity">

<ImageView
    android:id="@+id/startIcon"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:src="@android:drawable/ic_btn_speak_now"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<EditText
    android:id="@+id/firstEditText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:padding="0dp"
    app:layout_constraintEnd_toStartOf="@id/admin"
    app:layout_constraintStart_toEndOf="@+id/startIcon"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="hello world to this long and very very very very long text" />

<TextView
    android:id="@+id/admin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:background="@color/colorAccent"
    android:text="Admin"
    app:layout_constraintEnd_toStartOf="@+id/endIcon"
    app:layout_constraintTop_toTopOf="@+id/firstEditText" />

<EditText
    android:id="@+id/secondEditText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:padding="0dp"
    app:layout_constraintEnd_toStartOf="@id/admin"
    app:layout_constraintStart_toEndOf="@+id/startIcon"
    app:layout_constraintTop_toBottomOf="@+id/firstEditText"
    tools:text="hello world to this long and very very very very long text" />

<ImageView
    android:id="@+id/endIcon"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:src="@android:drawable/ic_menu_delete"
    android:tint="@android:color/holo_blue_dark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Upvotes: 0

mohammadReza Abiri

Reputation: 1799

try this :

 <TextView
            android:id="@+id/status"
            style="@style/Text.White"
            android:layout_height="@dimen/dp18"
            android:layout_marginLeft="@dimen/dp9"
            android:layout_marginStart="@dimen/dp9"
            android:layout_marginTop="@dimen/dp2"
            app:layout_constraintStart_toEndOf="@id/name"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:ellipsize="marquee"
            android:paddingLeft="@dimen/dp5"
            android:paddingRight="@dimen/dp5"
            android:singleLine="true"
            tools:text="Admin"
            tools:background="@drawable/bg_text_round_corners_blue"
            android:textSize="@dimen/sp12" />

Upvotes: 0

Vamsi

Reputation: 878

For the field with id @+id/name, add below line:

app:layout_constraintEnd_toStartOf="@id/status"
android:layout_height="wrap_content"

and change it's layout_width to

android:layout_width="0dp"

Upvotes: 0

EAlgekrans

Reputation: 131

You can try to set the layout_witdh of your Admin textview to 0dp like this:

android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@+id/name"
app:layout_constraintEnd_toStartOf="@+id/settings_icon"

The name textview needs to have something like this:

android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="@+id/status"

Upvotes: 0

Adding constraint in such a way that a view won&#39;t exceed it

Answers (6)

Related Questions

Adding constraint in such a way that a view won't exceed it