CODEWITHSUNDEEP
androidandroid-layout
AppleGrew
AppleGrew

Reputation: 9570

Why in my layout I am unable to align the ImageView and TextView in a line?

I have the following layout:-

<?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="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="@dimen/default_margin"
    android:layout_marginBottom="@dimen/default_margin"
    android:layout_marginLeft="@dimen/default_dbl_margin"
    android:layout_marginRight="@dimen/default_dbl_margin">

    <ImageView
        android:id="@+id/lblIcon"
        android:src="@drawable/ic_status_confirmed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="@dimen/default_dbl_margin"
        android:layout_marginTop="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/relativeLayout">

        <TextView
            android:id="@+id/lblFirstLine"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="FirstLine"
            android:singleLine="true"
            android:ellipsize="end"
            android:textAppearance="?android:attr/textAppearanceMedium"/>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_below="@+id/lblFirstLine"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="@dimen/default_margin">

            <ImageView
                android:layout_width="14sp"
                android:layout_height="14sp"
                android:id="@+id/imgTimeIcon"
                android:src="@drawable/ic_action_time" />

            <TextView
                android:id="@+id/lblSecondLine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2:00pm"
                android:textSize="14sp"
                android:layout_gravity="center_vertical"
                android:textColor="@android:color/secondary_text_dark" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/newIndicator"
            android:src="@drawable/new_indicator"
            android:layout_marginRight="@dimen/default_quad_margin"/>

        <ImageButton
            android:id="@+id/btnChat"
            android:src="@drawable/ic_action_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

However the layout looks like below:

Bad layout

Notice that the time TextView is slightly displaced downwards. I don't understand why?

Upvotes: 1

Views: 88

Answers (4)

maveric
maveric

Reputation: 219

i Hope it will help

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center_vertical">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:id="@+id/imgTimeIcon"
            android:gravity="center"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/lblSecondLine"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:text="2:00pm"
            android:textColor="@android:color/secondary_text_dark"
            android:textSize="14sp" />

    </LinearLayout>

Upvotes: 1

Xcihnegn
Xcihnegn

Reputation: 11597

Use RelativeLayout for the ImageView and TextView:

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@+id/lblFirstLine"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="@dimen/default_margin">

        <ImageView
            android:layout_width="14sp"
            android:layout_height="14sp"
            android:id="@+id/imgTimeIcon"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_action_time" />

        <TextView
            android:id="@+id/lblSecondLine"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2:00pm"
            android:textSize="14sp"
            android:layout_toRightOf="@+id/imgTimeIcon"
            android:layout_centerVertical="true"
            android:textColor="@android:color/secondary_text_dark" />
    </LinearLayout>

</LinearLayout>

Upvotes: 0

Droidekas
Droidekas

Reputation: 3504

specify gravity for the parent linear layout and change the image width and height from sp to dp

<LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_below="@+id/lblFirstLine"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="@dimen/default_margin">

            <ImageView
                android:layout_width="14dp"
                android:layout_height="14dp"
                android:id="@+id/imgTimeIcon"
                android:src="@drawable/ic_action_time" />

            <TextView
                android:id="@+id/lblSecondLine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2:00pm"
                android:textSize="14sp"
                android:textColor="@android:color/secondary_text_dark" />
        </LinearLayout>

    </LinearLayout>

Upvotes: 1

hrskrs
hrskrs

Reputation: 4490

Adding android:layout_gravity="center_vertical" to android:id="@+id/imgTimeIcon"" ImageView should solve your problem

Also don't use sp except on fonts. Use dpinstead

Instead of:

                <ImageView
                android:layout_width="14sp"
                android:layout_height="14sp"
                android:id="@+id/imgTimeIcon"
                android:src="@drawable/ic_action_time" />

Use:

               <ImageView
                android:layout_width="14dp"
                android:layout_height="14dp"
                android:id="@+id/imgTimeIcon"
                 android:layout_gravity="center_vertical"
                android:src="@drawable/ic_action_time" />

Upvotes: 0

Related Questions