Ancho de porcentaje en un diseño relativo

Estoy trabajando en un diseño de formulario para iniciar sesión Activityen mi aplicación de Android. La imagen a continuación es cómo quiero que se vea:

Pude lograr este diseño con el siguiente XML . El problema es que es un poco hack. Tuve que codificar un ancho para el host EditText. Específicamente, tuve que especificar:

android:layout_width="172dp" 

Realmente me gustaría dar un ancho porcentual al host y al puerto EditText. (Algo así como 80% para el host, 20% para el puerto). ¿Es esto posible? El siguiente XML funciona en mi Droid, pero no parece funcionar para todas las pantallas. Realmente me gustaría una solución más robusta.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:paddingLeft="15dp"
        android:paddingTop="0dp"
        android:text="host"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:layout_toRightOf="@+id/host_input"
        android:paddingTop="0dp"
        android:text="port"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="172dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginTop="4dp"
        android:layout_toRightOf="@id/host_input"
        android:background="@android:drawable/editbox_background"
        android:inputType="number" />

    <TextView
        android:id="@+id/username_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/host_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="username"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/username_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/username_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <TextView
        android:id="@+id/password_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/username_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="password"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textPassword" />

    <ImageView
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="false"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="15dp"
        android:scaleType="fitStart"
        android:src="@drawable/home" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:text="   login   "
        android:textSize="18sp" >
    </Button>

</RelativeLayout>

Estás buscando el android:layout_weightatributo. Le permitirá utilizar porcentajes para definir su diseño.

En el siguiente ejemplo, el botón izquierdo usa el 70% del espacio y el botón derecho el 30%.

<LinearLayout
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:text="left" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".70" /> 

    <Button
        android:text="right" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".30" />

</LinearLayout>

Funciona igual con cualquier tipo de Vista, puede reemplazar los botones con un poco de EditText para satisfacer sus necesidades.

Asegúrese de ajustar la layout_widtha 0dp, o sus puntos de vista no pueden escalarse adecuadamente.

Tenga en cuenta que la suma de peso no tiene que ser igual a 1, simplemente me resulta más fácil de leer de esta manera. Puede establecer el primer peso en 7 y el segundo en 3 y dará el mismo resultado.

Esto no responde a la pregunta original, que era para una división 70/30, pero en el caso especial de una división 50/50 entre los componentes hay una manera: colocar un puntal invisible en el centro y usarlo para colocar el Dos componentes de interés.

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <View android:id="@+id/strut"
        android:layout_width="0dp"
        android:layout_height="0dp" 
        android:layout_centerHorizontal="true"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:text="Left"/> 
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/strut"
        android:layout_alignParentRight="true"
        android:text="Right"/>
</RelativeLayout>

Como este es un caso bastante común, esta solución es más que una curiosidad. Es un truco pero eficiente porque el puntal vacío de tamaño cero debería costar muy poco.

Sin embargo, en general, es mejor no esperar demasiado de los diseños de Android en existencia ...

Actualización 1

Como señaló @EmJiHash, PercentRelativeLayout está en desuso en el nivel de API 26.0.0

A continuación, citando el comentario de Google:

Esta clase quedó en desuso en el nivel de API 26.0.0. considere usar ConstraintLayout y diseños asociados en su lugar. A continuación se muestra cómo replicar la funcionalidad de diseños de porcentaje con un diseño de restricción

Google introdujo una nueva API llamada android.support.percent

Luego puede especificar el porcentaje a tomar por vista

Agregar dependencia de compilación como

implementation 'com.android.support:percent:22.2.0

en eso, PercentRelativeLayout es lo que podemos hacer en un diseño porcentual

 <android.support.percent.PercentRelativeLayout
     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">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

No puede usar porcentajes para definir las dimensiones de una vista dentro de un diseño relativo. La mejor manera de hacerlo es usar LinearLayout y pesos, o un diseño personalizado.

Puede echar un vistazo a la nueva biblioteca de porcentajes de soporte.

compile 'com.android.support:percent:22.2.0'

docs

muestra

