Develop Reference

Controlling nested ViewGroup size in a RelativeLayout: with wrap_content is still matching parent

I have a widget that uses PercentRelativeLayout to position 4 ImageViews inside it. I need the percent feature because I’m putting the images along the 4 sides of the box but with different relative sizes: the top child takes up ~60 percent of the height. I have previewed this layout by itself and it works great, no problem. This widget does wrap_content for w and h (w I don’t care about so much, but h is important, as you will see.)
I need this widget inside a larger layout. Now I have another parent RelativeLayout. This layout should contain the described widget at the top, then some buttons below it, in a mostly linear fashion: |--(group widget)--(text button)--(image button)—-|, where the ‘|’ indicates it should be snug to the parent. (The reason this is a Relative is that I want to float another view at the bottom right.)
So the goal is: this parent layout should be sized to some predefined size (basically the screen, although in my full code there is more above this level as well - but my problem occurs just isolating at this level), the 2 buttons should calculate their natural size and use it, then the PercentRelativeLayout at the top should take the ‘remaining’ height and use that for its children % sizing.
In practice, as the screenshot shows (from the layout preview tool) - the PercentRelativeLayout sucks up all the size.
In short, can you pin together a sequence of views in a relative layout and have a variable child? In iOS I would pin the first view to the parent top, the last view to the parent bottom, and everything to the thing above it, the buttons have their intrinsic size and then my mystery widget sucks up the remainder.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f2dce8ff"
android:layout_marginTop="8dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
xmlns:tools="http://schemas.android.com/tools"
android:animateLayoutChanges="true"
android:id="#+id/matchPlay">
<ImageView
android:src="#drawable/model_2"
tools:background="#954f47"
app:layout_heightPercent="59%"
app:layout_aspectRatio="100%"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView1"
android:scaleType="centerInside" />
<ImageView
android:src="#drawable/model_2"
tools:background="#ff0000"
app:layout_heightPercent="20%"
app:layout_aspectRatio="100%"
app:layout_marginTopPercent="2%"
android:layout_below="#id/avatarView1"
android:layout_alignParentLeft="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView2"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#00ff00"
app:layout_heightPercent="20%"
app:layout_aspectRatio="100%"
app:layout_marginTopPercent="2%"
android:layout_below="#id/avatarView1"
android:layout_alignParentRight="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView3"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#0000ff"
app:layout_heightPercent="22%"
app:layout_aspectRatio="100%"
android:layout_below="#id/avatarView2"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView4"
android:scaleType="centerCrop" />
</android.support.percent.PercentRelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/matchplay_add_shout"
android:id="#+id/shoutButton"
android:enabled="false"
android:layout_centerHorizontal="true"
android:layout_below="#id/matchPlay" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/submitButton"
android:src="#drawable/matchplay_submit"
android:layout_centerHorizontal="true"
android:layout_below="#id/shoutButton"
android:minWidth="50dp"
android:contentDescription="#string/matchplay_send_contentdesc" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/passButton"
android:src="#drawable/matchplay_pass"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:contentDescription="#string/matchplay_pass_contentdesc" />
Edit: I updated this code to not use alignParentBottom, thinking that was the key issue; I instead used alignParentTop. No change. ALso tried using vertical LinearLayout at the root. :(
By the way the image group widget will be a PercentRelativeLayout subclass, so if I need to make some magic happen with some overrides there, I can do that.

I learned some things about the RelativeLayout beast:
Child size and location seem to go hand in hand. There's no attempt to compute sizes separately from location.
RelativeLayout doesn't seem to do second pass for measuring. It's quite greedy: when it reaches a given child to decide where to put it, it makes a decision then and there. Maybe there are some situations it does, I'm not sure, but they're probably not common.
Last, the thing that ties it all together: how you specify the relations matter, because RL computes a dependency order for width and height; since things that are depended on are sized first, using a greedy property from above, if that child does not have a fixed size it will suck up whatever remaining space the RL offers it. Therefore, since I arranged things to depend on what's above and matchPlay was the root, therefore matchPlay was sized first.
Thus I just made the dependencies backward, where things were pinned to the bottom, thus matchPlay was last in the dependency chain. The strange but functioning XML is below. Very strange aspect of implementation, and further the documentation does not state this lack of associativity in the relative layout_ attrs. (Clearly it should, because it can greatly affect how you use the relative attrs!)
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f2dce8ff"
android:layout_marginTop="8dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/matchplay_add_shout"
android:id="#+id/shoutButton"
android:layout_above="#+id/submitButton"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:enabled="false" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/submitButton"
android:src="#drawable/matchplay_submit"
android:minWidth="50dp"
android:contentDescription="#string/matchplay_send_contentdesc" />
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/shoutButton"
xmlns:tools="http://schemas.android.com/tools"
android:animateLayoutChanges="true"
android:id="#+id/matchPlay">
<ImageView
android:src="#drawable/model_2"
tools:background="#954f47"
app:layout_heightPercent="60%"
app:layout_aspectRatio="100%"
app:layout_marginBottomPercent="2%"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView1"
android:scaleType="centerInside" />
<ImageView
android:src="#drawable/model_2"
tools:background="#ff0000"
app:layout_heightPercent="23%"
app:layout_aspectRatio="100%"
android:layout_below="#id/avatarView1"
android:adjustViewBounds="false"
android:id="#+id/avatarView2"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#00ff00"
app:layout_heightPercent="23%"
app:layout_aspectRatio="100%"
android:layout_below="#id/avatarView1"
android:layout_alignParentRight="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView3"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#0000ff"
app:layout_heightPercent="23%"
app:layout_aspectRatio="100%"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView4"
android:scaleType="centerCrop" />
</android.support.percent.PercentRelativeLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/passButton"
android:src="#drawable/matchplay_pass"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:contentDescription="#string/matchplay_pass_contentdesc" />

Android Studio: Images behind other images

What I am trying to do seems very basic in theory, but cannot find any information on this on the web. I have a series of clickable imagebuttons, containing images. I would like it so that when a user clicks on one of these imagebuttons, it becomes highlighted with a simple border.
To achieve this, I have created a basic solid-colour 62x62 pixel image and wish to place it -behind- my original 60x60 imagebutton. This will create the illusion of a border. My plan is to set it to non-visible by default and then have the code set it to visible on click. Sounds straight-forward.
However, in my layout, the solid-colour image always sits on top of the original image, and I cannot find any way of sending it behind. I would rather not do this in code, I am sure this is a layout issue (but will set it in code if I absolutely must).
Relevant section of layout, where the ImageView needs to sit behind the player 1 ImageButton:
<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:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
android:paddingBottom="20dp" tools:context=".MainActivity"
android:id="#+id/Form_PlayerSelection"
android:background="#drawable/dark_wood">
<ImageButton
android:id="#+id/btnPlayer1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="15dp"
android:layout_marginTop="50dp" />
<ImageView
android:id="#+id/p1border"
android:layout_width="62dp"
android:layout_height="62dp"
android:src="#drawable/selectborder"
android:clickable="false"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="13dp"
android:layout_marginTop="48dp"/>
<ImageButton
android:id="#+id/btnPlayer2"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="1dp"
android:scaleType="fitXY"
android:layout_marginLeft="85dp"
android:layout_marginTop="50dp" />
</RelativeLayout>

Each child is added in order and to the top of the ViewGroup. So, the bottom element should be your first child.

How can I evenly space my ImageViews in a RelativeLayout

I had a Android application built in which I had 3 ImageViews placed horizontally across a LinearLayout, they were placed with a android:layout_width="0dp" and android:layout_weight="1" such that they had an even spread in the layout.
Now I have to switch to use a RelativeLayout (because I want to overlap another image and that can't be done with a LinearLayout) so I want to start with replicating the same effect of having the 3 ImageViews evenly spread/scaled across the parent layout, but I'm not sure how to achieve this.
I feel like I need to make use of the android:scaleType... maybe center crop:
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Which sounds good but I can't seem to get it to work right... Any thoughts on how I would achieve this even spread of ImageViews across my RelativeLayout?
Snippet of code right now:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:tag="circle"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:tag="square"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragcircle"
android:adjustViewBounds="false"
android:src="#drawable/square" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:tag="triangle"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragsquare"
android:adjustViewBounds="false"
android:src="#drawable/triangle" />
Note: I can't find a question with the same constraints as this one on SO. There are a number of questions like:
Android: how evenly space components within RelativeLayout?
and
android RelativeLayout, equal spacing?
But if you check out the details you'll see that they are people who have not considered the LinearLayout as an option for equal spacing and switching layout types ends up being the solution. I have, I was using it, but it does not work for me because I need to overlap an image:
Note the example, I have 3 ImageViews with basic shapes, but I also have a 4th ImageView (it starts hidden) which is overlapping the middle one. This is why I must use a RelativeLayout

I think you're going to want to go back to your original LinearLayout to meet all of your needs here.
If the size of your fourth image must match one of your existing image then either you'd want to create a resource that is a composite of the two images to swap to when it needs to be overlaid or replace your center ImageView with a RelativeLayout or FrameLayout that contains the ImageView. When you need to add the fourth image, add it to that layout.
Something like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="circle"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<FrameLayout
android:id="#+id/centerimagewrapper"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/dragsquare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tag="square"
android:src="#drawable/square" />
<ImageView
android:id="#+id/arrow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/arrow"
android:visibility="invisible" />
</FrameLayout>
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="triangle"
android:layout_height="wrap_content"
android:src="#drawable/triangle" />

You could hide the icon you want to place on existing images and keep your previous LinearLayout to achieve this. Each component of your LinearLayout would be a custom layout (inflated):
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
>
<ImageView
android:id="#+id/img"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:src="img1_src"
/>
<ImageView
android:id="#+id/imgOverlap"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:src="img2_src"
android:visibility="gone"
/>
</RelativeLayout>
It appears not possible to use "layout_weight" in a RelativeLayout.
You could also consider a GridView and set its number of columns; each item of the GridView would be the inflated layout above.

you could also do it programatically and tell them to be 33% of the screen width. Look at DisplayMetrics and the attributes of each ImageView if you want to achieve this.

Try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:scaleType="fitXY"
android:src="#drawable/circle"
android:tag="circle" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/triangle"
android:scaleType="fitXY"
android:tag="triangle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/dragtriangle"
android:layout_toRightOf="#id/dragcircle"
android:src="#drawable/square"
android:scaleType="fitXY"
android:tag="square" />
</RelativeLayout>

automatically resize ImageButtons in LinearLayout

Summary: I want a horizontal row of ImageButtons to scale down evenly to fit in the screen size.
I have a row of ImageButtons at the top of the screen. A left-aligned logo ImageButton and then right-aligned ImageButtons for various actions.
Yes, that does sound a lot like a Honeycomb/ICS Action Bar, but the code is targeted for Froyo, so I need to implement the design in 2.2-compatible layouts.
I programmatically detect when I'm on a 7" screen or larger and switch to larger images for the ImageButtons (as the drawable-xlarge directory only works for 10" and up, and drawable-large works for 4" and up).
This works great on a phone or on a 10" tablet. However, on a 7" tablet, the images are too large for the space in portrait mode (the app is locked to portrait mode).
I have tried many different approaches to making the images scale down, as I'd rather not use yet another set of images just for 7" tablets. But the images are not spaced properly, or scale at different levels, or only some of the images appear on the screen. I've used RelativeLayout, LinearLayout, android:weightSum, setting the images as background images, as src images, etc.
EDIT: Another quirk I noticed in my experimentation was that if I set the same layout_weight, the layout worked, forcing each item to have the same width. If I want some items to have different widths--which is necessary in this case, as the first button needs to be substantially wider--then the layout breaks when I set a layout_weight that doesn't match the others. Only one or two of the items appear on screen, the rest presumable being pushed off.
Here's the layout I'm using. This is my best so far--it works great on 10" tablets and phones, and is almost tolerable on 7" tablets. But the logo--which should be the same height as the buttons and about 2.5 times wider--is noticeably taller than the other buttons. Any suggestions on improving the layout?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/actionBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:padding="5dip"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#drawable/action_bar_bg"
>
<ImageButton
android:id="#+id/logoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/save_logo_03"
android:padding="2dip"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>
<View
android:id="#+id/spacer"
android:layout_width="50dip"
android:layout_height="1dip"
android:layout_weight="1"
android:visibility="invisible"
/>
<ImageButton
android:id="#+id/listButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/list_button"
android:background="#null"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/mapButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/map_button2"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/ltoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/lto_button"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/searchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/search_button"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
</LinearLayout>

Unfortunately, in the end I did have to programmatically change the button sizes depending on the size of the screen.
My final layout looked like this (sanitized):
<?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:layout_weight="0"
android:padding="5dip"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#drawable/action_bar_bg"
>
<ImageButton
android:id="#+id/logoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:adjustViewBounds="true"
android:src="#drawable/logo"
android:scaleType="centerInside"
/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button1"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button2"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button3"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button4"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>
</LinearLayout>
Notice the empty View that fills up available space, pushing the other buttons over to the right side of the screen.
In the code, I check the screen size. If it seems to be >= 7", then I switch to larger images.
If it seems to be >=7" but < 9", then I programmatically change the size of the images--and that I had to experiment with to come up with just the right number for it to work. If I had more images or they changed, I would have to repeat it. I'm not proud of such an inflexible solution, but I couldn't find anything else that worked.

This is what I've got:
In your specific case, we can say that your app layout and buttons size are under dependecy of:
The mobile device screensize/resolution;
The number of buttons in the
row;
I recommend 2 approaches to you:
Implementing your layout with RelativeLayout and weight tags. Flexible layouts can be made very easy with these ones;
Programatically define your button sizes using DisplayMetrics class, something like the snippet in the end of this post, and use an extra .xml file (say integer.xml) where you can define a constant value for your number of buttons;
In this snippet, dm is a structure that holds your device resolutions.
DisplayMetrics dm = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(dm);
Hope it helped you! :)

Android: layout issue with Image Views

I am keeping three image views with 3 different images of the same height. My code is as mentioned below..
<LinearLayout
android:id="#+id/LinearLayout06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left" android:layout_gravity="center_vertical|center_horizontal">
<ImageView
android:id="#+id/stopServiceButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#null"
android:paddingRight="5dp"
android:src="#drawable/stop_service_button_selector" />
<ImageView
android:id="#+id/calibrateButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#null"
android:padding="5dp"
android:src="#drawable/calibrate_button_selector" />
<ImageView
android:id="#+id/doneButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#null"
android:padding="5dp"
android:src="#drawable/done_button_selector" />
</LinearLayout>
In large layouts i was able to manage these images(i dont have to use weight parameter for it) but for small layout i have to keep the weight parameter as one to fit them in the screen, but then the height changes as shown below.
Can someone help me out in this ?

the android:adjustViewBounds="true" preserves the aspect ratio of the images. since the width is to wrap content, the height gets reduced accordingly.

To reduce the blurring effect that you mentioned in your comment, you can try setting android:filter the attribute to the drawables.