Android - ImageView Image Boundaries Bidder then Image - android

I am very very new to developing with Android on Eclipse.
I am making a basic relative layout and have a title, welcome msg, image, final text. in portrait mode.
The image seems to be the issue. When I am in a 2.7" screen the view bounds extend to the left and the right which is fine as there is nothing there. However if I move to a 7" or 10" view the image bounds extend up and down which pushes the text on top up and on the bottom down. So now there is a rather large chunk of white space.
http://imgur.com/GeM4psS this is the image when in 7-10" portrait (see the blue bounds pushing text away)
http://imgur.com/16JCtSy this is the image when in 2.7" and now the bound push to the left and right but don't cause any issues.
Optimally I would like for the image to just be always within those bounds. Below is all the xml involved. No java was changed. Appreciate any help. Thanks. A heads up if I change it to fitxy it stretches the image.
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="cs.play.quotably.MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/app_name"
android:textSize="30sp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/textView3"
android:layout_below="#id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/fdr"
android:scaleType="fitCenter"
android:src="#drawable/fdr" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/welcome"
android:textSize="15sp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/quote1"
android:textSize="15sp" />
</RelativeLayout>
Thanks for any and all help!!

you should try this one.
change the width and height to 30dp and it is not a fixed value.
just try different values like 40dp and 50dp.
and once you satisfy test it on both devices.
it should work
<ImageView
android:id="#+id/imageView1"
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_above="#id/textView3"
android:layout_below="#id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/fdr"
android:scaleType="fitCenter"
android:src="#drawable/fdr" />

Related

Android Studio, wrap ImageView size around the x and y scale of the actual image

I have an ImageView with a mail icon, however, it was too big so i reduced its size.
The actual size of the image is smaller, but the content it wraps is still the same, resulting in my lines not being even. The image below demonstrates my problem
As you can see, the size of the imageview does not wrap around the image itself.
Below is the XML for the imageview
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_mail"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:scaleX="0.5"
android:scaleY="0.5"/>
Is there a way to fix this?
Below this is the full XML for the whole layout if that would help
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/PaleGrey">
<Space
android:id="#+id/dummyTopSpaceSc"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_alignParentTop="true"/>
<TextView
android:id="#+id/nameTextView"
android:paddingLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/dummyTopSpaceSc"
android:text="name"
android:textStyle="bold"/>
<TextView
android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:paddingLeft="10dp"
android:layout_height="wrap_content"
android:layout_below="#+id/nameTextView"
android:text="title"/>
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/titleTextView"
android:id="#+id/phoneContainer">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_phone"
android:scaleType="fitCenter"
android:scaleX="0.5"
android:scaleY="0.5"/>
<TextView
android:id="#+id/phoneTextView"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
app:layout_marginLeftPercent="15%"
android:layout_height="wrap_content"
android:autoLink="phone"
android:text="phone"/>
</android.support.percent.PercentRelativeLayout>
<!-- below this comment is the container for the mail icon -->
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/mailContainer"
android:layout_below="#+id/phoneContainer">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_mail"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:scaleX="0.5"
android:scaleY="0.5"/>
<TextView
android:id="#+id/emailTextView"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
app:layout_marginLeftPercent="15%"
android:layout_height="wrap_content"
android:autoLink="email"
android:text="email"/>
</android.support.percent.PercentRelativeLayout>
<Space
android:id="#+id/dummyBottomSpaceSc"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_below="#id/mailContainer"/>
</RelativeLayout>
You should resize your image by giving it exact values for width and height instead of wrap_content if you actually want the bounding box to get smaller as you change the size. Then you can add padding/margins back to it as you wish. Also, you should use the android:src attribute (or maybe even app:srcCompat) instead of android:background.
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/ic_mail" />

How to position ImageView without taking the entire screen?

