android – Align visual components

Question:

I'm having difficulties aligning the buttons/icons in my activity. I'm using relative layout to position the buttons, but when it compiles it gets out of order.

Here's the code:

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

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" android:layout_height="match_parent">


    <TextView
        android:text="@string/lbl_debitos_pendentes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lbl_debitosPendentes"
        android:layout_below="@+id/btnDebitosPendentes"
        android:layout_alignRight="@+id/btnDebitosPendentes"
        android:layout_alignEnd="@+id/btnDebitosPendentes" />

    <TextView
        android:text="@string/lbl_dados_cadastrais"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lbl_dados_cadastrais"
        android:layout_below="@+id/btnDadosCadastrais"
        android:layout_alignRight="@+id/btnDadosCadastrais"
        android:layout_alignEnd="@+id/btnDadosCadastrais" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/lbl_dados_cadastrais"
        android:layout_alignRight="@+id/lbl_dados_cadastrais"
        android:layout_alignEnd="@+id/lbl_dados_cadastrais"
        android:layout_marginTop="14dp"
        android:id="@+id/btnHistoricoPagamento"
        android:background="@drawable/historic_pgto" />

    <TextView
        android:text="@string/lbl_hist_pagamento"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lbl_historicoPagamento"
        android:layout_below="@+id/btnHistoricoPagamento"
        android:layout_alignLeft="@+id/btnHistoricoPagamento"
        android:layout_alignStart="@+id/btnHistoricoPagamento" />

    <Button

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnSolicitarAtendimento"
        android:background="@drawable/soli_atend"
        android:layout_above="@+id/lbl_historicoPagamento"
        android:layout_alignLeft="@+id/lbl_debitosPendentes"
        android:layout_alignStart="@+id/lbl_debitosPendentes" />

    <TextView
        android:text="@string/lbl_hist_atendimentos"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lbl_hist_atendimento"
        android:layout_below="@+id/btnHistoricoAtendimento"
        android:layout_toLeftOf="@+id/btnSolicitarAtendimento"
        android:layout_toStartOf="@+id/btnSolicitarAtendimento" />

    <TextView
        android:text="@string/lbl_grafico"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView15"
        android:layout_below="@+id/button32"
        android:layout_alignRight="@+id/button32"
        android:layout_alignEnd="@+id/button32" />

    <TextView
        android:text="@string/lbl_solicitar_atendimento"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lbl_solic_atendimento"
        android:layout_below="@+id/btnSolicitarAtendimento"
        android:layout_alignLeft="@+id/btnSolicitarAtendimento"
        android:layout_alignStart="@+id/btnSolicitarAtendimento"
        android:layout_marginLeft="18dp"
        android:layout_marginStart="18dp" />

    <Button

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/lbl_hist_atendimento"
        android:layout_alignRight="@+id/btnHistoricoAtendimento"
        android:layout_alignEnd="@+id/btnHistoricoAtendimento"
        android:layout_marginTop="24dp"
        android:id="@+id/btnExtratoAutenticacao"
        android:background="@drawable/extrato" />

    <TextView
        android:text="@string/lbl_extrato_autenticacao"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView16"
        android:layout_below="@+id/btnExtratoAutenticacao"
        android:layout_alignLeft="@+id/btnExtratoAutenticacao"
        android:layout_alignStart="@+id/btnExtratoAutenticacao"
        android:layout_marginTop="12dp" />

    <TextView
        android:text="@string/lbl_contato"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView16"
        android:layout_alignRight="@+id/lbl_debitosPendentes"
        android:layout_alignEnd="@+id/lbl_debitosPendentes"
        android:id="@+id/textView17" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button32"
        android:background="@drawable/grafico"
        android:layout_below="@+id/lbl_solic_atendimento"
        android:layout_alignRight="@+id/lbl_solic_atendimento"
        android:layout_alignEnd="@+id/lbl_solic_atendimento" />

    <Button

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnContato"
        tools:background="@drawable/mapa"
        android:layout_above="@+id/textView17"
        android:layout_alignRight="@+id/textView17"
        android:layout_alignEnd="@+id/textView17" />

    <Button

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="34dp"
        android:layout_marginStart="34dp"
        android:layout_marginTop="28dp"
        android:id="@+id/btnDadosCadastrais"
        android:background="@drawable/user_edit"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnDebitosPendentes"
        tools:ignore="RelativeOverlap,RtlHardcoded"
        tools:background="@drawable/doc_abe"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:layout_alignBaseline="@+id/btnDadosCadastrais"
        android:layout_alignBottom="@+id/btnDadosCadastrais"
        android:layout_toRightOf="@+id/textView16"
        android:layout_toEndOf="@+id/textView16" />

    <Button

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnHistoricoAtendimento"
        tools:background="@drawable/history"
        android:layout_alignParentBottom="true"
        android:layout_alignLeft="@+id/lbl_historicoPagamento"
        android:layout_alignStart="@+id/lbl_historicoPagamento" />

</RelativeLayout>

The buttons/icons must line up 2 by 2.

Answer:

Would the icon be the button or not? if so, you can use the code below:

<Button
android:id="@+id/buttonIdDoesntMatter"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="buttonName"
android:drawableLeft="@drawable/imageWillChange"
android:onClick="listener"
android:layout_width="fill_parent">

now if it's in the layout you can put the LinearLayout and set the layout_gravity="center" . However if your screen will have many elements this can be thought of when inflating the screen, then if you have a lot it may be better to use ConstraintLayout remembering that it is still in alpha.

Scroll to Top