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>
Related
In my Android app, I want to create a scrollable grid of images that have the same width/height. I don't want to use GridView because there will not be that many images. So far, I have:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/food"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/music" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/offcampus"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/sports" />
</LinearLayout>
</LinearLayout>
</ScrollView>
It is very close to what I want to achieve, but the second LinearLayout (the one with the layout_height of 0dp) causes the first two ImageButtons to take up the majority of the screen, so that the user has to scroll a lot to see the next two ImageButtons. In other words, there is way too much space between "rows" of images. Is there any way I can fix this?
I attached a picture in case there was confusion.
Thanks for your help.
Check if the extra space is due to the LinearLayout being too tall or if the ImageButtons themselves are. You can use "Dump View Hierarchy" button in the ADT in Eclipse's Devices view.
I suspect it's the ImageButtons using the images' original height. See if setting android:adjustViewBounds on the ImageButtons help with the issue. See reference: http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
I'm trying to make a simple clock/stopwatch app. In my overall vertical linear layout, I have a relative layout followed by a button. The relative layout has several imageviews stacked on each other in order to produce the clock.
I noticed, however, that the relative layout, as well as the imageviews themselves, take up way too much space in the linear layout. The clock pieces are SQUARE, so why is Eclipse insisting that it is a long vertical rectangle? My button at the bottom doesn't even show if I don't use weights. (But strangely enough, it shows if it is above the relative layout.)
I've tried everything I could: Set the height of items in relative layout to wrap_content, as well as the relative layout itself. I tried using weights, by giving the relativelayout a weight of 0 and the button 1, and then setting their layout_heights respectively to 0dp as needed. Still no go. There is a lot of room left for other things, and I'd like for the clock's parent layout to wrap itself around just the content.
What is going on here? Please see attached image for details. Code is attached below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/tiling_rules"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="ContentDescription" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clock" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hour" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/min" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sec" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bell" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="Test" />
It turns out that all I needed was to add:
android:adjustViewBounds="true"
to every ImageView! Now the clock pieces' bounds are "wrapped" around the content, even though setting wrap_content in its layout didn't work. Thanks for the suggestions though!
Try using a RelativeLayout as your main layout. This way you can make the button show at the bottom of the screen. Then if you need, use a separate layout for the clock pieces within the main layout
Kinda like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ContentDescription" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clock" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hour" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/min" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sec" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bell" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:text="Button" />
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)
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
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.
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>
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"
/>
I have a horizontal LinearLayout nested in a vertical LinearLayout nested in a RelativeLayout. It has 5 imageviews which fill the width and I'm using weight to space evenly. I randomly fill between 1 and 5 of the imageviews at runtime. They remain spaced evenly but instead of hugging the left side of the parent, which I read in the docs is the default, they hug the right. I've tried gravity:left and scaleType="fitStart". I've tried nesting this layout in another relative layout and using alignParentLeft. Using a RelativeLayout instead of the LinearLayout will align the images to the left but doesn't space them evenly so isn't an option.
Below are the relevant pieces of my XML file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Game1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="7">
<LinearLayout
android:id="#+id/animal_images_row1"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="0dip"
android:layout_marginTop="5dip"
android:layout_marginBottom="5dip"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
>
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block1"
android:contentDescription="#string/ph"
android:scaleType="centerInside"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block2"
android:contentDescription="#string/ph"
android:scaleType="centerInside" />
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block3"
android:contentDescription="#string/ph"
android:scaleType="centerInside"/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block4"
android:contentDescription="#string/ph"
android:scaleType="centerInside" />
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block5"
android:contentDescription="#string/ph"
android:scaleType="centerInside" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I removed the rest of the xml file for brevity. Thanks in advance for the help!
EDIT: Add screen shots.
Thanks for the comments! Every little insight helps =) I couldn't figure out why they were sticking to the right and nothing I would do could force them to the left and it turns out that in my code I had
imgview.bringToFront();
as a temporary fix while I was figuring the layout out and after removing that line they stuck to the left properly.
I have some ImageViews inside a ViewFlipper. I want to respect the aspect ratio of the images, so the layout won't use all the screen. I have set up a simple "slide" animation, but the ViewFlipper will always be a bit bigger than the images inside. This makes an undesired black space appear between two sliding images. I can't make the ViewFlipper wrap around the ImageViews correctly.
Everything is inside a FrameLayout, so there I can have a floating button there too. This is the main layout XML:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="centerInside"
>
<ViewFlipper
android:id="#+id/flipper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="centerInside"
>
<ImageView
android:id="#+id/page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/bg0"
/>
<ImageView
android:id="#+id/page2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/bg1"
/>
</ViewFlipper>
<ImageButton
android:id="#+id/menuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/btn_menu"
android:background="#null"
/>
</FrameLayout>
If I set the scaleType of the ImageViews to "fitXY" the black margin disappears, but the ratio of the images is not respected. I have already tried "fitCenter", "fillParent" in the ImageViews, and a padding of 0px.
Any help is very much appreciated as I have been struggling with this for hours.
Adding this to the ImageView did it:
android:adjustViewBounds="true"