Develop Reference

ImageButton resizes automatically in gridlayout

I'm asking this (propably) pretty easy question since I can't figure it out by myself and googling in for more then an Hour doesn't give me proper results.
So the question is: How can I make my items(generally those are only 16 image buttons) so they can stay in scale (comparing to gridlayout) when my picture is really large (So in short way: I load 16xImages as src on buttonImages, each Image is 640x640, and I want to have those 16 buttons in grid layout scaled comparing to grid layout width/height and column/row count). I hope this is possible to write in XML since I don't want to refactor my java code :/
Ps. I'm newbie to Android programmig
Ps2.Here is my GridLayout with button example , but it's completly wrong :/
<GridLayout
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:rowCount="4"
tools:context=".GridXMLActivity"
android:layout_below="#+id/Tx1"
android:layout_above="#+id/restart"
android:layout_marginBottom="50sp"
android:layout_marginTop="50sp"
>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/clear"
android:id="#+id/But1"
android:scaleType="fitXY"
android:onClick="but1"
/>
[EDIT]
I've even made such layout , but there are some problems. 1st is that my grid layout doesn't scale at all!(So when I take screen with lower or higher resolution it won't fit). That's why I wanted to make this button some kind of resizeable (in this screen each button has width and height at 60sp which I know it shouldn't)
Another problem is that I'm working on button backgrounds and I wanted to make it src.
Genereally I want to achive same thing like on the screen , but making it other/more flexible way (So the resolution and orientation won't affect my gui and sizes of it's element). If you need whole XML file I'll post it here but it's a bit mess since I've copy-paste 16 times Image Button

If you want something to scale, keeping aspect ratio and you have one dimension set to match_parent, the other must be wrap_content.
So, presuming you want the button to always fit the width but stay at the correct aspect:
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
To make all items fit in grid rather than all items fit their images, you should use weight. Weight with grid layout requires the support library before API21
<GridLayout ...
android:columnCount="2">
<ImageButton
app:layout_gravity="fill"
app:layout_columnWeight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
... />
...

Exact view position on top of ImageView - android

I'm trying to make an interactable imageView by setting some invisible image buttons on top of it, the user can then click different parts of the image and do things with it, the problem is that i need this image buttons to be in very exact positions in relation to the image view, if the phone size varies even a little, the image buttons will get off the positon i want them to be.
The xml where the image view is:
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".fragments.Offroad18nitro4wdbuggy_frontFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="OffRoad 1/8 nitro 4WD buggy front" /> <!-- Here just to show the programmer which fragment is showing -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/ivLosi4_offroad18nitro4wdbuggy_front"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/losi4_18scale_front"/>
<ImageButton
android:id="#+id/ibTest"
android:layout_width="50dp"
android:layout_height="41dp"
android:alpha="0"
android:background="#color/colorGreen"
android:layout_alignParentEnd="true"
android:layout_marginEnd="40dp"
android:layout_marginTop="5dp"/>
</RelativeLayout>
As you can see in the second screenshot, the image button is out of place, my phone is the Samsung Galaxy S6.
Screenshot of the image button in the exact position i want it to be
Screenshot of the app being emulated to my phone

I've dealt with this exact problem before. The workaround that I managed to accomplish is to divide the screen up into several sub-layouts so it looks like a grid of layouts. First divide the screen in half at the center point, then place an empty textview with no dimensions in the center of the top and bottom layouts, which will allow you to divide those layouts into four. Then do the same thing for those four to create sixteen if you have to. Then place your image buttons along the sides or the attached to the center point of whichever of these layouts contains your desired area.
The point is to create a grid that is fixed relative to the center of the screen. That way, if the screen size changes, the grid and the buttons attached to it will adjust accordingly. Its not a perfect solution but it worked for my purposes. Here is a link to a sample xml file from the project that I used this strategy in:
https://github.com/ribalding/AdventureAdventure/blob/master/app/src/main/res/layout/activity_kitchen.xml

Display a image larger than the device screen, and then go through the picture with a translation animation

Now I know how to make the translateAnimation, in order to go through the picture, and show it on the screen.
What I do not know how to do, is put the picture on the screen, and make it in such a way so that it will not scale it by the scale type. So I can start the translateAnimation.
I saw some posts about this, and a lot of suggestions are saying I should use a HorrizontalScrollView, in order to put a picture bigger than the device screen. But I need to make a animation go thought it, and not for me to be able to move the picture, so in my opinion that might not be the perfect way to go.
Do you guys have any other suggestions?

Did not use a horrizontalScrollView, instead, forced the width of the whole layout to be the size of a picture, set a RelativeLayout inside, with the size of the screen, and then made the animations.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="1103dp"
android:layout_height="736dp"
android:background="#color/white">
<ImageView
android:id="#+id/background"
android:visibility="invisible"
android:src="#drawable/story1"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="#+id/screen_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
-----------------CODE inside relative layout for normal page--------
</RelativeLayout>
</RelativeLayout>
Then inside my code I set the screen width and height for my screen container (containing everything except the background picture which will translate):
screenContainer.setLayoutParams(new RelativeLayout.LayoutParams(Math.round(Constants.screenWidth), Math.round(Constants.screenHeight)));
This is my Translation for the ImageView that matches the parent (the size of the background pic):
TranslateAnimation translateBackground = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_PARENT,from,
TranslateAnimation.RELATIVE_TO_PARENT,-0.5f,
TranslateAnimation.RELATIVE_TO_PARENT,0.0f,
TranslateAnimation.RELATIVE_TO_PARENT,0.0f);
translateBackground.setDuration(15000);
background.setVisibility(View.VISIBLE);
background.startAnimation(translateBackground);

Scaling and overlapping ImageViews

I am a bit of an android noob, and have been struggling with this problem for far too long.
What I'm aiming for:
Two ImageViews. The first will be the width of the screen, and drawn to match the proportions of its src image (so far so easy). The second ImageView needs to be scaled, so that its width is a fixed multiple (between 0 and 1) of the first image.
I will ultimately then need to be able to touch-drag the second smaller image around on top of the first, fixed image, although this part is not the point of this question.
This will all generally be done programmatically, as the src images and the scale multiple are not known until runtime.
What I've tried: I can overlay two ImageViews in a RelativeLayout, using alignParentTop and so on. This works fine, but I can't see how to scale the images in this case.
I can alternatively scale the two ImageViews using a LinearLayout, by setting their layout_weights to 1 and the scale multiple respectively. In this case I can't get the images overlapping however (not strictly true - I have managed this with negative margins, but it is a very hacky solution and will make it almost impossible to implement the movement of the top image later).
So my question is: is there a way to fix either of the two solutions I have tried to implement? Or is there perhaps a better way to approach the problem?
(I'm not necessarily looking for an answer in code, just the approach I should take)

Well with what I understand,
You can use a Constraint Layout
Place 1st ImageView on your desired place
with constraints to your parent
Place Second ImageView on your desired place
with constraints to the parent (NOT WITH ANY OTHER CHILD VIEW)
The Approach is if you put a SubView In ConstraintLayout with Constraints to Parent, you can manipulate (Scale / translate) without any effect on other views.
to change the position of the View in runtime you can use
view.setTranslationX() and view.setTranslationY();
you can also create a view programmatically with Constraints to the parent
(my personal preference)
you can use this to overlay different Views in ConstraintLayout
<ImageView
android:id="imageID1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="yourImageStable"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
// put your own constraints-
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</ImageView>
<ImageView
android:id="imageID2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="yourImageUnStable"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
Note: This two constraint value will draw an ImageView from the Top-Left
corner of the Parent View (on Position x=0, y=0)
Remember: the View which you want to overlay should be written next to the other,
like here ImageID2 can overlay ImageID1.
</ImageView>

Android: How do I align textview on a image background that dos not strech in xml

Ok here is the problem...
I have a image background that need some text and additional graphics on it. The background image needs to be in the center of the screen and may not stretch. Here is what i need to do:
The problem is that i need to align the text to the background image.
I've tried to wrap it all into a relative layout - something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bg_image"
android:layout_centerInParent="true"
android:src="#drawable/member_card"/>
<TextView
android:layout_height="wrap_content"
android:layout_alignLeft="#id/bg_image"
android:text="#string/membercard_info"
android:layout_marginTop="40dp"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignLeft="#id/bg_image"
android:layout_marginTop="200dp"
/>
</RelativeLayout>
This will not work since android adds additional padding to the image to avoid it from stretching.
Here is what happens in two different cases:
So how do I align the text to the background image?
I've solved this problem in the past in code by baking it all into one image,- but would like to do this in xml.

If you want to remove padding, you can use manually set it. However, if you want overlapping elements, you generally want to use FrameLayout. Look here: http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/
Set a gravity inside the frame layout to align it.

if you want an ImageView with additional layers drawn on top of that, see this thread: How to maintain multi layers of ImageViews and keep their aspect ratio based on the largest one?

There a padding around the image because you set the imageView size to fill its parent ( using match_parent )
You should try to set it to wrap its content :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
EDIT : If your picture is bigger that the screen size, you need to have it scaled keeping the aspect ratio.
To do this, use match_parent in vertical with a scaleType to FIT_CENTER
and keep the wrap_content setting for the width ( since we want the image view left/right bounds stuck to the image content )
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitCenter"
.../>
Is this better ?