Largura percentual em um RelativeLayout

Estou trabalhando em um layout de formulário para um Login Activityno meu aplicativo Android. A imagem abaixo é como eu quero que fique:

Consegui atingir esse layout com o seguinte XML . O problema é que é um pouco tolo. Eu tive que codificar uma largura para o host EditText. Especificamente, eu tive que especificar:

android:layout_width="172dp" 

Eu realmente gostaria de dar uma largura percentual para o host e a porta EditText. (Algo como 80% para o host, 20% para a porta.) Isso é possível? O XML a seguir funciona no meu Droid, mas não parece funcionar em todas as telas. Eu realmente gostaria de uma solução mais 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>

Você está procurando o android:layout_weightatributo Isso permitirá que você use porcentagens para definir seu layout.

No exemplo a seguir, o botão esquerdo usa 70% do espaço e o botão direito 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 da mesma forma com qualquer tipo de visualização. Você pode substituir os botões por algum EditText para atender às suas necessidades.

Certifique-se de definir o layout_widthque 0dpou os seus pontos de vista não pode ser dimensionado corretamente.

Observe que a soma do peso não precisa ser igual a 1, apenas acho mais fácil ler assim. Você pode definir o primeiro peso para 7 e o segundo para 3 e isso dará o mesmo resultado.

Isso não responde bem à pergunta original, que era para uma divisão 70/30, mas no caso especial de uma divisão 50/50 entre os componentes, há uma maneira: coloque um suporte invisível no centro e use-o para posicionar o dois componentes de interesse.

<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 esse é um caso bastante comum, essa solução é mais do que uma curiosidade. É um pouco complicado, mas eficiente, porque o suporte vazio e de tamanho zero deve custar muito pouco.

Em geral, porém, é melhor não esperar muito dos layouts de estoque do Android ...

Atualização 1

Conforme apontado por @EmJiHash PercentRelativeLayout, foi preterido no nível da API 26.0.0

Abaixo citando o comentário do google:

Esta classe foi descontinuada no nível da API 26.0.0. considere o uso de ConstraintLayout e layouts associados. A seguir, mostramos como replicar a funcionalidade dos layouts de porcentagem com um ConstraintLayout

O Google introduziu uma nova API chamada android.support.percent

Depois, você pode especificar a porcentagem a ser vista

Adicione dependência de compilação como

implementation 'com.android.support:percent:22.2.0

nisso, PercentRelativeLayout é o que podemos fazer em um layout percentual

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

Você não pode usar porcentagens para definir as dimensões de uma View dentro de um RelativeLayout. A melhor maneira de fazer isso é usar LinearLayout e pesos, ou um Layout personalizado.

Você pode dar uma olhada na nova biblioteca de suporte percentual.

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

docs

amostra

Você pode usar o PercentRelativeLayout . É uma adição recente e não documentada à Design Support Library , que permite especificar não apenas elementos relativos entre si, mas também a porcentagem total de espaço disponível.

Subclasse de RelativeLayout que suporta dimensões e margens baseadas em porcentagem. Você pode especificar a dimensão ou uma margem do filho usando atributos com o sufixo "Porcentagem".

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

O pacote Porcentagem fornece APIs para oferecer suporte e adicionar e gerenciar dimensões baseadas em porcentagem no seu aplicativo.

Para usar, você precisa adicionar esta biblioteca à sua lista de dependências Gradle :

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

Eu resolvi isso criando uma exibição 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);
  }
}

Esse é um suporte invisível que posso usar para alinhar outras visualizações no RelativeLayout.

Atualizar

Conforme apontado por @EmJiHash PercentRelativeLayout e PercentFrameLayout, foi preterido no nível da API 26.0.0

Considere usar ConstraintLayout

O Google introduziu uma nova API chamada android.support.percent

1) PercentRelativeLayout

2) PercentFrameLayout

Adicione dependência de compilação como

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

Você pode especificar a dimensão em porcentagem para obter benefícios RelativeLayoute porcentagens

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

Como o PercentRelativeLayout foi descontinuado na 26.0.0 e os layouts aninhados como LinearLayout no RelativeLayout têm um impacto negativo no desempenho ( Entendendo os benefícios de desempenho do ConstraintLayout ), a melhor opção para você alcançar a largura percentual é substituir o RelativeLayout pelo ConstraintLayout.

Isso pode ser resolvido de duas maneiras.

SOLUÇÃO # 1 Usando diretrizes com deslocamento percentual

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

