How to set a maximum width for a view in an android constraintLayout?

Question

I have a layout that looks like 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"
    tools:context="com.plarke.proto1.QuizActivity">

<Button
    android:id="@+id/compare_settings"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="16dp"
    android:layout_marginRight="16dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginEnd="16dp" />

<TextView
    android:id="@+id/compare_score"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="16dp"
    android:layout_marginLeft="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginStart="16dp" />

<SeekBar
    android:id="@+id/compare_pitchbar"
    android:layout_width="0dp"
    android:layout_height="23dp"
    android:layout_marginBottom="50dp"
    android:layout_marginEnd="16dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginStart="16dp"
    android:progressBackgroundTint="@color/colorAccent"
    android:progressBackgroundTintMode="src_over"
    app:layout_constraintBottom_toTopOf="@+id/textView"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="50dp"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    tools:text="The seekbar is all the way to the left."
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="0dp"
    android:layout_marginLeft="0dp" />

And I want to change it so that the seekBar defaults to a certain width, but if the screen isn't wide enough, it just fills the screen(with margins). I've tried setting layout_width, but then it just goes off the screen if too wide. Using max_width does nothing at all. Is what I want possible in a ConstrainstLayout? If not what should I use?

You should use different layouts for different screen resolutions. — Giacomo Lai, Jul 10 '17 at 18:19
ContraintLayout is supposed to minimise the need for having different layouts for difference screen resolutions as it supposed to adapt to the screen according to set constraints. Hence the name. — the_new_mr, Apr 22 '19 at 12:49

lelloman · Accepted Answer · 2018-03-05T20:27:48.567

120

I think what you're looking for is matchConstraintMaxWidth attribute.

If you add it to your SeekBar with a value of, say, 200dp, keeping left and right constraints to the parent and a width of 0dp, it will stretch the view's width up to 200dp, but if there is more room it will stay at 200dp.

so your xml should look like this:

<SeekBar
   ...
    android:layout_width="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintWidth_max="200dp" />

you should also be able to set it programmatically with

ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams(0, 0);
layoutParams.matchConstraintMaxWidth = ...

edited Mar 05 '18 at 20:27

answered Jul 10 '17 at 18:33

lelloman

13,883
5
63
85

so that's a field in the ConstraintLayout.LayoutParams class? does it have to be set at runtime? – clarkep Jul 10 '17 at 18:43
correct, it is a field of ConstraintLayout.LayoutParams, I imagine it can be set via Java too – lelloman Jul 10 '17 at 18:45
I think that's a bad comment, as it is necessary for all the screens to change the value – Morozov Dec 11 '17 at 10:54
If you mean that it would be bad practice, generally speaking, I agree. However, LayoutParams are always instantiated and set at runtime, explicitly in your code or by LayoutInflater. In most scenarios it is more convenient to declare everything in the xml but there might be cases in which you need to instantiate or set some values in java, or kotlin :D – lelloman Dec 11 '17 at 11:22
3

You have to set `android:layout_width="0dp"` for this to work – Bolein95 Feb 20 '18 at 08:25

score 3 · Answer 2 · answered Apr 01 '20 at 17:11

3

Note that if your view has only one horizontal constraint then you need to add this line app:layout_constraintWidth_default="percent

<SeekBar
   ...
    android:layout_width="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_max="200dp" />

answered Apr 01 '20 at 17:11

Egis

5,081
5
39
61

This helps in the case when you want to have layout_gravity=start effect. – yaugenka Jul 31 '21 at 08:49

How to set a maximum width for a view in an android constraintLayout?

2 Answers2