Puede usar PercentRelativeLayout , es una adición reciente no documentada a la Biblioteca de soporte de diseño , permite la capacidad de especificar no solo elementos relativos entre sí sino también el porcentaje total de espacio disponible.

Subclase de RelativeLayout que admite márgenes y dimensiones basadas en porcentajes. Puede especificar la dimensión o un margen secundario utilizando atributos con el sufijo "Porcentaje".

<android.support.percent.PercentRelativeLayout
     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">
  <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_widthPercent="50%"
      app:layout_heightPercent="50%"
      app:layout_marginTopPercent="25%"
      app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentFrameLayout>

El paquete de porcentaje proporciona API para admitir la adición y administración de dimensiones basadas en porcentajes en su aplicación.

Para usar, debe agregar esta biblioteca a su lista de dependencias de Gradle :

dependencies {
    compile 'com.android.support:percent:22.2.0'//23.1.1
}

He resuelto esto creando una vista personalizada:

public class FractionalSizeView extends View {
  public FractionalSizeView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public FractionalSizeView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width * 70 / 100, 0);
  }
}

Este es un puntal invisible que puedo usar para alinear otras vistas dentro de RelativeLayout.

Actualizar

Como señaló @EmJiHash, PercentRelativeLayout y PercentFrameLayout está en desuso en el nivel de API 26.0.0

Considere usar RestraintLayout

Google introdujo una nueva API llamada android.support.percent

1) Porcentaje de diseño relativo

2) PercentFrameLayout

Agregar dependencia de compilación como

compile 'com.android.support:percent:23.1.1'

Puede especificar la dimensión en porcentaje, así que obtenga tanto el beneficio RelativeLayoutcomo el porcentaje

 <android.support.percent.PercentRelativeLayout
         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"/>
     <TextView
         app:layout_widthPercent="40%"
         app:layout_heightPercent="40%"
         app:layout_marginTopPercent="15%"
         app:layout_marginLeftPercent="15%"/>
 </android.support.percent.PercentRelativeLayout/>

Dado que PercentRelativeLayout quedó en desuso en 26.0.0 y los diseños anidados como LinearLayout dentro de RelativeLayout tienen un impacto negativo en el rendimiento ( Comprender los beneficios de rendimiento de ConstraintLayout ), la mejor opción para lograr el ancho porcentual es reemplazar su RelativeLayout con ConstraintLayout.

Esto se puede resolver de dos maneras.

SOLUCIÓN # 1 Usando pautas con porcentaje de desplazamiento

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

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintRight_toRightOf="parent" />

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

</android.support.constraint.ConstraintLayout>

SOLUCIÓN # 2 Usando cadena con ancho ponderado para EditText

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

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintHorizontal_weight="0.8"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintHorizontal_weight="0.2"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toRightOf="@+id/host_input"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

En ambos casos, obtienes algo como esto

PercentRelativeLayout está en desuso de la Revisión 26.0.0 de la Biblioteca de soporte.

Google presentó un nuevo diseño llamado ConstraintLayout .

Agregue la biblioteca como una dependencia en su archivo build.gradle a nivel de módulo:

     dependencies {
        compile 'com.android.support.constraint:constraint-layout:1.0.1'
      }

simplemente agregue un archivo de diseño:

<?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">
</android.support.constraint.ConstraintLayout>

Restricciones

Las restricciones lo ayudan a mantener los widgets alineados. Puede usar anclajes, como los controladores de restricción que se muestran a continuación, para determinar las reglas de alineación entre varios widgets.

