Con una vista previa 1 de Android Studio 2.2 Google lanzó un nuevo diseño en su biblioteca de soporte: ConstraintLayout. Con ConstraintLayout es más fácil usar una herramienta de diseño en Android Studio, pero no encontré una forma de usar tamaños relativos (porcentajes o 'pesos' como en LinearLayout). ¿Hay alguna manera de definir las restricciones basadas en porcentajes? Por ejemplo, ¿hacer que una vista tome el 40% de una pantalla, crear un margen del 20% entre las vistas, establecer el ancho de una vista al 50% del ancho de otra vista?

Actualmente puede hacer esto de varias maneras.

Una es crear pautas (haga clic con el botón derecho en el área de diseño, luego haga clic en agregar pauta vertical / horizontal). Luego puede hacer clic en el "encabezado" de la guía para cambiar el posicionamiento para que esté basado en porcentajes. Finalmente, puede restringir las vistas a pautas.

Otra forma es posicionar una vista usando sesgo (porcentaje) y luego anclar otras vistas a esa vista.

Dicho esto, hemos estado pensando en cómo ofrecer dimensiones basadas en porcentajes. No puedo hacer ninguna promesa, pero es algo que nos gustaría agregar.

Puede ser útil tener una referencia rápida aquí.

Colocación de vistas

Usar una guía de app:layout_constraintGuide_percentla siguiente manera:

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

Y luego puede usar esta guía como puntos de anclaje para otras vistas.

o

Usar sesgo con app:layout_constraintHorizontal_biasy / oapp:layout_constraintVertical_bias para modificar la ubicación de la vista cuando el espacio disponible lo permita

<Button
    ...
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_bias="0.25"
    ...
    />

Tamaño de vistas

Otro valor basado en porcentaje es la altura y / o el ancho de los elementos, con app:layout_constraintHeight_percenty / o app:layout_constraintWidth_percent:

<Button
    ...
    android:layout_width="0dp"
    app:layout_constraintWidth_percent="0.5"
    ...
    />

A partir de "ConstraintLayout1.1.0-beta1" puede usar el porcentaje para definir anchos y alturas.

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"

Esto definirá el ancho como el 40% del ancho de la pantalla. Una combinación de esto y pautas en porcentaje le permite crear cualquier diseño basado en porcentaje que desee.

Con la nueva versión de ConstraintLayout v1.1 ahora puede hacer lo siguiente:

<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.65" />

Esto limitará el botón para que tenga un 20% de la altura y un 65% del ancho de la vista principal.

Cómo usar las pautas

La respuesta aceptada es poco clara sobre cómo usar las pautas y cuál es el "encabezado".

Pasos

Primero agregue una directriz.

Seleccione la línea de guía o muévala un poco para hacer visibles las restricciones.

Luego haga clic en el círculo redondo (el "encabezado") hasta que se convierta en un porcentaje. Luego puede arrastrar este porcentaje al 50% o lo que quiera.

Después de eso, puede restringir su vista a la Guía para que sea un porcentaje del padre (usando match_constrainten la vista).

La Guía es invaluable, y la aplicación: layout_constraintGuide_percent es un gran amigo ... Sin embargo, a veces queremos porcentajes sin pautas. Ahora es posible usar pesas :

android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"

Aquí hay un ejemplo más completo que usa una guía con pesos adicionales :

<?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"
    android:padding="16dp"
    tools:context="android.itomerbu.layoutdemo.MainActivity">

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

    <Button
        android:id="@+id/btnThird"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/btnThird"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintRight_toLeftOf="@+id/btnTwoThirds"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"/>

    <Button
        android:id="@+id/btnTwoThirds"
        app:layout_constraintHorizontal_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/btnTwoThirds"
        app:layout_constraintBottom_toBottomOf="@+id/btnThird"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btnThird"/>
</android.support.constraint.ConstraintLayout>

Con ConstraintLayout v1.1.2, la dimensión debe establecerse en 0dpy luego establecer los atributos layout_constraintWidth_percento layout_constraintHeight_percenten un valor entre 0 y 1 como:

<!-- 50% width centered Button -->
<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent=".5" />

(No es necesario configurar app:layout_constraintWidth_default="percent"o app:layout_constraintHeight_default="percent"con ConstraintLayout 1.1.2 y las siguientes versiones)

Restricción Layout 1.0 haciendo que una vista ocupe un porcentaje de la pantalla requerida haciendo dos pautas. En Restraint Layout 1.1 se ha simplificado permitiéndole restringir fácilmente cualquier vista a un porcentaje de ancho o alto.

¿No es esto fantástico? Todas las vistas admiten los atributos layout_constraintWidth_percent y layout_constraintHeight_percent. Esto hará que la restricción se fije en un porcentaje del espacio disponible. Por lo tanto, hacer que un botón o una vista de texto se expanda para llenar un porcentaje de la pantalla se puede hacer con unas pocas líneas de XML.

Por ejemplo, si desea establecer el ancho del botón al 70% de la pantalla, puede hacerlo así:

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />

Tenga en cuenta que deberá colocar la dimensión como porcentaje a 0dp, ya que hemos especificado android: layout_width a 0dp arriba.

Del mismo modo, si desea establecer la altura del botón al 20% de la pantalla, puede hacerlo así:

<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_constraintHeight_percent="0.2" />

¡Ver! esta vez hemos especificado android: layout_height a 0dp ya que queremos que el botón use la altura como porcentaje.

Prueba este código. Puede cambiar los porcentajes de altura y anchura con app: layout_constraintHeight_percent y app: layout_constraintWidth_percent.

<?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="match_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".4"></LinearLayout>

</android.support.constraint.ConstraintLayout>

Gradle:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

puedes usarlo app:layout_constraintVertical_weightigual que layout_weightenlinearlayout

<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/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button5"
    app:layout_constraintVertical_weight="1"/>

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toRightOf="@+id/button4"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintVertical_weight="1"/>
</android.support.constraint.ConstraintLayout>

NOTA: app:layout_constraintVertical_weight( app:layout_constraintHorizontal_weight) funcionará con android:layout_width="0dp"(android:layout_height="0dp"

Para alguien que pueda resultarle útil, puede usar layout_constraintDimensionRatioim cualquier vista secundaria dentro de ConstraintLayoutay podemos definir el alto o el ancho de una relación de la otra dimensión (al menos uno debe ser 0dp, ya sea ancho o alto)

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:src="@drawable/top_image"
        app:layout_constraintDimensionRatio="16:9"        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

en este caso la relación de aspecto es 16: 9 app:layout_constraintDimensionRatio="16:9" puedes encontrar más información AQUÍ

Sé que esto no es directamente lo que OP estaba pidiendo originalmente, pero esto me ayudó mucho en esta situación cuando tuve una pregunta similar. Agregar esto para las personas que buscan cambiar el tamaño de la ventana de diseño (que uso regularmente), a través del código . Agregue esto a su onCreate en la actividad de la pregunta. (Lo cambia al 80%)

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

int width = dm.widthPixels;
int height = dm.heightPixels;

getWindow().setLayout((int)(width * 0.8), (int)(height * 0.8));

Simplemente, simplemente reemplace, en su etiqueta de guía

app:layout_constraintGuide_begin="291dp"

con

app:layout_constraintGuide_percent="0.7"

donde 0.7 significa 70%.

Además, si ahora intenta arrastrar pautas, el valor arrastrado ahora aparecerá en% de edad.

Con las pautas, puede cambiar la posición para que se base en porcentajes

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

También puedes usar de esta manera

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.4"