In my app, I have a couple rows of buttons that share a single background image when not pressed, but get an individual background image when pressed.
To clarify myself: the buttons share a parent with a big background image, so the shadows don't interfere. When I press on a button, the transparent background image of the pressed button changes to a version that's pressed down and is put over the background image of the parent. There is a margin on the buttons because the mutual background image has shadows that I don't want the buttons to be on top off.
The current code works great on most devices, but on a tablet the margins are off so the buttons are bigger than the other buttons when pressed.
I know there are different units of measure (dp, sp, pt, px, mm and im), but I can't seem to get one to work like I want it to.
<LinearLayout
android:id="#+id/LinearLayout_volume"
android:layout_width="match_parent"
android:layout_weight="0.2"
android:layout_height="0dp"
android:baselineAligned="true"
android:background="#drawable/knoppen">
<ImageButton
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:id="#+id/Btn_VolDown"
android:cropToPadding="false"
android:background="#drawable/mainbtn"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:src="#drawable/voldown"
android:scaleType="fitCenter"
android:contentDescription="#string/description_volDown" />
<ImageButton
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:id="#+id/Btn_Mute"
android:onClick="onUdpBtnClicked"
android:cropToPadding="false"
android:background="#drawable/mainbtn"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:src="#drawable/mute"
android:scaleType="fitCenter"
android:padding="0dp"
android:contentDescription="#string/description_mute" />
<ImageButton
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:id="#+id/Btn_VolUp"
android:onClick="onUdpBtnClicked"
android:cropToPadding="false"
android:background="#drawable/mainbtn"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:scaleType="fitCenter"
android:src="#drawable/volup"
android:contentDescription="#string/description_volUp" />
</LinearLayout>
So to summarize: I have an image with a certain margin where I don't want anything on top off and I have a button where I have to specify that margin, but I need it to scale with the image
I hope I'm clear enough and thank you in advance
Well i'm not sure if its what u want but if what u mean with an image is ImageView then u can use a linear layout to make your other stuff boxed to stay below your ImageView so it wont ever get on top off that.
Or maybe you can use something like this too
LayoutParams params1 = (LayoutParams)twoLetter.getLayoutParams();//twoletter-imageview
params1.height = 70;
params1.setMargins(0, 210, 0, 0);//top margin -210 here
twoLetter.setLayoutParams(params1);//setting layout params
twoLetter.setImageResource(R.drawable.oo);
i'm not sure what you are trying so sorry for not being so helpful.
Related
For some reason, I need to use a button with both icon and text. So I can't use ImageButton and thus I go for a solution to set the drawableTop of a normal Button.
The Button size is 140dp in square shape (please refer to the screenshot below)
The I was planning to use was 125x125 px and the asset itself is clear and crisp.
However, this 125px asset somehow being enlarged by the button, like the screenshot shown below.
The device is an xhdpi device.
As you can see, the icon inside the square button is blurry which looks like being somehow enlarged
Here I pasted my button XML
<Button
android:id="#+id/button_call_us"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_margin="#dimen/main_menu_button_margin"
android:adjustViewBounds="true"
android:background="#drawable/custom_button"
android:drawablePadding="-20dp"
android:drawableTop="#drawable/button_call_us_icon"
android:lines="2"
android:paddingTop="0dp"
android:scaleType="fitXY"
android:text="CALL US"
android:textColor="#color/white"
android:textSize="6pt" />
The android:background="#drawable/custom_button" is the purple colour background without any patterns.
The android:drawableTop="#drawable/button_call_us_icon" is the icon.
Except android:scaleType="fitXY", I have also tried centerInside and other options, still not getting the ideal result.
My question is:
Why the drawable inside a Button being enlarged? Is there any way to stop it?
Thanks
Since it's a button, and you want a drawable inside the button. Your probable solution would be to use an ImageButton which actually implements drawable properties. You can then call android:scaleType="fitCenter" and set some padding too
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/android_button" />
However, to get more freedom in terms of desing, you could use a simple layout instead of the button, something on the lines of this, just treat the LinearLayout as you would with a button, in terms of adding the onclicklistener:
<LinearLayout android:orientations="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:background="#CCC"
android:padding="8dp"
android:gravity="center">
<ImageView android:src='#drawable/ic_launcher'
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="Lorem Ipsum"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
Try this code
Drawable img = getResources().getDrawable( R.drawable.img );
img.setBounds( 0, 0, (int)(img.getIntrinsicWidth()),
(int)(img.getIntrinsicHeight()) );
button.setCompoundDrawables(null, img, null, null);
Starting in Android development, i wonder how to do this layout in XML (using Android Studio), targeting 4.x Android devices.
How to precisely position 4 buttons on a bitmap background? Should work despite bitmap scaling.
Scenario:
My application main screen should consist of 4 buttons placed on a bitmap. Button positioning should always look exactly like this, and the whole should scale up/down (proportional width/height) to match the screen space. A layout sketch:
Tried solutions:
4 Buttons in a GridLayout with background:
<GridLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:columnCount="2"
android:rowCount="2">
<Button android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button1" />
<Button android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button2" />
<Button android:id="#+id/button3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button3" />
<Button android:id="#+id/button4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button4" />
</GridLayout>
4 Buttons in a GridLayout, above a ImageView in a RelativeLayout.
One ImageView with onTouch() that checks a colorcoded bitmap. (source here)
The only solution that worked ok regarding scaling is the onTouch(), but i'd rather keep using actual buttons so keyboard navigation and press/hover effects work as expected.
How is it possible to position buttons, to have them always match scale with the bitmap?
Thanks for any insights.
Due to the title this question looks like a dupe but i havent found any that demonstrate how this can be accomplished.
I had this problem and I mathed my way around it. It's pretty horrible but let's say that your background image is 500x500px and on an image like that your button is supposed to be at (100, 100) with a size of 50x50px relative to that background image. When you lay it out you have to get the size of the current device, let's say it's 700x800px in size (these devices most likely do not exist). In this case you would have to set the width of your button to (700/500)*50px and the height would be (800/500)*50px . The position of the button would then be at (700/500)*100 and (800/500)*100 .
You are pretty much scaling the button with the background image. Hopefully I'm making myself clear :)
you can try this, hope will help
<ImageButton
android:id="#+id/notificationform_btn_Approve"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/btn_approve"
android:onClick="btnApprove_Click" />
and take a look here
and why don't you use ImageButton instead:
<ImageButton android:src="#drawable/greybutton"
android:scaleType="fitCenter" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
then you can adjust the scaling with the scaleType attribute. The only downside is you can't set any text.
good luck
Let's start with the fun part, here's the graphic of the trouble. Horizontally, everything is beautiful.
The middle button, I'd like to to be aligned with the other three. Here are the basics:
overall, it's a relativelayout
inside this relativelayout, it's a horizontal linear layout, containing the three buttons
the "sinking" of the middle button is 100% correlated with it being a dual line of text, if I change it to a single line, it aligns properly
the specified height of the buttons has nothing to do with the sinking, even at more than double their current size (from current 70 to 170) the exact same behavior (and size of behavior) is displayed
The "custom_button" background has no effect, if I change them all to no background, stock looking buttons, the same positioning occurs
And here's the XML (of just the linearlayout within the relativelayout):
<LinearLayout
android:id="#+id/wideButtons"
android:layout_below="#+id/buttonClockFinish"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="horizontal">
<Button
android:id="#+id/buttonLog"
android:layout_weight="1"
android:layout_height="70dp"
android:padding="0dp"
android:layout_marginRight="3dp"
android:layout_width="fill_parent"
android:background="#drawable/custom_button"
android:text="View Log" />
<Button
android:id="#+id/buttonLocation"
android:layout_weight="1"
android:layout_height="70dp"
android:padding="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_width="fill_parent"
android:background="#drawable/custom_button"
android:text="Location\nD1-RS" />
<Button
android:id="#+id/buttonHelp"
android:layout_weight="1"
android:layout_height="70dp"
android:padding="0dp"
android:layout_marginLeft="3dp"
android:layout_width="fill_parent"
android:background="#drawable/custom_button"
android:text="Help" />
</LinearLayout>
So why on earth is it not aligning?
I was just about to post this question, and did one final experiment. I added a THIRD line of text to the button. This pushed it down even further. But what I realized it had in common was that the text of the top line of the middle button remained perfectly aligned with the text of the two buttons to either side of it.
So it wasn't that it was having trouble with an interior margin, unable to squish the text against the top border. The alignment was of the TEXT, not the button graphic. All along I had thought that there was some mystery :padding that I was not nulling out, but with three lines of button text it was quite happy to have just about 1dp or so of padding.
The solution was to add
android:layout_gravity="center_vertical"
to that button. I added it to the rest of them too, just for consistency.
Lesson: When you think things aren't aligning, perhaps they actually are, but maybe you're looking at the wrong thing.
I am trying to achieve something that on the face of it I thought would be easy but have researched loads and still struggling.
I am setting an ImageView that will act as a background where parts of the image are areas that buttons should sit on top. For example the background looks a bit like this:
This is set to fitCenter so that it scales with the correct aspect ratio on all screen types like this:
Now I am trying to place ImageButtons over the white areas like so:
I am trying this by aligning each Imagebutton to the top left of the background imageView and then setting margins to aset it in the right place. This works for some screen types, but when the background gets resized because the device is smaller than the background image for example I am finding that the buttons on top dont resize with it so I get the effect like the following:
Here is the type of layout I am trying (with just one button here):
<RelativeLayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/outer" xmlns:tools="http://schemas.android.com/tools">
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/imageView1" android:src="#drawable/no_pills_pane" android:scaleType="fitCenter" android:adjustViewBounds="true" android:layout_centerVertical="true" android:layout_centerHorizontal="true"/>
<ImageButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/imageButton1" android:src="#drawable/pill_pink" android:scaleType="fitXY" android:background="#null" android:layout_marginTop="50dp" android:layout_marginLeft="44dp" android:layout_alignTop="#id/imageView1" android:layout_alignLeft="#id/imageView1"/>
</RelativeLayout>
I'm sure there must be an easier way to go about this, any help would be greatly appreciated.
Thanks
Simon
If all you need is to center ImageButton within ImageView, simply set alignBottom, alignLeft, alignRight, alignTop to ImageView
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignRight="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
I'm working an a layout which I will have a bitmap centered, and I'd like the left & right margin bitmaps to scale (horizontally) to fill the screen, such that my center item can be a decorated titlebar, and the left & right are filler bitmaps that match the center bitmaps background, and thus stretching horizontally.
But what I'm seeing is there is a space between the bitmaps. The left & right scale, but there is a space between them.
Eg what I'm getting is:
http://www.58seconds.com/getting.png
What I want is:
http://www.58seconds.com/want.png
Any ideas?
Here is a snippet of the Layout code I use:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:layout_width="1dp"
android:layout_weight="1"
android:layout_height="45sp"
android:src="#drawable/mdjleftfiller"
android:layout_gravity="top"
android:gravity="top"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/command_selection_topImage"
android:layout_width="wrap_content"
android:layout_height="45sp"
android:src="#drawable/top_image"
android:layout_gravity="top"
android:gravity="top"
android:layout_weight="0"
/>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="45sp"
android:src="#drawable/mdjrightfiller"
android:layout_gravity="top"
android:gravity="top"
android:scaleType="fitXY"
/>
</LinearLayout>
Have you thought about creating a 9-patch with your single title bar image? If you have your "stretched" parts on either side of the actual title it will stretch to fit whatever you want without resorting to layout trickery.
Try creating two images, one as a background and scaleType to FIT_CENTER, then set the other one to lay on top and just move to the center.
Here's a nice clean way of doing this, that is pretty much exactly what Lucas was talking about, but in xml:
<FrameLayout android:id="#+id/navbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#drawable/titlebar_repeat">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/titlebar_logo" android:layout_gravity="center" />
</FrameLayout>
In this case titlebar_repeat is just a single pixel wide, and titlebar_logo is just the text with a transparent background. In your case, since you don't seem to want highly stylized text, you could probably just make the ImageView a TextView instead if you like.