Develop Reference

Replacing image without influencing frame

Here is a small gif of my current situation. I guess many images are better than many words.
As you notice, when I switch for the smaller image, the seekbar size changes. I know this is because of the seekbar's width being set to match_parentand the image's width to wrap_content.
What I don't know is how to overcome this problem, as I can't really hardcode width value otherwise it'll probably get messed up on various screensizes.
So my question is :
Is there a way to prevent this behaviour that is clean? I could simply get the width at runtime and set it as minimal width and it would probably work (heck, I could try it now to make sure), but that is just a horrible thing to do code-wise.
Ideally, I'm guessing there is a way to prevent this in the .xml file, but I couldn't figure it out, playing with the different paddings, margins, scaling and layout sizes.
Here is what you're looking at :
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageButton
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:id="#+id/playButton"
android:layout_alignParentLeft="true"
android:layout_marginLeft="30dp"
android:layout_centerVertical="true"
android:src="#drawable/play"
android:onClick="PlayButtonClicked" />
<SeekBar
android:max="100"
android:id="#+id/volumeSeekBar"
android:layout_centerVertical="true"
android:layout_margin="15dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_toRightOf="#+id/playButton"
android:layout_toLeftOf="#+id/muteButton" />
<ImageButton
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:id="#+id/muteButton"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:layout_centerVertical="true"
android:onClick="MuteButtonClicked"
android:src="#drawable/sound" />
</RelativeLayout>

Ideally it would be nice for the volume icons to be of the same size.
If that is not an option, try replacing android:layout_toLeftOf="#+id/muteButton" with android:layout_marginRight="15dp+30dp+largest_icon_width_in_dp"
where 15dp is your seekbar right margin, 30dp is the mute button right margin.
The third option would be to set a fixed width for the mute button equal to the width of the largest image.

Android: Properly horizontally centering two views for multiple screen sizes

I know this is a question that is asked quite a lot, but none of the answers that have been provided so far have helped me resolve my problem. It's best described with pictures. I unfortunately don't have enough reputation to embed them here, but here's an imgur with three screen sizes demonstrating my issue: http://imgur.com/a/D5uAu
I'm looking for a way to have the "Retrumpets" ImageButton and TextView properly centered for all screen sizes. Right now, they're currently centered using layout_centerHorizontal on the retrumpetTextView, with the retrumpetButton attached to the left of the TextView with layout_toLeftOf, like so:
<ImageButton
android:layout_width="35dp"
android:layout_height="30dp"
android:id="#+id/retrumpetButton"
android:src="#drawable/retrumpet"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:background="#00FFFFFF"
android:layout_above="#+id/detailedTrumpetSeparationLine"
android:layout_toLeftOf="#+id/retrumpetCountTextView"/>
<TextView
tools:text="30 Retrumpets"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/retrumpetCountTextView"
android:textColor="#FFFFFF"
android:paddingBottom="6dp"
android:paddingLeft="2dp"
android:textSize="14sp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/trumpetTextView"/>
This would work perfectly, if not for the fact that what I truly want to center is a combination of BOTH of these views, so that one view or the other isn't too far to the left or right.
My question is: what is the best way to go about doing this? Can I somehow provide an adjustment value to shift both of these views a bit to the right? layout_marginStart and layout_marginLeft don't seem to work when a view is centered.
Thank you very much!
EDIT: Thanks very much all! Combining the two into a horizontally centered LinearLayout did the job perfectly.

You can use a LinearLayout to contain them.
<LinearLayout
android:layout_centerHorizontal="true"
android:layout_below="#+id/trumpetTextView"
android:orientation = "horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="35dp"
android:layout_height="30dp"
android:id="#+id/retrumpetButton"
android:src="#drawable/retrumpet"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:background="#00FFFFFF"
android:layout_above="#+id/detailedTrumpetSeparationLine"
android:layout_toLeftOf="#+id/retrumpetCountTextView"/>
<TextView
tools:text="30 Retrumpets"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/retrumpetCountTextView"
android:textColor="#FFFFFF"
android:paddingBottom="6dp"
android:paddingLeft="2dp"
android:textSize="14sp"
/>
</LinearLayout>
Or just use drawableLeft
<TextView
tools:text="30 Retrumpets"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/retrumpetCountTextView"
android:textColor="#FFFFFF"
android:paddingBottom="6dp"
android:paddingLeft="2dp"
android:textSize="14sp"
android:drawableLeft="#drawable/retrumpet"
android:layout_centerHorizontal="true"
android:layout_below="#+id/trumpetTextView"/>

