Search code examples
androidxmlandroid-relativelayoutandroid-imagebutton

Imagebuttons won't align on the right next to eachother


I'm dynamically injecting rows in a container of a fragment. But I just can't seem to get the three image buttons aligned to the right, next to each other.

Anyone an idea?

Fragment layout:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scenesScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/switchLayout"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/scenesTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/switch_title"
            android:text="@string/title_switches" />

        <LinearLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="vertical">
        </LinearLayout>

        <TextView
            android:id="@+id/statusText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"/>
    </LinearLayout>
</ScrollView>

My row 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="wrap_content"
    android:paddingBottom="10dp">

    <TextView
        android:id="@+id/switch_name"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/switch_row_name"
        android:text="Switch name"/>

    <TextView
        android:id="@+id/switch_lastSeen"
        android:layout_below="@id/switch_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/switch_row_lastSeen"
        android:text="@string/last_seen"/>

    <TextView
        android:id="@+id/switch_status"
        android:layout_below="@id/switch_lastSeen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/switch_row_level"
        android:text="@string/status"/>

    <ImageButton
        android:id="@+id/switch_button_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_arrow_up"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />

    <ImageButton
        android:id="@+id/switch_button_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_stop"
        android:layout_toLeftOf="@+id/switch_button_down"
        android:layout_toStartOf="@+id/switch_button_down"
        android:layout_centerVertical="true" />

    <ImageButton
        android:id="@+id/switch_button_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_arrow_down"
        android:layout_toLeftOf="@+id/switch_button_up"
        android:layout_toStartOf="@+id/switch_button_up"
        android:layout_centerVertical="true" />

</RelativeLayout>

How the row looks on my phone (the same on a API 19 AVD): Borked images

How Android Studio, when designing, shows the row: Layout as in the designer


Solution

  • try this

    <?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"
    android:paddingBottom="10dp">
    
    <TextView
        android:id="@+id/switch_name"
        style="@style/switch_row_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="Switch name" />
    
    <TextView
        android:id="@+id/switch_lastSeen"
        style="@style/switch_row_lastSeen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/switch_name"
        android:text="@string/last_seen" />
    
    <TextView
        android:id="@+id/switch_status"
        style="@style/switch_row_level"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/switch_lastSeen"
        android:text="@string/status" />
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:orientation="horizontal">
    
        <ImageButton
            android:id="@+id/switch_button_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_arrow_up" />
    
        <ImageButton
            android:id="@+id/switch_button_stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_stop" />
    
        <ImageButton
            android:id="@+id/switch_button_down"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_arrow_down" />
    </LinearLayout>
    </RelativeLayout>