I'm try learn to more about the Android layout system; this is a learning experience for me. I'm currently trying to create a layout which basically amounts to two linear layouts: A fill_parent vertical, with an inner fill_width horizontal, so that I have an ImageView banner [in the outer], then seven ImageButton columns filling the width of the view [in the inner].
My issue comes, as I need the ImageButton's content to proportionally fill the entire button view [the columns], but respect the ImageButton boundaries, so that if either a small or big image is the source, it will be centered in the ImageButton, filling both it's vertical and horizontal dimensions, and be centered. -I have no control over the source images.
I thought that CenterCrop would do it, but nada for me...
ImageView.ScaleType 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).
Any related thoughts on what I have; ignore the outer outer layout please:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:id="#+id/linearLayout2"
android:layout_height="fill_parent" android:orientation="vertical"
android:layout_width="fill_parent" android:background="#color/special_grey"
android:layout_margin="0dp">
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content" android:layout_gravity="center"
android:layout_width="wrap_content" android:layout_margin="10dp"
android:src="#drawable/banner_logo" />
<LinearLayout android:id="#+id/linearLayout1"
android:layout_margin="5dp" android:layout_gravity="center"
android:layout_width="fill_parent" android:layout_height="250dp" android:baselineAligned="true">
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_0" android:maxWidth="100dp"
android:id="#+id/imageButton1" android:layout_weight="1"
android:scaleType="centerCrop" android:cropToPadding="true"
android:layout_gravity="center" android:layout_width="0dp"
android:padding="0dp" android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_1" android:maxWidth="100dp"
android:id="#+id/imageButton2" android:layout_weight="1"
android:cropToPadding="true"
android:layout_width="0dp"
android:padding="0dp" android:layout_height="250dp" android:scaleType="centerCrop" android:scrollbarAlwaysDrawHorizontalTrack="false" android:scrollbarAlwaysDrawVerticalTrack="false" android:layout_gravity="fill"/>
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_2" android:maxWidth="100dp"
android:id="#+id/imageButton3" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_3" android:maxWidth="100dp"
android:id="#+id/imageButton4" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_4" android:maxWidth="100dp"
android:id="#+id/imageButton5" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_5" android:maxWidth="100dp"
android:id="#+id/imageButton6" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
My comments are only small suggestions as I'm not really sure what you want to achieve with this layout or how it should look like eventually, maybe you could elaborate a little bit or add a small image for a better understanding.
I think your linearLayout1 is missing an orientation, but this shouldn't be critical as it should default to vertical (I think).
Couldn't you put the Image of your ImageView as a backgroundImage for your linearLayout2? Then you could skip the ImageView.
Then I would put most of the ImageButton attributes into a styles-definition. This allows you to change settings much easier and cleans up your code ([Android Developers: Applying Styles and Themes])1
As I have said before, maybe you could elaborate a little bit more about how it should look like, then it will be easier to help.
Related
I have a little problem with ImageView on differents screens with different dpi like this:
On second screen there are original dimensions of imageviews. But on first screen images are bigger and moved out. How i can set proportional dimensions and margins to ImageView.
Here is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/textLayoutIntro">
<ImageView
android:id="#+id/first_slide_second_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_second_image"
android:layout_alignParentStart="true"
android:layout_alignStart="#+id/firstSlideTelephone"
android:layout_marginTop="100dp"
android:layout_marginStart="20dp"/>
<ImageView
android:id="#+id/first_slide_third_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/first_slide_third_image"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true"
android:layout_alignEnd="#+id/firstSlideTelephone"
android:layout_marginEnd="30dp"
android:layout_marginTop="100dp"/>
<ImageView
android:id="#+id/firstSlideTelephone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/first_slide_telephone"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:id="#+id/first_slide_first_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_first_image"
android:layout_marginStart="-30dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:maxWidth="138dp"
android:maxHeight="138dp"/>
<ImageView
android:id="#+id/first_slide_fourth_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_fourth_image"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp"/>
</RelativeLayout>
Thanks in advance)
Instead of RelativeLayout, use constraintlayout with vertical and horizontal guidelines. That way, the content sizes up or down to whatever device screen size. Like the sample below.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:clickable="true"
tools:context="com.example.example.Fragments.ExampleFragment">
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_v_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_v_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_h_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_h_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<ImageView
android:id="#+id/imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/none"
app:layout_constraintStart_toEndOf="#+id/fragment_guideline_h_1"
app:layout_constraintEnd_toStartOf="#+id/fragment_guideline_h_2"
app:layout_constraintTop_toBottomOf="#+id/fragment_guideline_v_1"
app:layout_constraintBottom_toTopOf="#+id/fragment_guideline_v_2"
app:srcCompat="#drawable/forgot_password_arrow_back" />
</android.support.constraint.ConstraintLayout>
I've had same problem but I've found this: https://github.com/intuit/sdp
It's a library with dimensions represented by sdp. It just library with dp but scaled for different screen sizes.
You can use percentage for ImageView width and height. For example, use ConstraintLayout and for ImageView:
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />
It's possible to solve many ways. The above bros already said possible to solve by Constraint layout.
It's also possible to solve by Linear layout. Just use weight_sum. Add 2 View add the top and bottom and at the middle add your image. Weight perfectly work dynamically (may you know).
But if I was in this situation, I would be solved it using sdp & ssp library. The library most of the time works perfectly.
only for font/text size: ssp. &
For any others except font: sdp
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.
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 two images--a play button on the left, and a boombox on the right. I am trying to scale the height and widths of these images to look like this
Though my code is producing this:
Essentially, the files are pretty big and not sized correctly, but I don't know why the boombox image is getting cut off. I want the whole boombox to fit, and then the play button to adjust its height according to the height of the boombox.
This is my layout code, though I think I need to make big changes:
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:numColumns="2"
android:scaleType="fitXY"
>
<ImageView
android:id="#+id/play_stop_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:src="#drawable/play_button_final"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_column="1"
android:scaleType="fitXY"
android:src="#drawable/boombox"
android:id="#+id/boombox"
/>
</GridLayout>
Try this,
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:numColumns="2"
android:scaleType="fitXY"
>
<ImageView
android:id="#+id/play_stop_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:src="#drawable/play_button_final"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:layout_column="1"
android:scaleType="fitXY"
android:src="#drawable/boombox"
android:id="#+id/boombox"
/>
</GridLayout>
Is there any way to do this? I have tried padding the image and setting the width/height of the view, but neither seems to work. Here is an example:
<ImageButton
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/search_small"
android:paddingTop="4sp"
android:paddingBottom="4sp"
android:paddingLeft="6sp"
android:paddingRight="6sp"
android:layout_marginRight="10sp"
android:layout_marginTop="6sp"
android:layout_marginBottom="6sp"
android:layout_alignParentRight="true"
/>
I want the button to be wider than it is tall, but it is coming out the other way round.
Just had a play to try and understand your problem.
Seems ImageButton is a composite view which has a few pre-set values. Such as some sort of margin which you cannot override with the XML. If you cannot change your image to match what you want to happen then you are better to create your own composite view.
Here is my example of a composite view you can make yourself:
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:id="#+id/saveSearchButton"
android:layout_width="50dp"
android:layout_height="50dp" />
<ImageView android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_save"
android:layout_gravity="center"/>
</FrameLayout>
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:id="#+id/clearSearchButton"
android:layout_width="50dp"
android:layout_height="50dp" />
<ImageView android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_close_clear_cancel"
android:layout_gravity="center"/>
</FrameLayout>
And the original buttons:
<ImageButton android:id="#+id/imageButton1"
android:src="#drawable/ic_menu_save"
android:layout_height="45dp" android:layout_width="45dp"/>
<ImageButton android:id="#+id/imageButton2"
android:src="#drawable/ic_menu_close_clear_cancel"
android:layout_height="45dp"
android:layout_width="45dp"/>
Here we can see custom image/button composite followed by the build in ImageButton as part of the SDK:
Set android:background instead of android:src to set the image on the button. This will adjust the image to your button's size. Then adjust the padding after.
You shouldn't use sp as a size dimension - dp should be used as it will help your view scale directly with different screen density and resolutions. See Here for dimensions.
padding will push other elements away from your view boundary. margin will push the contents of your view inward from the your boundary (ie would squash the available space for your picture) . The boundary is specified by height and width. Without more information I would guess you are being confused by your margins - delete them and experiment.
Also useful to you: android:scaleType="fitXY" makes the image stretch to match both the X and Y dimensions that are available to it. It helps you to see the canvas available to your image. Once you feel the area is large enough for a correctly scaled image change the scale type to centerInside. See Here for all scale types.
I use minWidth and minHeight attributes, combined with a fitXY scale type and wrapping its content to modulate the shape of my button.
<ImageButton
android:id="#+id/fooButton"
android:background="#drawable/play_button"
android:backgroundTint="#00000000"
android:minWidth="200"
android:minHeight="100"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="playStuff"
/>
Can you explain your question more widely so that we can more understood.
As per my understanding You want to set your ImageButton Height/Width. But it doesn't work is it? I want to ask you that, if you write any specific height/width then also it doesn't work?
I copied your code in my files and I changed the height/width manually then it will work.
Please explain your question.
Thanks.
I finished the layout following Graeme's answer. Four "imageButton" fix the bottom, same width, changeable image size. thanks!
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#color/#000"
android:weightSum="100" >
<FrameLayout
android:id="#+id/flBottom1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_home_48_48"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
/>
<TextView
android:id="#+id/tvBottom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_home"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_compose_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_comment"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_search_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_search"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_barcode_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_scan_again"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
</LinearLayout>