SOLUÇÃO # 2 Usando corrente com largura ponderada 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>

Em ambos os casos, você obtém algo parecido com isto

PercentRelativeLayout foi descontinuado da Revisão 26.0.0 da Biblioteca de suporte.

O Google introduziu o novo layout chamado ConstraintLayout .

Inclua a biblioteca como uma dependência no seu arquivo build.gradle no nível do módulo:

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

basta adicionar um arquivo de layout:

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

Restrições

As restrições ajudam a manter os widgets alinhados. Você pode usar âncoras, como as alças de restrição mostradas abaixo, para determinar regras de alinhamento entre vários widgets.

1. Wrap Content: A exibição se expande conforme necessário para ajustar seu conteúdo.
2. Match Constraints: A exibição se expande conforme necessário para atender à definição de suas restrições após contabilizar as margens. No entanto, se a dimensão especificada tiver apenas uma restrição, a exibição será expandida para se ajustar ao seu conteúdo. O uso desse modo na altura ou na largura também permite definir uma proporção de tamanho.
3. Fixed: Você especifica uma dimensão específica na caixa de texto abaixo ou redimensiona a exibição no editor.
4. Spread: As visualizações são distribuídas uniformemente (depois que as margens são contabilizadas). Esse é o padrão.
5. Spread inside: A primeira e a última visualização são afixadas às restrições em cada extremidade da cadeia e o restante é distribuído igualmente.
6. Weighted: Quando a cadeia está configurada para se espalhar ou se espalhar por dentro, você pode preencher o espaço restante configurando uma ou mais visualizações para "corresponder restrições" (0dp). Por padrão, o espaço é distribuído igualmente entre cada visualização configurada para "corresponder restrições", mas você pode atribuir um peso de importância a cada visualização usando os atributos layout_constraintHorizontal_weight e layout_constraintVertical_weight. Se você conhece o layout_weight em um layout linear, isso funciona da mesma maneira. Portanto, a vista com o maior valor de peso obtém a maior quantidade de espaço; visualizações com o mesmo peso obtêm a mesma quantidade de espaço.
7. Packed: As visualizações são agrupadas (depois que as margens são contabilizadas). Você pode ajustar o viés da corrente inteira (esquerda / direita ou para cima / para baixo) alterando o viés de visualização da cabeça da corrente.
8. Center Horizontally or Center Vertically: Para criar uma cadeia de vistas rapidamente, selecione todas elas, clique com o botão direito do mouse em uma das vistas e, em seguida, selecione Centralizar horizontalmente ou Centralizar verticalmente, para criar uma cadeia horizontal ou vertical
9. Baseline alignment: Alinhar a linha de base do texto de uma visualização à linha de base do texto de outra visualização.
10. Constrain to a guideline: Você pode adicionar uma diretriz vertical ou horizontal à qual você pode restringir visualizações, e a diretriz ficará invisível para os usuários do aplicativo. Você pode posicionar a diretriz no layout com base em unidades de DP ou porcentagem, em relação à aresta do layout.
11. Adjust the constraint bias: Quando você adiciona uma restrição aos dois lados de uma vista (e o tamanho da vista para a mesma dimensão é "fixo" ou "agrupar conteúdo"), a vista fica centralizada entre as duas restrições com um viés de 50% por padrão. Você pode ajustar o viés arrastando o controle deslizante de viés na janela Propriedades
12. Set size as a ratio: Você pode definir o tamanho da vista para uma proporção como 16: 9 se pelo menos uma das dimensões da vista estiver definida para "corresponder às restrições" (0dp).

Você pode aprender mais com o documento oficial .

Você pode fazer isso usando pesos de layout. Um peso determina como as partes não reclamadas da tela são divididas. Atribua a cada EditText uma largura de layout 0 e um peso proporcional. Ou seja, dê um peso 2 e o outro 1 se você quiser que o primeiro ocupe o dobro do espaço.

Curiosamente, com base na resposta de @olefevre, não é possível apenas fazer layouts 50/50 com "suportes invisíveis", mas todos os tipos de layouts envolvendo poderes de dois.

Por exemplo, aqui está um layout que corta a largura em quatro partes iguais (na verdade três, com 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>

Basta colocar seu host e porta de duas visualizações de texto em um layout linear horizontal independente e usar android: layout_weight para fazer a porcentagem

Verifique https://github.com/mmin18/FlexLayout, que você pode usar por cento ou expressão java diretamente no xml de layout.

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