You should put all those components i.e the "Retrumpets" ImageButton and TextView all in 1 Layout. LinearLayout. Then you can put layour gravity to this LinearLayout to be centered.

You might want to consider putting the ImageButton and TextViews in a horizontal linear layout and use the weights to adjust them correctly. Try setting the layout_weight of each ImageButton to 0 and the TextViews each to 1.

How to position buttons on scaled background image

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

Relative Layout: Different behavior on Api < 11

I don't know why, but layout is shown well on device with Api 11+, isn't for older.
This is xml:
<LinearLayout
android:id="#+id/workers_linearlayout"
android:layout_width="50dp"
android:layout_height="70dp"
android:layout_weight="1" >
<RelativeLayout
android:id="#+id/workers_relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/workers_small" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleX="0.5"
android:scaleY="0.5"
android:src="#drawable/ic_cerchio_rosso"
android:translationX="25dp"
android:translationY="-20dp" />
<TextView
android:id="#+id/workers_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="9"
android:textAppearance="?android:attr/textAppearanceMedium"
android:translationX="25dp"
android:translationY="-20dp" />
</RelativeLayout>
</LinearLayout>
This is result on API 11+:
This on API 10-:
I tried to fix it playing with layouts and I can obtain a quite good result, but never like the first one.
Can someone help me?
EDIT:
Photo on devices:
EDIT2
Triangle warning are:
String "9" should use string resource
ImageView1 and 3: missing content description attribute
RelativeLayout or it's parent possibly useless
Nested weights are bad for performance
By the way, nothing of these fixed solving my problem i think

Ok. I fixed it. Playing with the layout and following NikkyD's suggestion about "center in parent" feature, I followed this policy:
It's not possible to use scale and translation properties because older Apis (maybe) don't recognize them. So, I deleted translation and scaling options and scaled image by setting a fixed height and width for IV3 (30dpx30dp). Now dimension is right, but if I call "align parent Top" with "align parent Right" for IV3 and TextView, their position is good, but TextView is not positioned at the center of IV3. Exactly like this:
For fixing it, I added a new relative layout inside "workersRelativeLayout" and I put inside it IV3 and TextView and set, for each one, "center in the parent" to TRUE. Then, I set for a new relative layout "align parent Top" and "align parent Right". This is the final result:
This is new xml layout:
<LinearLayout
android:id="#+id/workers_linearlayout"
android:layout_width="50dp"
android:layout_height="70dp"
android:layout_weight="1" >
<RelativeLayout
android:id="#+id/workers_relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/workers_small" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerInParent="true"
android:src="#drawable/ic_cerchio_rosso" />
<TextView
android:id="#+id/workers_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="9"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Hope this helps someone :)
EDIT
Pay attention to parent width size. If you set weight's parent to 1, naturally size is dynamic according to display size. The image is positioned always at the center parent and relative Layout of IV3 and TextView will be always top|right. So if parent width size grows, the distance between image centered and new relative layout grows too, and can happen something like this:

The first LinearLayout has a weight. If it has a weight, then it needs to have one dimension set to 0dp, that would be the dimension in which it is scaled by its weight.
All 3 elements of the Relative Layout have "centeredinparent" true. The parent is the RelLayout.
IV3 has a height of match_parent, so it will be stretched to the height of the rel-layout. I am pretty sure that this overrides your scale 0.5 options.
Im not that sure but id guess the rel-layout centeredinparent overrides the translation as well.
Layouts are VERY ugly with options. Some are considered superior to others and they dont take effect. I played around a fair bit of time with relative layouts and found out, that in my case i could only arrange them with "below" but never "above" because for some reason the above positioning would not work (not even in the eclipse preview!!) but there was absolutely nothing wrong with the xml.
So im guessing some of your options overrule the others and this comes to bear on more modern APIs as they might be even more restrictive (or more broken, its still android ;) )

Android View Layout Scaling bitmaps

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.