I'm trying something that should be simple, an imageButton and some text that says something about it. My problem is, the view of the imageButton is bigger than the image itself. I'm certain that the actual image is not like this (I've tried with several images and the result is the same). By searching online, the solution I've found is to insert the attribute "adjustViewBounds". That seemed reasonable but it didn't work. Here I leave my code and an image of how the result looks.
<?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:gravity="center|top">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:scaleX="0.2"
android:scaleY="0.2"
android:src="#drawable/icon1"
android:padding="0dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DEFAULT!"
android:textSize="20sp"
/>
</LinearLayout>
image
The problem is using scaleX and scaleY to adjust the size. The button changes it's visible size, but the rest of the layout acts as if it were the original full scale.
I'd suggest using a different method of defining the size, for example:
<ImageButton
android:id="#+id/imageButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:src="#drawable/icon1"
android:padding="0dp"/>
Related
I want to achieve something of the format as shown in the image. The blue part is background, the image of the guy and girl is a ImageButton. The original images for these are 88x128 (trainer000, trainer001). I want to rescale the ImageButton such that the image covers the entire height and the width is adjusted accordingly. Now I found 2-3 ways to do so but they make use of a separate class to calculate width. I want to know if there is a way to do it purely in the xml file itself.
What I used:
`
<ImageButton
android:id="#+id/maleimage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:layout_alignParentLeft="true"
android:src="#drawable/trainer000" />
<ImageButton
android:id="#+id/femaleimage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:layout_alignParentLeft="true"
android:src="#drawable/trainer001" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textColor="#000000"
android:text="Are you a boy or a girl?"
android:textAppearance="?android:attr/textAppearanceMedium" />
`
What I want is this:
http://imgur.com/9D6XZUT
EDIT: Found the solution. I just used Studio's Layout editor.
What I am trying to do seems very basic in theory, but cannot find any information on this on the web. I have a series of clickable imagebuttons, containing images. I would like it so that when a user clicks on one of these imagebuttons, it becomes highlighted with a simple border.
To achieve this, I have created a basic solid-colour 62x62 pixel image and wish to place it -behind- my original 60x60 imagebutton. This will create the illusion of a border. My plan is to set it to non-visible by default and then have the code set it to visible on click. Sounds straight-forward.
However, in my layout, the solid-colour image always sits on top of the original image, and I cannot find any way of sending it behind. I would rather not do this in code, I am sure this is a layout issue (but will set it in code if I absolutely must).
Relevant section of layout, where the ImageView needs to sit behind the player 1 ImageButton:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
android:paddingBottom="20dp" tools:context=".MainActivity"
android:id="#+id/Form_PlayerSelection"
android:background="#drawable/dark_wood">
<ImageButton
android:id="#+id/btnPlayer1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="15dp"
android:layout_marginTop="50dp" />
<ImageView
android:id="#+id/p1border"
android:layout_width="62dp"
android:layout_height="62dp"
android:src="#drawable/selectborder"
android:clickable="false"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="13dp"
android:layout_marginTop="48dp"/>
<ImageButton
android:id="#+id/btnPlayer2"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="1dp"
android:scaleType="fitXY"
android:layout_marginLeft="85dp"
android:layout_marginTop="50dp" />
</RelativeLayout>
Each child is added in order and to the top of the ViewGroup. So, the bottom element should be your first child.
I have 4 image buttons which should be aligned like this:
As you can see they overlap, so I can't use a simple table layout, because of "collapsing" table rows. My attempt was to use transparent images among those image buttons while I used nested and overlapping LinearLayouts to align them. With this attempt I don't have to worry about density related calculations. This seemed to work in the first place, but unfortunately one of the invisible buttons overlays the real image buttons, so I can't click at least one image button anymore, because it's like clicking the invisible button, overlaying the real image button.
Another difficulty is that I can't use density related alignments within the xml file. The reason is that these image buttons are scaled in a different way than other scaled images. This is because these image buttons should always be as big as a thumbnail despite of a phone or a tablet. So the usual alignment with margin is not applicable here.
I think the only way to achieve this is to calculate it programmatically. Or any other ideas?
Here's my version (less Views), based on my original tip:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/controller_container"
android:layout_width="240dp"
android:layout_height="240dp"
>
<ImageButton
android:id="#+id/button_invisible_center"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true"
android:contentDescription="button_invisible"
android:visibility="invisible"
/>
<ImageButton
android:id="#+id/button_left"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toLeftOf="#id/button_invisible_center"
android:layout_alignTop="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_left"
/>
<ImageButton
android:id="#+id/button_up"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_above="#id/button_invisible_center"
android:layout_alignLeft="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up"
/>
<ImageButton
android:id="#+id/button_right"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toRightOf="#id/button_invisible_center"
android:layout_alignTop="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up"
/>
<ImageButton
android:id="#+id/button_down"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#id/button_invisible_center"
android:layout_alignLeft="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_down"
/>
</RelativeLayout>
The result is:
I re-arranged the Views in order to minimize their count and therefore increase performances, being the layout lighter.
What was the trick? wrap_content in the container, shrunk everything to the center, whyle match_parent (which worked perfectly) was just out of specifics.
So I gave the buttons fixed sizes 80*80 dp and the container 3 times 80 dp (maximum combined width and height).
The image I used is't "cut out", so it better illustrates the concept.
Enjoy!
[EDIT]
In your case, this part
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
is not needed. Just replace it with
<RelativeLayout
since it's meant to be placed inside another container.
Now I have a solution due to Golem's tip although it doesn't work with just one centered invisible item. I had to place invisible buttons left of "up", right of "up", left of "down" and in the center where one button has 100x100dp, the invisible side buttons have 80x80dp and the invisible center button has 60x60dp. If you know any better, let me know.
<RelativeLayout
android:id="#+id/controller_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left" >
<ImageButton
android:id="#+id/button_invisible_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_top_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up" />
<ImageButton
android:id="#+id/button_invisible_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_up"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_invisible_top_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_left" />
<ImageButton
android:id="#+id/button_invisible_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_left"
android:layout_below="#id/button_up"
android:background="#drawable/button_control_invisible_center"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_center"
android:layout_below="#id/button_invisible_top_right"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up" />
<ImageButton
android:id="#+id/button_invisible_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_left"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_bottom_left"
android:layout_below="#id/button_invisible_center"
android:layout_alignBottom="#id/button_invisible_bottom_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_down" />
</RelativeLayout>
I have a centered background image with a pattern that I am showing using an ImageView. I want it to fill the width and height of all the different screen sizes/densities, but maintain its aspect ratio. I think I have that part figured out, but then I have a foreground image (in a ToggleButton) that is smaller and centered and needs to scale at the same rate of the background image. This is important because the button image has graphical elements that need to align perfectly with the background. How do I get it to scale correctly? Here's what I've got so far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relmain"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
android:contentDescription="#string/bg_desc"
android:src="#drawable/bg_img" />
<ToggleButton
android:id="#+id/button"
android:background="#drawable/btn_on"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:layout_centerInParent="true"
android:textOff=""
android:textOn=""
android:onClick="toggleLight" />
</RelativeLayout>
Thanks for taking a look!
I think you should do it like this according to my skills
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
android:contentDescription="#string/bg_desc"
android:background="#drawable/bg_img" />
May be it will look as you want.
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.