I have a horizontal LinearLayout with 3 ImageViews, but ImageView are much more wider than image are(rectangle when image is square). I've try to set adjustViewBound="true", than imageView become square but much more bigger.
Also I've tryed to set scaleType="firXY" but then the image is scaling to fit rectangle imageView.
Here is ma xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/llButtons">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_start_text"
android:id="#+id/imgStart"
android:layout_weight="1.5"
android:src="#drawable/ic_play"/>
<ImageView
android:id="#+id/imgReset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:text="#string/button_reset_text"
android:src="#drawable/ic_cls"/>
<ImageView
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:text="#string/button_next_text"
android:src="#drawable/ic_next"/>
</LinearLayout>
And this is a result:
How can I set ImageView size as picture size?
You had assigned the weight as 1.5 and this makes the issue.
Anyway You can adjust the width of each images By previewing the layout.
Preview the layout
Now Double Click on the layout Content.
Now You will be able to adjust the height and width of those imageviews.
Adjust it with proper height and width.
This gives you the proper idea how to manage items in a Linear Layout.
Try setting scaletype to CENTER_INSIDE
I assume you want to keep the images equidistant horizontally. Create a LinearLayout for each image, give each a weight of 1 (remove weights from ImageViews), and set each LinearLayout's gravity to center.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/llButtons"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_start_text"
android:id="#+id/imgStart"
android:src="#drawable/ic_play"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:id="#+id/imgReset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_reset_text"
android:src="#drawable/ic_cls"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_next_text"
android:src="#drawable/ic_next"/>
</LinearLayout>
</LinearLayout>
Thank you all, I've solved it.
Following advice of #Khizar Hayat I've delete wight attribute and use wrap content instead. To place my ImageViews by screen sides and center I've using .
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/llButtons">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_start_text"
android:id="#+id/imgStart"
android:src="#drawable/ic_play"/>
<Space
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageView
android:id="#+id/imgReset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_reset_text"
android:src="#drawable/ic_cls"/>
<Space
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageView
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_next_text"
android:src="#drawable/ic_next"/>
</LinearLayout>
Fix ImageView's size with a specific size (in dp) or use fill_parent
set android:scaleType to fitXY.
Related
I have a linear layout with textView and ImageView.
When i enlarge the text size to large, the image view doesn't have enough space so it's partially hidden.
I want the Image view to be fully displayed and even if the text has to be truncated.
Do i have any simple way to do it? instead of inheriting from LinearLayout and overriding onMeasure?
Try to use Relative View instead of Linear View.. Relative give more command over this.
<?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:gravity="center_vertical"
android:layout_gravity="center"
android:layout_margin="10dp"
android:orientation="horizontal"
android:weightSum="5">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/first"
android:layout_gravity="top|center"
android:padding="10dp"
android:gravity="center"
android:layout_weight="1"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:layout_gravity="top|center"
android:gravity="center"
android:textSize="20dp"
android:layout_marginTop="50dp"
android:textStyle="bold"
android:text="textview"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="top|center"
android:padding="10dp"
android:gravity="center"
android:src="#drawable/ic_launcher_background"
/>
</LinearLayout>
I solved it by:
Linear layout. The imageView with a hard coded DP width and height, Text with 0 width and a weight of 1.
I have a TextView and a square ImageView that I would like to show in a horizontal linear layout. Each should take half of the parent view's width and the height should fit the content (i.e. the image). The text should be centered vertically.
Additional constraint is that the image should not grow beyond a given maxWidth (= maxHeight), and excess width should be made available to the TextView. Obviously, this conflicts with the 50/50 rule above. Is there a way to prioritize the constraints, i.e. allow the image to take half of the space unless it exceeds a given size?
These are layouts I tried:
The first one nicely stretches the left side to the available space. But the image takes more than half of the width as its layout_weight is not specified (as in image below).
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text."/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
When I add layout_weight to the ImageView it always takes half of the width and ignore the maxWidth (see image below).
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
Enclosing the ImageView in another LinearLayout enables the maxWidth again, but the enclosing LinearLayout still takes half of the available space (see image below).
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
Another option I have found for similar scenarios is to use a RelativeLayout with an invisible view as a center divider, but that locks the division to 50/50 (or wherever the divider is placed).
Okay, gonna go on ahead and post the xml I created, it's pretty much simple, it does most of your conditions.. One thing I'm having trouble with is the part where each view takes half of the parent view's width. Hope this still helps you in some way.
sample_layout.xml
<?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="wrap_content"
android:layout_margin="2dp"
android:background="#android:color/darker_gray">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/img_sample"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="#id/img_sample"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
android:text="Some text." />
<ImageView
android:id="#id/img_sample"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="2dp"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:src="#drawable/sample_img" />
</RelativeLayout>
Here is a sample screenshot:
If ever you figure out how to the the half of each thing, kindly comment it here, It'd be nice to know about it for possible future use. :)
PS: Have you considered doing the half of each thing programatically? Like checking the LayoutParams then dynamically setting weightSum and the layout_weights.
Sample Image retrieved from this link
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#color/blue"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toStartOf="#id/imageView"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Some text. " />
</RelativeLayout>
It won't be a perfect solution in term of performance. But you can achieve it by playing with FrameLayout and ImageView.
Here is the output:
Layout.xml:
<?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:background="#color/textGray"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/skyBlue">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:src="#drawable/ic_settings"
android:visibility="invisible" />
<TextView
android:id="#+id/TextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:text="!" />
</FrameLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:src="#drawable/ic_settings" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
In order to achieve desire behaviour, You would have to set same images to both imagesviews in this layout. one of them is invisble, It is just helping to make parent with same width and heights which would lead us to create TextView with same dimensions.
Note: If you want to change textView alignment, you can do it with layout_gravity or gravity.
I have an layout with a background that already made for host my app's image buttons. my image buttons are in a row of middle in this layout. my emulator is 480*800 px hdpi that dp is:320*533.
when i adjust buttons from xml, everything is OK. but when run, my buttons change smaller than from size of in xml and layout is not ordered. please help me. what can i do?
myt xml code for this layout is:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_panel"
>
</ScrollView>
<LinearLayout
android:id="#+id/bottom_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingBottom="75dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/help_ic"
android:src="#drawable/help_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/feed_ic"
android:src="#drawable/feed_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/search_ic"
android:src="#drawable/search_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/read_ic"
android:src="#drawable/read_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
android:paddingBottom="0dp" />
</LinearLayout>
As you have given weight to your ImageView,set
android:layout_width="0dp"
instead of "wrap_content" for the ImageView and give the total weightsum to the parent LinearLayout i.e 4 in your case.
Try this, I hope It will help you.
I still dont really get it how many space layouts take.
I have the following xml.
The inner LinearLayout's for the bottom space height is set to wrap_content, so it should take the height of the maximum height in there. Which is 52dp. And there is the ImageButton which is set to wrap_content, so the button should be centered vertically on the right side, since its an 24dp image (in xhdpi it has 32x32 pixels). So why is it stretched over the full height like displayed here?:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp">
<de.ph1b.audiobook.utils.SquareImageView
android:id="#+id/cover"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_gravity="bottom">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="52dp"
android:paddingLeft="16dp"
android:maxLines="2"
android:ellipsize="end"
android:paddingRight="16dp"
android:gravity="center_vertical"
android:textSize="16sp" />
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
</LinearLayout>
</LinearLayout>
either #drawable/ic_more_vert_grey600_24dp is larger than you think or borderlessButtonStyle has a larger background.
Please check the size. I have replicated the behavior and the ImageButton is set to wrap_content and is centered.
change your image button code
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:scaleType="fitXY"
android:gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
I have 5 images that I want to place in image buttons inside a horizontal LinearLayout. The images are saved in different sizes on the disk, but when placed in the layout, I want them to be of the same height, but in different weights of 0.5,1,1,1,0.5 (meaning the weight sum of the layout is 4). I tryed using this code and it didn't work:
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4" >
<ImageButton
android:id="#+id/scrollLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/left"
android:layout_weight="0.5" />
<ImageButton
android:id="#+id/dog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dog"
android:layout_weight="1" />
<ImageButton
android:id="#+id/fish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/fish"
android:layout_weight="1" />
<ImageButton
android:id="#+id/cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/cat"
android:layout_weight="1" />
<ImageButton
android:id="#+id/scrollRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/right"
android:layout_weight="0.5" />
</LinearLayout>
Are there any parameters of layout_width and layout_height that I can change that will get this to work, or do I need to create a scaled bitmap from java code for each one of the buttons?
Thanks!
try defining the same height and then you scaling to keep the ratio
<ImageView
....
android:layout_height="match_parent"
android:scaleType="centerInside"
.... />
EDIT using a match_parentfor the height will make the ImageButtons have the same height and keep the scale ratio using scaleType