I am trying to code one of my first android apps. I am trying to position a text below an image, but the image takes up most of the screen and one of the textviews which are supposed to be below it are not displayed. I am using a RelativeLayout.
Here is my code snippet.
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/i1"
/>
<TextView
android:id="#+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/img"
android:textSize="24sp"
android:text="Description"/>
</RelativeLayout>
I have also tried changing the scale type of the imageview, but it doesn't work. Only when I explicitly specify the width and height parameters of the image, the text is visible below the image.
What changes can I make in this code to get the desired output ?
If you add a rough diagram of what you want to achieve your question can be answered better. From my understanding, and by looking at your code it seems you are trying to add 2 TextView's at the top and bottom (one each) and then an ImageViewsandwiched in between.
First, add the 2 TextView's. Set the one as android:layout_alignParentTop = true and android:layout_alignParentBottom = true. Then add the ImageView. In the ImageView, you can set android:layout_height = "wrap_content" and then android:layout_below=<id of the top text view> as well as android:layout_above = <id of the bottom text view>.
So something like this:
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textSize="24sp"
android:text="Description"/>`
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/i1"
android:layout_above="#id/t2"
/>
</RelativeLayout>
If you're using wrap_content for your ImageView's height and if your ImageView's actual image is large enough then it will surely take up entire space.
In that case, you'll have to explicitly mention exact height of the View, so that text below is show up.
What you want to do to fix this situation is to change actual height of the image itself. If you do that, image will fit itself entirely but takes less height and then text should show up.
So you have two options,
1) Either fix your image height in your layout, OR
2) Fix actual image height so that it's more appropriate in your usecase
I hope this answers your question.
You need to assign a size for ImageView based on screen size
Use PercentRelativeLayout
My compileSdkVersion is 24 so I use compile 'com.android.support:percent:24.0.0' inside my app:gradle dependencies
example :
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_width="match_parent"
app:layout_heightPercent="50%" <---------- here its taking 50% of screen height
android:src="#drawable/myImageName"
/>
<TextView
android:id="#+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/img"
android:textSize="24sp"
android:text="Description"/>
</android.support.percent.PercentRelativeLayout>
If you use LinearLayout go for layout_weight attribute
make t2 alignParentBottom true
and
let img view layout_above t2
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_above="#+id/t2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/i1"
/>
<TextView
android:id="#id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textSize="24sp"
android:text="Description"/>
</RelativeLayout>

Trying to understand Android layouts, image sizes and relations

I'm developing apps for android since over a year now with success, but one thing is still a problem for me:
How to design a layout with a combination of TextViews, ImageViews and Buttons while retaining the relation between each elements on different screen sizes.
I want to build a layout like this:
It's for a listview, so many of these layouts are used. The app has a different layout for smartphones and tablets.
So the orange button on the right should always have 3 lines of text but should still have a maximum width, the image on the left should have the same height as the button on the right. The 3 lines of text in the middle should take up as many space as they can. The star image should have the same hight as the text on their right.
I've managed to build a similar test layout with a TableLayout, here are the previews from AndroidStudio:
Nexus S
Nexus 6
On the Nexus S screen size, the layout is OK but on bigger screens it's ugly. The button is too small, the image on the left is also too small.
Here is the code for my test layout:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:contentDescription="#string/dummy"
android:padding="#dimen/raster4dp"
android:scaleType="fitXY"
android:src="#drawable/avatar_1" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv1"
android:src="#drawable/ic_male_user_bw"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv2"
android:layout_alignBottom="#id/iv2"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/iv2"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_male_user_bw"
/>
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv3"
android:layout_alignBottom="#id/iv3"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
</RelativeLayout>
<Button
android:id="#+id/btn1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#drawable/button_dropshadow_black_xml"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</TableRow>
</TableLayout>
So hopefully my question is not too silly, but i have some problems understanding how to fix this. Currently I'm using a width of fixed 80dp on the button and the image to the left. I think this is not realy the way it works on Android.
What sizes do i need to use here, what kind of layouts?
The sections about sreensizes etc. on the developer site is known by me (https://developer.android.com/guide/practices/screens_support.html) but it wasn't that helpful to me.
Thanks for help! :)
Each terminal has different dimensions. If you put a button that has a size of 80dp, when other terminal screen is larger, that button is going to be smaller compared to the terminal screen you were doing the tests.
You should play with WEIGHT.
| | | |
|_____________|_________________________|____________|
0.3 0.5 0.2 0.3 + 0.5 + 0.2 = 1 <-Weight.
Read this, will help.
Also there's a question similar to yours, check it too.
DP is for setting a fixed amount of pixels, if you don't want to consider the pixel density of your device's screen. This lets you that a button would be shown with the same size in a Nexus 4,5 or in a Samsung Galaxy Mini.
The same "absolute" size. This means that if your image is too big, it could fit in Nexus, but no in the other because of its smaller screen. This is due to the fact that it does not depend on the screen size, neither the pixel density.
What I hardly recommend you is the use of LinearLayouts (with their attribute weight) and RelativeLayouts as direct children (in case you need them). This could be "the same" (not exactly) than the use of "%" in CSS.
Here, you can see an example of weight attribute (The second answer gives you more tips).
Linear Layout and weight in Android
I hope this helps!!
check this .... increase parent layout height if needed:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="dummy"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#565657"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</LinearLayout>

Align text in custom ListView in table-like format

I am building an app that I would like to support multiple device size.
In my app, I am using a listview to display data as well as a custom adapter. The background of the listview is an image I have done. This image is basically a 114heightX700width. with a small vertical divider at about 1/4 of the image.
In the left side, I need to center numbers with maximum 3 digit and on the left, a title.
It works great on Nexus 4, but if I try other devices with different dpi, it wont center anymore. Is there a way to "clip" the text positioning in the given image so that it is always at the same position no matter the device?
Here is my XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:contentDescription="#string/empty"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignParentTop="true"
android:baselineAligned="false"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="75dp"
android:layout_height="match_parent"
android:layout_weight="0.00" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/empty"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.89"
android:paddingLeft="10dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:lines="1"
android:paddingRight="10dp"
android:text="#string/empty"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
There are 3 options:
Use a LinearLayout set all children to match_parent and set the layout_weight to 1 for every child. This will bring all children to the exact same size.
Use a 9patch background for each child. This will draw your background "around" the text.
Use a view in between the TextView to show the divider.
Anyway: RelativeLayouts/LinearLayout/FrameLayout with only one child do not make sense.
You should reduce the complexity of your layout.

Adjusting the size of an ImageButton in Android

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>

Categories

Resources