Search code examples
androidlayoutalignment

Android alignment issues for different screens


I have an header in which i have many items, currently i'm aligning somehow using margins and paddings, but i believe that is not right way because when i test on other screens it fails. Is there any better way to design this. Below is screenshot and code

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0a2436"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerInParent="true"
            android:layout_marginLeft="0dip"
            android:src="@drawable/back" />

        <TextView
            android:id="@+id/inboxtext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerInParent="true"
            android:layout_marginLeft="34dip"
            android:layout_toRightOf="@id/back"
            android:background="#0a2436"
            android:paddingBottom="10dip"
            android:paddingTop="10dip"
            android:text="Inbox"
            android:textSize="18sp" >
        </TextView>

        <ImageView
            android:id="@+id/inboxheader"
            android:layout_width="2dip"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerInParent="true"
            android:layout_marginLeft="95dip"
            android:layout_toRightOf="@id/windowtitle"
            android:background="#ffffff"
            android:paddingBottom="15dip"
            android:paddingTop="15dip" />

        <ImageView
            android:id="@+id/editheader"
            android:layout_width="2dip"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:layout_marginRight="130dip"
            android:background="#ffffff"
            android:paddingBottom="15dip"
            android:paddingTop="15dip" />

        <ImageButton
            android:id="@+id/edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:layout_marginRight="65dip"
            android:background="@drawable/edit"
            android:text="Sync" />

        <ImageView
            android:id="@+id/deleteheader"
            android:layout_width="2dip"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:layout_marginRight="65dip"
            android:background="#ffffff"
            android:paddingBottom="15dip"
            android:paddingTop="15dip" />

        <ImageButton
            android:id="@+id/delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:background="@drawable/delete"
            android:text="Sync" />
    </RelativeLayout>

Solution

  • Try this code

    <ImageView
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:layout_marginLeft="0dip"
        android:src="@drawable/ic_launcher" />
    
    <TextView
        android:id="@+id/inboxtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/back"
        android:background="#0a2436"
        android:paddingBottom="10dip"
        android:paddingTop="10dip"
        android:text="Inbox"
        android:textSize="18sp" >
    </TextView>
    
    <ImageView
        android:id="@+id/inboxheader"
        android:layout_width="2dip"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginRight="5dp"
        android:layout_toRightOf="@+id/inboxtext"
        android:background="#ffffff"
        android:paddingBottom="15dip"
        android:paddingTop="15dip" />
    
    <ImageView
        android:id="@+id/editheader"
        android:layout_width="2dip"
        android:layout_height="wrap_content"
                android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/edit"
        android:layout_marginLeft="3dp"
        android:background="#ffffff"
        android:paddingBottom="15dip"
        android:paddingTop="15dip" />
    
    <ImageButton
        android:id="@+id/edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/deleteheader"
        android:layout_marginLeft="3dp"
        android:background="@drawable/ic_launcher"
        android:text="Sync" />
    
    <ImageView
        android:id="@+id/deleteheader"
        android:layout_width="2dip"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/delete"
        android:layout_marginLeft="3dp"
        android:background="#ffffff"
        android:paddingBottom="15dip"
        android:paddingTop="15dip" />
    
    <ImageButton
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@drawable/ic_launcher"
        android:text="Sync" />
    

    Never hardcode value if you want to mak app compatible with multiple screen. Please change icon image accordingly