CODEWITHSUNDEEP
androidxmlimageview
user1420042
user1420042

Reputation: 1709

How can I display two images side by side in Android?

I am trying to get my xml for my android app working but i have some problems. I am trying to display to equal sized images side by side in a linear layout. There has to be a margin between them , on both sides right and left, and on top.

How can I make such an xml file so that it is universal and usable for any screen size?

UPDATE: Here is my the extract of my xml file:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="fill_horizontal"
    android:gravity="center"
    android:orientation="horizontal" >

<ImageView
        android:id="@+id/area"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:contentDescription="@string/app_name"
        android:src="@drawable/area_selector"
        android:layout_gravity="left" 
        android:paddingTop="15dp"/>

    <ImageView
        android:id="@+id/volume"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:contentDescription="@string/app_name"
        android:src="@drawable/volume_selector"
        android:layout_gravity="left" 
        android:paddingTop="15dp" />

    </LinearLayout>

Upvotes: 5

Views: 8809

Answers (1)

Antrromet
Antrromet

Reputation: 15414

You need to provide equal weights to both the images as follows

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp"
        android:layout_weight="1"
        android:src="@drawable/input_cell" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_weight="1"
        android:src="@drawable/input_cell" />

</LinearLayout>

In your case use this

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal"
        android:gravity="center"
        android:orientation="horizontal" >

    <ImageView
            android:id="@+id/area"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:contentDescription="@string/app_name"
            android:src="@drawable/area_selector"
            android:layout_weight="1"
            android:layout_gravity="left" 
            android:paddingTop="15dp"/>

        <ImageView
            android:id="@+id/volume"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="wrap_content" 
            android:contentDescription="@string/app_name"
            android:src="@drawable/volume_selector"
            android:layout_gravity="left" 
            android:paddingTop="15dp" />

        </LinearLayout>

Upvotes: 11

Related Questions