Develop Reference

How to achieve overlapping elements with LinearLayout and RelativeLayout

I am trying to use LinearLayout to achieve a layout with several images whose horizontal position are evenly distributed in a certain container of width [A]. As the width of the container shrinks, the images are supposed to overlap each-other.
<LinearLayout
android:orientation="horizontal"
android:layout_width="128dp" <--- [A]
android:layout_height="64dp"
>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content" <---- [B]
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:srcCompat="#drawable/ic_star_black_24dp"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:srcCompat="#drawable/ic_star_black_24dp"
/>
</RelativeLayout>
</LinearLayout>
The layout above evenly distributes the images in the container width [A]:
However when changing [A] to some small value that should make the images overlap, they are scaled down to make them fit the width of their parent RelativeLayout. Which is odd, because I explicitly asked a width of wrap_content at [B]. I don't want the images to be scaled.
Any ideas how I could make this work?
(The reason why I want the images to overlap is because it's part of the intended choreography during a transition. Their final position will be a non-overlapping one.)

Just found the solution myself. I found android:scaleType, which controls the way how images are scaled with respect to their size. However, using android:scaleType did not have any effect at all until I also changed app:srcCompat to android:src. I have no clue why this is so, but the following works now as expected:
<LinearLayout
android:orientation="horizontal"
android:layout_width="128dp"
android:layout_height="64dp"
>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_star_black_24dp" <--- !!
android:scaleType="center" <--- !!
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_star_black_24dp" <--- !!
android:scaleType="center" <--- !!
/>
</RelativeLayout>
</LinearLayout>

android imageView scale

I have an ImageView which is populated from database (the image comes from database). in the database i have images both portrait and landscape!! how can i adjust the imageView to scale it self according to the image width and height. I have tried many ways but no result! any help please!!!!
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/slideshow"
android:orientation="horizontal"
android:padding="0dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginRight="5dp"
android:id="#+id/slide1"
android:src="#drawable/ddd"
/>

Try this code. adjustViewBounds attribute makes the ImageView the same size as image that you put in it.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true" />
If you need specific width or height change the wrap_content value.

Fit imageView and textView in one small layout in Android

I have a tiny linearlayout that I have to fit an imageView and a textView in. I know this is a terrible way to make an app. I'm just trying to test to see if this would work. The code below only shows the imageview and not the textView. Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="90dp"
android:layout_height="90dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:src="#drawable/my_icon" />
</LinearLayout>
</LinearLayout>

The answer ended up being to give the textView a weight of 0 and the imageView a weight of 1. That way, textView showed up perfectly but only took as much space as it needed, and the imageView took up the rest of the space. Perfect1

It depends what you want it to look like. If you want the LinearLayout to be split in half, then in your ImageView set
android:layout_weight="1"
The views inside the LinearLayout get space in proportion to their layout_weight so if your ImageView has layout_weight="0" it will get 0 proportion of the View.

You should use weight like that:
android:layout_weight="2" in LinearLayout
and layout_weight="1" in imageView and textView
so that both of your view will occupy half of space

Please try this
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/my_icon" />

Set android background to center crop, but right aligned?

I have a background image that I would like to 1) fill the vertical space, regardless of whether the image's width is greater than the width of the parent, and 2) align the right edge of the image with the right edge of the parent.
Currently scaleType="centerCrop" is giving me (1) but not (2); it centers the image horizontally. Does anyone know how to get it to right-align? Thanks!
EDIT: Tried adding android:layout_alignParentRight="true" to both the relative layout and image view, with no effect.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="center" >
<ImageView android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="#drawable/bg"/>
<LinearLayout
android:id="#+id/fg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
...

You can use
android:layout_alignParentRight="true"
for the Imageview

add these attributes
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
<ImageView
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="#drawable/backg_carbon" >
</ImageView>

I think your issue is that the viewbounds do not adjust to the size of the actual image and fill up the width for some reason. Best thing is to check if setting
android:adjustViewBounds to true helps (with the gravity to right of course).
<ImageView android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true" //This is the added line.
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="#drawable/bg"/>

Imageview, last image always bigger

I have a problem with my ImageView. The icons all display correct size, except the last one is always bigger in my ListView.
Can somebody please help?
<?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/imgIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="6dip"
android:src="#drawable/icon"
android:gravity="center_vertical" />
<TextView android:id="#+id/naam"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#FFFF00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/waarde"
android:textColor="#ffffffff"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/naam"
android:layout_marginLeft="2dip"/>
</LinearLayout>
If i change the ImageView as follows, it is ok but too big:
android:layout_height="wrap_content"
Edit: Problem solved, i needed to reduce the TextSize in the TextViews

is this you list item layout?
android:layout_height="fill_parent"
in your ImageView is probably what is doing it - you likely need to fix the height somewhere otherwise fill_parent can push the height up if its not specified somewhere higher up in the view hierarchy - generally i fix the height it the list item root element
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
or whatever you item height should be.