1. Wrap Content: La vista se expande según sea necesario para ajustarse a su contenido.
2. Match Constraints: La vista se expande según sea necesario para cumplir con la definición de sus restricciones después de tener en cuenta los márgenes. Sin embargo, si la dimensión dada tiene solo una restricción, la vista se expande para ajustarse a su contenido. El uso de este modo en altura o anchura también le permite establecer una relación de tamaño.
3. Fixed: Usted especifica una dimensión específica en el cuadro de texto a continuación o redimensionando la vista en el editor.
4. Spread: Las vistas se distribuyen uniformemente (después de que se tienen en cuenta los márgenes). Este es el valor predeterminado.
5. Spread inside: La primera y la última vista se fijan a las restricciones en cada extremo de la cadena y el resto se distribuye uniformemente.
6. Weighted: Cuando la cadena está configurada para extenderse o extenderse dentro, puede llenar el espacio restante configurando una o más vistas para "hacer coincidir las restricciones" (0dp). De manera predeterminada, el espacio se distribuye uniformemente entre cada vista configurada para "coincidir restricciones", pero puede asignar un peso de importancia a cada vista utilizando los atributos layout_constraintHorizontal_weight y layout_constraintVertical_weight. Si está familiarizado con layout_weight en un diseño lineal, esto funciona de la misma manera. Por lo tanto, la vista con el valor de peso más alto obtiene la mayor cantidad de espacio; Las vistas que tienen el mismo peso obtienen la misma cantidad de espacio.
7. Packed: Las vistas se agrupan (después de que se tienen en cuenta los márgenes). Luego puede ajustar el sesgo de toda la cadena (izquierda / derecha o arriba / abajo) cambiando el sesgo de la vista de la cabeza de la cadena.
8. Center Horizontally or Center Vertically: Para crear una cadena de vistas rápidamente, selecciónelas todas, haga clic con el botón derecho en una de las vistas y luego seleccione Centrar horizontalmente o Centrar verticalmente, para crear una cadena horizontal o vertical
9. Baseline alignment: Alinee la línea de base de texto de una vista con la línea de base de texto de otra vista.
10. Constrain to a guideline: Puede agregar una guía vertical u horizontal a la que puede restringir las vistas, y la guía será invisible para los usuarios de la aplicación. Puede colocar la directriz dentro del diseño según las unidades dp o el porcentaje, en relación con el borde del diseño.
11. Adjust the constraint bias: Cuando agrega una restricción a ambos lados de una vista (y el tamaño de la vista para la misma dimensión es "fijo" o "contenido de ajuste"), la vista se centra entre las dos restricciones con un sesgo del 50% de forma predeterminada. Puede ajustar el sesgo arrastrando el control deslizante de sesgo en la ventana Propiedades
12. Set size as a ratio: Puede establecer el tamaño de la vista en una proporción de 16: 9 si al menos una de las dimensiones de la vista está configurada para "coincidir con las restricciones" (0dp).

Puede obtener más información del documento oficial .

Puede lograr esto a través de pesos de diseño. Un peso dicta cómo se dividen las partes no reclamadas de la pantalla. Dé a cada EditText un layout_width de 0, y un peso proporcional. Es decir, dele a uno un peso de 2 y al otro un peso de 1 si desea que el primero ocupe el doble de espacio.

Curiosamente, basándose en la respuesta de @olefevre, uno no solo puede hacer diseños de 50/50 con "puntales invisibles", sino todo tipo de diseños que involucran poderes de dos.

Por ejemplo, aquí hay un diseño que corta el ancho en cuatro partes iguales (en realidad tres, con pesos de 1, 1, 2):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <View
        android:id="@+id/strut"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:background="#000000" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/strut" >

        <View
            android:id="@+id/left_strut"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/strut"
            android:layout_centerHorizontal="true"
            android:background="#000000" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignRight="@+id/left_strut"
            android:text="Far Left" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_toRightOf="@+id/left_strut"
            android:text="Near Left" />
    </RelativeLayout>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/strut"
            android:layout_alignParentRight="true"
            android:text="Right" />

</RelativeLayout>

Simplemente coloque sus dos vistas de texto host y puerto en una distribución lineal independiente horizontal y use android: layout_weight para hacer el porcentaje

Compruebe https://github.com/mmin18/FlexLayout, que puede usar el porcentaje o la expresión java directamente en el diseño xml.

<EditText
    app:layout_left="0%"
    app:layout_right="60%"
    app:layout_height="wrap_content"/>
<EditText
    app:layout_left="prev.right+10dp"
    app:layout_right="100%"
    app:layout_height="wrap_content"/>