CODEWITHSUNDEEP
androidpadding
Eduardo
Eduardo

Reputation: 7141

ImageViews aren't aligned vertically when using padding

Im trying to get two ImageViews side by side with a gap around the image. Ive been using Padding, Margin etc and all have had the same effect (See Image Below)

One image is shifted upwards

as you can see the image on the right is shifted upwards, how do i stop this?

Here's the layout file im using:

<?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" >

    <!-- Top Row -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/tab_headlines"
            android:src="@drawable/headlines"
            android:layout_margin="5sp"
            />
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/tab_headlines"
            android:src="@drawable/headlines"
            />

    </LinearLayout>

I am going to be using more rows of images hence the extra LinearLayout

Upvotes: 2

Views: 70

Answers (3)

Tarsem Singh
Tarsem Singh

Reputation: 14199

To fix Vertical alignment :

Use android:layout_height="match_parent" in your ImageView

by using android:layout_height="match_parent" inside ImageView it will be matched to its parent your LinearLayout which is android:layout_height="wrap_content"

Now Question arises why the height will be same for both ImageViews ?

Reason your parent LinearLayout's Height will be automatically chosen from ImageView Whose height is greater because of android:layout_height="wrap_content" in your LinearLayout !

and by using android:layout_height="match_parent" you will be using same height for ImageView whose height is smaller !

To Fix Horizontal alignment :

use android:layout_weight="equal weight value for btoh"

change your code to

   <ImageView 
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:contentDescription="@string/tab_headlines"
        android:src="@drawable/headlines"
        android:layout_margin="5sp"
        />
    <ImageView 
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:contentDescription="@string/tab_headlines"
        android:src="@drawable/headlines"
        />

Upvotes: 1

JiTHiN
JiTHiN

Reputation: 6588

Use layout_weight to divide your layout equally. Try the following code:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- Top Row -->

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

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="3dp"
            android:layout_weight="1"
            android:contentDescription="@string/tab_headlines"
            android:src="@drawable/headlines" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="6dp"
            android:layout_weight="1"
            android:contentDescription="@string/tab_headlines"
            android:src="@drawable/headlines" />
    </LinearLayout>
</LinearLayout>

Also, never use sp for specifying layout dimensions. Use dp instead.

Upvotes: 2

Hariharan
Hariharan

Reputation: 24853

You have given layout_margin for left side image and didn't give for the right side image.That's where the issue lies. If you want only two images in a row and if the image size is same for the both then you can make use of layout_weight attribute and give padding for space in between them. so,try this. It will work. 

    <!-- Top Row -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
             android:layout_weight="0.5"
            android:contentDescription="@string/tab_headlines"
            android:src="@drawable/headlines"
            android:padding="3dp"
            />
        <ImageView 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
           android:layout_weight="0.5"
            android:contentDescription="@string/tab_headlines"
            android:src="@drawable/headlines"
           android:padding="3dp"
            />

    </LinearLayout>

Upvotes: 1

Related Questions