CODEWITHSUNDEEP
androidtexttextviewandroid-constraintlayout
ilw
ilw

Reputation: 2570

ConstraintLayout - avoid overlapping

There is a ConstraintLayout layout:

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

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="small text"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Button
        android:ellipsize="end"
        android:singleLine="true"
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="small text"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

It is displayed like this: введите сюда описание изображения Now is Ok, but if i change android:text="small text" to android:text="big teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext" then views will overlap each other..

I'm need to make sure that with a small text there is a "wrap content", as I actually did on the screenshot above, but with a larger text, the text views must occupy a maximum of about 40 percent horizontally of the parent. Well also that the text was not transferred - I do android: ellipsize =" end " and android: singleLine =" true.

This is how it should be (edited in Photoshop for demonstration): введите сюда описание изображения How do this with ConstraintLayout or if can't - with others layouts?

Upvotes: 22

Views: 16956

Answers (5)

southerton81
southerton81

Reputation: 1109

I would suggest to use a horizontal chain and a 'app:layout_constraintWidth_percent'.

The 'spread_inside' chain type would make the buttons stick to the parent edges, it's added on the first button in chain. enter image description here

The guidelines role is performed by the 'app:layout_constraintWidth_percent' on each button. It is set to 0.5 on both buttons. This will make each of them occupy maximum half of the available horizontal space.

 <androidx.constraintlayout.widget.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">

  <Button
      android:id="@+id/button10"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintWidth_max="wrap"
      app:layout_constraintWidth_percent="0.5"
      android:ellipsize="end"
      android:singleLine="true"
      android:text="bguigui uegerger er ergre greg  gre grefufifu "
      app:layout_constraintHorizontal_chainStyle="spread_inside"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toStartOf="@+id/button11"/>

  <Button
      android:id="@+id/button11"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintWidth_max="wrap"
      app:layout_constraintWidth_percent="0.5"
      android:ellipsize="end"
      android:singleLine="true"
      android:text="aaa jjjk kkkl"
      app:layout_constraintStart_toEndOf="@+id/button10"
      app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

minato
minato

Reputation: 2351

If constraint is from left/right 

    set vertical guideline
    set component layout_width = 0dp

If constraint is from top/bottom

    set horizontal guideline
    set component layout_height = 0dp

Upvotes: 2

Tamal Kanti Nath
Tamal Kanti Nath

Reputation: 934

The following attribute works:

app:layout_constrainedWidth="true"

https://developer.android.com/reference/android/support/constraint/ConstraintLayout

WRAP_CONTENT : enforcing constraints (Added in 1.1) If a dimension is set to WRAP_CONTENT, in versions before 1.1 they will be treated as a literal dimension -- meaning, constraints will not limit the resulting dimension. While in general this is enough (and faster), in some situations, you might want to use WRAP_CONTENT, yet keep enforcing constraints to limit the resulting dimension. In that case, you can add one of the corresponding attribute:

app:layout_constrainedWidth=”true|false” app:layout_constrainedHeight=”true|false”

Upvotes: 27

Pavan
Pavan

Reputation: 5136

you can also do it using Guideline and layout_constraintWidth_default property as in below 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:showIn="@layout/activity_home">


    <Button
        android:id="@+id/button10"
        android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="sdtessdsdsdsdsdsdsdsddsdsdxt"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="0dp"
        app:layout_constraintHorizontal_bias="0"
        android:layout_marginTop="8dp"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        android:layout_marginRight="8dp" />

    <Button
        android:ellipsize="end"
        android:singleLine="true"
        android:id="@+id/button11"
        android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        android:layout_height="wrap_content"
        android:text="ddddddsdssdsdsdsdsdsdddt"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        android:layout_marginRight="-1dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintLeft_toLeftOf="@+id/guideline" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

</android.support.constraint.ConstraintLayout>

Upvotes: 27

Shweta Chauhan
Shweta Chauhan

Reputation: 6981

You can do like this :

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

<Button
    android:id="@+id/button10"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:gravity="center_vertical"
    android:text="small text"
    android:layout_marginRight="20dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button11"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button11"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:maxLines="1"
    android:layout_marginLeft="20dp"
    android:gravity="center_vertical"
    android:text="small textsfdgdfjkghkdfhgjkdfhgkhgkhkjjkgfkgjkfgjkgjkjgfdkj"
    app:layout_constraintLeft_toRightOf="@+id/button10"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button10" />

Upvotes: 3

Related Questions