Properly align images and text in relative layout?

Question

I've a shop layout in which are three different sized images. To the right of them, there is text representing price. How can I align images and text under each other ? And put the middle of the screen between Image and text. Here is my layout:

<?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="match_parent" android:background="@drawable/podklad">

<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lives"
        android:focusable="false" android:background="@drawable/heart_image"
        android:layout_below="@+id/money" android:layout_centerHorizontal="true"/>
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/price1"
        android:textSize="30sp" android:textColor="#ff000000"
        android:layout_alignTop="@+id/lives" android:layout_toRightOf="@+id/lives"
        android:layout_toEndOf="@+id/lives"/>
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/money" android:layout_alignParentTop="true" android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" android:textSize="40dp" android:textColor="#ff000000"/>
<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/monstertoprightcolored"
        android:id="@+id/hardmode"
        android:layout_centerVertical="true" android:layout_centerHorizontal="true"/>
<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price2"
            android:textSize="30dp"
            android:textColor="#ff000000"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/hardmode"
            android:layout_toEndOf="@+id/hardmode"
            android:layout_above="@+id/price3"/>
<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/monsterbottomleftcolored"
        android:id="@+id/reversedmode"
        android:layout_alignParentBottom="true" android:layout_alignLeft="@+id/hardmode"
        android:layout_alignStart="@+id/hardmode"/>
<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price3"
            android:textSize="30dp"
            android:textColor="#ff000000"
            android:layout_marginTop="26dp"
            android:layout_below="@+id/hardmode"
            android:layout_toRightOf="@+id/price2"
            android:layout_toEndOf="@+id/price2"/>

score 1 · Answer 1 · edited May 23 '17 at 12:33

A TableLayout might work better in this case. Here's a start to what your layout would look like:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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"
    android:stretchColumns="*">

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:layout_gravity="right"
            android:id="@+id/money"
            android:textSize="40dp"
            android:textColor="#ff000000"
            tools:text="money" />
    </TableRow>

    <TableRow>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/lives"
            android:focusable="false"
            android:background="@drawable/heart_image"
            />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price1"
            android:textSize="30sp"
            android:textColor="#ff000000"
            tools:text="price1" />
    </TableRow>

    <TableRow>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/monstertoprightcolored"
            android:id="@+id/hardmode" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price2"
            android:textSize="30dp"
            android:textColor="#ff000000"
            tools:text="price2" />
    </TableRow>

    <TableRow>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/monsterbottomleftcolored"
            android:id="@+id/reversedmode" />
        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price3"
            android:textSize="30dp"
            android:textColor="#ff000000"
            android:layout_marginTop="26dp"
            tools:text="price3" />
    </TableRow>

</TableLayout>

Note that in order to "put the middle of the screen between Image and text", the two columns have to be equal in width. This is done by setting android:stretchColumns="*" in the TableLayout, and setting android:layout_width="0dp" and android:layout_weight="1" in the children of the TableRows.

See tablelayout - Set equal width of columns in table layout in Android for more info.

score 0 · Answer 2 · answered Feb 17 '15 at 18:18

0

You can use linear layouts for this. Image and text can be split vertically in a linear layout. Each of this linear layout can be placed horizontally. Can you add a screenshot of how your layout should look for better understanding.

answered Feb 17 '15 at 18:18

Durga Malleswari

186
2
9

score 0 · Answer 3 · answered Feb 24 '15 at 15:40

Here try this ,hope to help you, and i hope that i understand your problem correctly.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_centerHorizontal="true"
    android:gravity="center_horizontal"
    android:background="@drawable/ic_launcher">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lives"
        android:focusable="false"
        android:background="@drawable/ic_launcher"
        android:layout_below="@+id/money"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/price1"
        android:textSize="30sp"
        android:text="Text"
        android:textColor="#ff000000"
        android:layout_alignTop="@+id/lives"
        android:layout_toRightOf="@+id/lives"
        android:layout_toEndOf="@+id/lives" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/money"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textSize="40dp"
        android:text="Text"
        android:textColor="#ff000000" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        android:id="@+id/hardmode"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/price2"
        android:textSize="30dp"
        android:textColor="#ff000000"
        android:text="Text"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/hardmode"
        android:layout_toEndOf="@+id/hardmode"
        android:layout_above="@+id/price3" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        android:id="@+id/reversedmode"
        android:layout_alignParentBottom="true"
        android:layout_alignLeft="@+id/hardmode"
        android:layout_alignStart="@+id/hardmode" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/price3"
        android:textSize="30dp"
        android:textColor="#ff000000"
        android:layout_marginTop="26dp"
        android:layout_below="@+id/hardmode"
        android:text="Text"
        android:layout_toRightOf="@+id/price2"
        android:layout_toEndOf="@+id/price2" />
</LinearLayout>

Properly align images and text in relative layout?

3 Answers3