I been struggeling with this for a whole day now. I want 3 Image Views in my LinearLayout. As you can see the scale is not correct at all. All of my icons have a size of 24x24 px. Been experimenting with different propertiers inside of my ImageViews.
Here is my XML-code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="45dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/tList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#drawable/ic_home_black_24px" />
<ImageView
android:id="#+id/ist"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#drawable/ic_help_black_24px"
/>
<ImageView
android:id="#+id/ations"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#drawable/ic_settings_black_24px"
/>
</LinearLayout>
I pasted your code on a layout file in my Android Studio, an it seems that the weight and scaleType attributes are messing up your view. This is how I declared a 24 by 24 ImageView:
<ImageView
android:id="#+id/ations"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="#drawable/your_drawable"
/>
You can check full doc about weight here, but what is basically saying is that if you put weight on several attributes under a LinearLayout, you're adding a priority to grow when the screen does. Since the 3 ImageViews have 1 as weight, they grow with the same priority, and since the fill_parent is being called also, they will force to fit in the parent layout params, looking oddly.
Change all of your ImageView's width to "0dp" and replace background to src like this :
<ImageView
android:id="#+id/ations"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_settings_black_24px"
/>
Related
I wonder if it is possible to have two items in a LinearLayout one wraps its content and the other fills the remaining horizontal space. I do this frequently in WPF (.NET) by specifying
HorizontalAlignment="Stretch".
For example:
<ImageView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:background="#0000FF"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="24dp"
android:background="#FF0000"/>
When I do this the second ImageView fill the whole horizontal space as I expected. I tried to set both wrap_content and use gravity such as android:gravity="start" and android:gravity="fill_horizontal" for the second one it did not worked.
NOTE: I can achieve something similar by specifying weight attribute. But this is providing a division according to the percent value. This is not I want.
You can do this using the weight attribute itself. Try the following method
<ImageView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:background="#0000FF"/>
<ImageView
android:layout_width="0dp"
android:layout_height="24dp"
android:layout_weight="1"
android:background="#FF0000"/>
include this in your horizontal linear layout
You need to use a Relative layout for this. Also you either need to specify a width for first image view or it should contain an image otherwise, how can the imageview wrap the content.
You can use like below :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_alignParentLeft="true"
android:id="#+id/imgFirst"
android:layout_width="50dp"
android:layout_height="24dp"
android:background="#0000FF" />
<ImageView
android:layout_width="match_parent"
android:layout_height="24dp"
android:layout_alignParentRight="#+id/imgFirst"
android:layout_toRightOf="#+id/imgFirst"
android:background="#FF0000" />
</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>
I have two linear layouts inside a parent linear layout. all horizontal. I want all of l_child to show and part of r_child to show; while the rest of r_child will be off-screen to the right. How do I accomplish that?
<LinearLayout
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/l_child"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:id="#+id/r_child"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
Try giving the parent LinearLayout a negative right margin.
android:layout_marginRight="-50dp"
Other solution might be to put the parent LinearLayout inside a ScrollView, and set the widths of children layouts to the desired width. In this case, you'll be able to scroll the right layout back to the screen.
Layout weights are only for distributing layouts to fill a view, so no overflowing can be done this way.
Assigning layout_width with density independent pixels will result in varied success for different size devices.
So I believe you would have more success adding your layouts programmatically based on the screen size.
See this post for getting the screen width:
Get screen dimensions in pixels
Once you have the screen width, you can assign the inner-layout dimensions by pixels (with LinearLayout.LayoutParams), calculated as percentages of the screen width.
If you want the left layout to take up 80% of the screen, use .8*screen_width for the size, and if you want the right layout to then overflow by 20% of the screen, use .4*screen_width for that size.
Do you mean something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_weight="1"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="70dp"
android:layout_gravity="center_horizontal|top">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView1"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView3"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="70dp"
android:layout_gravity="center_horizontal|top">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView1"
android:layout_marginRight="200dp"
android:src="#drawable/ic_launcher"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView3"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
</LinearLayout>
You can try using ViewPager, but I don't know if you can get the "bleeding canvas" effect that you're describing using that UI component.
EDIT: Maybe you can try using Gallery widget.
Is this what you're describing?
http://www.bangkokpost.com/media/content/20110915/309542.jpg
My layout contains 3 ImageButtons, arranged vertical in a LinearLayout.
Now I want that each of them has the same height and together fill the device's screen height.
Works fine with the attribute android:layout_weight="1". But if the image of one ImageButton is too big, it won't work (this button is higher than the others), despite setting android:scaleType="center_inside".
Any advices/tricks?
If you need any code, let me know. But there is nothin special.
If you have given weights correctly than this should work. The size of the image doesn't matter than. Just one thing to keep in mind while using weights is that attribute for which you are giving the weight(height/width) should be assigned value "0dp" in the xml, only then the weights will work correctly. Here is the example code.
<?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"
android:gravity="center"
android:weightSum="3">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:src="#drawable/drawable1"
android:layout_weight="1"
android:scaleType="centerInside"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/drawable2"
android:scaleType="fitXY" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/drawable3"
android:scaleType="fitXY" />
</LinearLayout>
Just use this xml and replace the drawables according to your needs. Let me know if any issues.
I have a linear layout with 4 images with horizontal orientation. My problem is that the first image is cropped and i cant see both of them in my galaxy s,only in some emulators..any help please?this is my linear layout code:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_new_3"
android:layout_weight="1"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_btn1"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_btn2"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_btn3"
/>
</LinearLayout>
this is what i want
and this is what i get
#Jamo: image1:
image2,3,4:
Your containing layout is fill_parent, meaning it's restricted to the width of its parent (probably the whole screen). Each ImageButton is set to width wrap_content, meaning it just fits the width of its content. If the widths of the backgrounds of the images you're using sum up to more than the total parent width, you're going to have problems. This seems to be what's happening. You can't fit more pixels into a screen than what you have.
Update:
With your provided graphics, the "hello" image is 138px and the star is 60px. 138 + 60 * 3 = 318. If your screen is 480px wide (I think the Galaxy S is 480 wide) then you should be able to fit. If you put these into the default or mdpi folder (and the Galaxy S is hdpi) then these will be scaled to 1.5x that, which is 477px. That should still fit.
The only way I know to create something similiar is to use RelativeLayout like this:
<RelativeLayout android:layout_height="wrap_content"
android:layout_width="fill_parent">
<ImageView android:layout_alignParentRight="true"
android:id="#+id/iv4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"/>
<ImageView android:layout_toLeftOf="#id/iv4"
android:id="#+id/iv3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"/>
<ImageView android:layout_toLeftOf="#id/iv3"
android:id="#+id/iv2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"/>
<ImageView android:layout_toLeftOf="#id/iv2"
android:id="#+id/iv1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="#drawable/icon"/>
</RelativeLayout>
We chatted about this in a previous question. Please post the whole layout file. The layout_weight won't do much, as hinted at in other posts, if the total width is being constrained by whatever is the parent of the outer LinearLayout.
Also, some thoughts.
You have "fill_parent" for the ImageView heights. I think those should be "wrap_content". You're setting the images with 'background' rather than 'src', which is kind of weird.
Also, that first image should be in another layout container, to allow stretching that doesn't screw up the 'hello'.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/header_new_3"
android:layout_gravity="center"
/>
</LinearLayout>
Not 100% sure on that being exactly what you want, but the ultimate goal would be to stretch the first image without shearing it in any way.