user45678
user45678

Reputation: 1514

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>

Upvotes: 0

Views: 159

Answers (2)

Hariharan
Hariharan

Reputation: 24853

Try this..

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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:src="@drawable/back" />

    <TextView
        android:id="@+id/inboxtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/back"
        android:background="#5F717D"
        android:padding="10dp"
        android:text="Inbox"
        android:textSize="18dp" >
    </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="15dp"
        android:paddingTop="15dp" />

    <ImageView
        android:id="@+id/editheader"
        android:layout_width="2dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/edit"
        android:layout_marginLeft="3dp"
        android:background="#ffffff"
        android:paddingBottom="15dp"
        android:paddingTop="15dp" />

    <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_margin="3dp"
        android:background="@drawable/edit"
        android:text="Sync" />

    <ImageView
        android:id="@+id/deleteheader"
        android:layout_width="2dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/delete"
        android:layout_margin="3dp"
        android:background="#ffffff"
        android:paddingBottom="15dp"
        android:paddingTop="15dp" />

    <ImageButton
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="3dp"
        android:layout_marginBottom="3dp"
        android:layout_marginTop="3dp"
        android:background="@drawable/delete"
        android:text="Sync" />

</RelativeLayout>

Upvotes: 0

Vaibhav Agarwal
Vaibhav Agarwal

Reputation: 4499

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

Upvotes: 1

Related Questions