CODEWITHSUNDEEP
androidandroid-layoutandroid-imageview
sai
sai

Reputation: 558

Showing Images on a layout

I am having this code and require the following position of images.But as I used Relative Layout, & the Images are not aligning properly in all the devices, Some are overlapping the images. Edit: Main Requirement: In my requirement, I want to click the Green Cap. So, if I press red cap , that ImageView will be disappeared.So, the remaining two images must be at their same place.So If I use layout_weight, it is covering the remaining two images to the remaining space. How can I get the best output for this requirement.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#657383"
android:orientation="horizontal" >



<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">


<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:contentDescription="@string/app_name" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:contentDescription="@string/app_name" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:contentDescription="@string/app_name" />


Model Image

Thank You.

Upvotes: 0

Views: 131

Answers (5)

MaciejG&#243;rski
MaciejG&#243;rski

Reputation: 22232

If you want images not to overlap, you have to use smaller images on devices with smaller screen. You may use drawable-large-*dpi and xlarge-dpi or drawable-sw**dp-*dpi folders for bigger images and drawable-*dpi for phones.

Btw. You don't need LinearLayout wrapping everything.

Upvotes: 0

Neoh
Neoh

Reputation: 16174

The RelativeLayout is redundant. You can just set the linear layout to center:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:background="#657383"
    android:orientation="horizontal" >
    <ImageView
        ...

Note the extra lines android:layout_gravity="center" and android:gravity="center"

Upvotes: 0

Prannoy Tank
Prannoy Tank

Reputation: 110

You can use

android:layout_toRightOf="" // specify id of image-view
android:layout_toLeftOf=""  //  specify id of image-view

in the values field u need to specify the id of image view

Upvotes: 1

Arun C
Arun C

Reputation: 9035

Try this 

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#657383"
    android:orientation="horizontal" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher"
        android:contentDescription="@string/app_name" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:clickable="true"
         android:layout_weight="1"
          android:src="@drawable/ic_launcher"
        android:contentDescription="@string/app_name" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_weight="1"
         android:src="@drawable/ic_launcher"
        android:contentDescription="@string/app_name" />

    </LinearLayout>

Upvotes: 0

stinepike
stinepike

Reputation: 54742

you can use LinearLayout with android:layout_weight attribute. set the layout_weight attribute same for all ImageView. By this all ImageView will take same space. Also use android:scaleType="fitXY"

for example if I consider editing your code.. .( just writting here so there may be minor mistakes)

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:contentDescription="@string/app_name" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_centerInParent="true"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:contentDescription="@string/app_name" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"       
    android:layout_width="0dip"
    android:layout_weight="1"
    android:scaleType="fitXY"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:contentDescription="@string/app_name" />

Upvotes: 1

Related Questions