Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ConstraintLayout max width percentage

I've been experimenting with ConstraintLayout, is there a way to set the max width of a view to a percentage of the parent (and a height of match constraint and dimension ratio of 1:1)?

Here is the code without using max width:

<?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"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

   <FrameLayout
      android:id="@+id/frameLayout3"
      android:layout_width="0dp"
      android:layout_height="259dp"
      android:layout_marginEnd="8dp"
      android:layout_marginStart="8dp"
      android:background="@android:color/black"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0.0"
      app:layout_constraintStart_toEndOf="@+id/imageView"
      app:layout_constraintTop_toTopOf="parent"/>

   <ImageView
      android:id="@+id/imageView"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:src="@android:drawable/ic_menu_add"
      app:layout_constraintBottom_toBottomOf="@+id/frameLayout3"
      app:layout_constraintDimensionRatio="1:1"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintWidth_percent="0.3"/>

</android.support.constraint.ConstraintLayout>

This is the result:

Tablet:

Tablet

Phone:

Phone

like image 224
Hyhage Avatar asked Mar 13 '18 11:03

Hyhage


People also ask

Is ConstraintLayout a ViewGroup?

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).

Why is ConstraintLayout faster?

This is because ConstraintLayout allows you to build complex layouts without having to nest View and ViewGroup elements. When running the Systrace tool for the version of our layout that uses ConstraintLayout , you see far fewer expensive measure/layout passes during the same 20-second interval.

What is Layout_constraintdimensionratio?

A ConstraintLayout is a ViewGroup which allows you to Position and size Views in a flexible way. It is basically RelativeLayout on Steriods. The Views will be positioned and sized w.r.t other Views with the Use of Constraints.


2 Answers

I achieved the max width percentage using two attributes:

app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.4" 

Example:

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="Helo world"
    android:textAlignment="viewStart"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_max="wrap"
    app:layout_constraintWidth_percent="0.4" />

The text width will increase to 40% of parent and then wrap if the content exceeds that.

like image 114
Thomson Varghese Avatar answered Oct 06 '22 13:10

Thomson Varghese


If I'm understanding your problem right then You're almost there. I think you're giving frameLayout static height that's why it is not giving the appropriate result on tablet.. because you set the height according to phone preview. What you need to do is make the height of frameLayout relative to imageView.. so when imageView grows in size the frameLayout also grows with it.

I think you should do something 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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@android:drawable/ic_menu_add"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.3" />    

    <FrameLayout
        android:id="@+id/frameLayoutTwo"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/black"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" /> 

</android.support.constraint.ConstraintLayout>

I checked and this gives the same result in phone and tablet. Correct me if I misunderstood your problem.

like image 23
Somesh Kumar Avatar answered Oct 06 '22 12:10

Somesh Kumar