I am developing an application. The need is as, i want to create a layout as shown in figure :
In this, I took a relative layout to which I had given an image as background.
The image is not having red dot (buttons).
I placed the red button as image button at fix position. When i run it on my galaxy s2 it looks fine and work fine too.
But when I tested this layout on my LG optimus L3 E400. The red buttons are not on their position as i set.
The code of layout is :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background" >
<TextView
android:id="#+id/textview_navigationbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/navigationbar"
android:text="#string/string_map"
android:gravity="center"
android:textIsSelectable="false" />
<RelativeLayout
android:layout_below="#+id/textview_navigationbar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="50sp"
android:layout_marginBottom="50sp"
android:background="#drawable/map">
<ImageButton
android:id="#+id/imagebutton_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dip"
android:layout_marginLeft="50dip"
android:background="#drawable/button_1" />
<ImageButton
android:id="#+id/imagebutton_2"
android:layout_below="#+id/imagebutton_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dip"
android:layout_marginLeft="6dip"
android:background="#drawable/button_2" />
<ImageButton
android:id="#+id/imagebutton_3"
android:layout_below="#+id/imagebutton_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dip"
android:layout_marginLeft="40dip"
android:background="#drawable/button_3" />
</RelativeLayout>
</RelativeLayout>
In my LG Optimus L3 E400 it looks like :
The red buttons are not on position.
I don't want to use map view for this as i don't know and never used it.
Please guide me how to move out of this problem. As how to create layout for maximum resolution and screen support.
The easiest way is to create a custom view that holds the image (bitmap) and the buttons on top of it, and use onDraw method to draw your buttons, and analyse the coordinates on onTouch to create your touch events.
If you maintain your image's aspect ration (width:height) you can easily map the buttons to a suitable location using scaling.
Here is a list of custom views examples:
Android Developer's Custom Views
With Touch handling
Another example
You can also use AndEngine a 2D graphics/gaming engine for android, and it will take care of the scaling for you.
Take a look here : official website , examples
This can be done best with Canvas.
Or the easier way to do this would be edit the image and add those red dots in image itself.
you can use onTouchListener and in onTouch you can get the x and y coordinate to accomplish your task
Something like this:-
public boolean onTouch(View v, MotionEvent event) {
int x = event.getX();
int y = event.getY();
//handle your events on basis of x and y
}
This is'nt the best way to handle it. But should work.
Related
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
For my GUI i use the RelativeLayout and want to keep it as it is the best for different screeen resolutions.
For example i have this Background, where i want to put an ImageView exactly over the TV-screen (to show some pictures on the TV).
I want this to work in different screen resolutions.
How can i achieve this? Or is this even possible? Examples are welcome :)
My Background Image:
If I were you, I would separate the TV image from the background and make it a new ImageView. Then you can set the position of TV-Screen ImageView regarding to the TV ImageView.
Well i think you can try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_launcher"></RelativeLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:src="#drawable/ic_launcher"
android:layout_alignTop="#+id/back"
android:layout_alignRight="#+id/back"/>
</RelativeLayout>
But i think there could be an issue with different resolution try this and let me know if it worked.
You can have your TV as a PNG. Carve out the screen from this image. This will make the TV image TRANSPARENT for the screen(red outlined portion)
Next, your images/screen-slides must be exactly same as the TV image in terms of width and height. However, the actual content of the image/screen-slides must only be in the hollow portion.
I think i figured out how to do this.
At first i changed the background-picture from a Layout-Background to an ImageView:
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:src="#drawable/background1"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:scaleType="fitXY" />
Then i can set the TV-image relative to the Background-ImageView's f.e. top and right margin. (looks hardcoded like this)
<ImageView
android:layout_width="125dp"
android:layout_height="85dp"
android:id="#+id/imageView1"
android:src="#drawable/tvImage"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="44dp"
android:layout_marginRight="169dp"
android:layout_marginEnd="169dp"
android:scaleType="fitXY" />
Basically there are now two things i have handle, to make the TV-image fit when changing the screen resolution:
1) the width and height of the picture.
2) the position of the picture.
To find out 1):
My Background is f.e. 500x250dp.
In an Image program i measured the size i need for the TV-image: 125x85dp.
Now i can calculate the width and height back depending on the background size.
500/125 = 4 for width calculation
250/85 = 2,9 for height calculation
So if the Screen changes for example to 800x400dp the width and height for the TV-image an be calculated like this:
800 / 4 = 200dp
400 / 2,9 = 137dp
So my TV-image should have a size of 200x137
To find out 2)
Again i have to calculate like in Point 1). Find out the position of the TV-screen and then set the layout margins according to the calcualtions. I havent implemented this point yet, so i can't explain more, but i think you get what i want to say. If not feel free to ask :)
And in the end, i can setup the TV-image with this code (hardcoded values should be the calculated variables!)
RelativeLayout.LayoutParams layoutPar = (RelativeLayout.LayoutParams) tvImage.getLayoutParams();
layoutPar.setMargins(0,88,210,0); // or whatever
layoutPar.height = 137;
layoutPar.width = 250;
tvImage.setLayoutParams(layoutPar);
I want to desing a rotary half wheel menu on android with eclipse. I have a full wheel image and I want to place it to the bottom of screen. I must place that full wheel's midpoint on the bottom of screen for obtaining half wheel menu. I have tried that code on xml
Its simulation on emulator did not satisfy me. Because the wheel image is on the center of screen. I want it to place on the bottom for my rotary half wheel menu application. I also know that I can set it with android:layout_marginTop="600dp" , but I want to provide compatibility of other screen sizes on mobile phones which use android operating system.
You can use RelativeLayout Outside of that image and set property in image android:layout_alignParentBottom="true"
like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
I want to place an image at the right of the screen width minus 20 dp on a android device.
The pseudo code for this could be:
Get Image from res/drawable folder.
Set position of image - this has to be the screen width minus 20 dp,it should calculate the screen width and then set the position ( Is this possible in xml? )
Render the image.
Parts 1 & 3 are clear, but the second part I guess is tough & is where I need some help.
You can use a RelativeLayout as a container. Set android:layout_alignParentRight="true" and android:layout_marginRight="20dp" on an ImageView within this layout.
You can get more information here.
My understanding is that you will need to do this in a Java class where you get the dimensions of the window, do your calculations and then set the position of the image within the onCreate() Method.
Yes, you can get it with xml too:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:layout_marginRight="20dp"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon" />
</LinearLayout>
Note that android:layout_marginRight="20dp" sets padding from right
I have some image like this
and I want to make the red areas clickable areas.
I want to make this areas clickable meaning when user touches the screen at some red sot I want to be notified a.i I want to register a listener.
The problem is with that the image is different size for different screen, some screens have a size of 240x320 some 400x800 for the image view I use fill_parent so the image will fill the whole screen in every screen. and this clickable areas sometimes will be 50dip from the left border sometimes will be 150dip. Sometimes it is 10dip from the top sometimes it is 500dip... everything depends on the screen size
how to handle this kind of scenario ?
The best way is to cut your image for separate pieces, and put them inside RelativeLayout.
Then set click listener for those images where you need.
Another way you could handle this is determine screen size and calculate touch areas:
final Display display = ((WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
final int width = display.getWidth();
final int height = display.getHeight();
I found a very good tutorial on this site here: http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
The way you do it:
- You have 2 images.
- 1 is the background and the other is on top of it and is an invisible mask.
- The mask gets an OnTouchListener.
- The mask has different colored areas(your touch areas).
- If you touch the image, the mask checks for the color and do an action.
The nice thing is: If you scale the image, the touch areas also scale, so you will always have your touch areas on the right position.
It is pretty straight forward. Hope i could help, even if your question is older than a year.
Here is another example (last). You just put on top of your image transparent buttons and handle click.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#android:drawable/edit_text" />
<Button
android:id="#+id/bottomLeft"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:color/transparent" />
<Button
android:id="#+id/center"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#android:color/transparent" />
<Button
android:id="#+id/bottomRight"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerInParent="true"
android:background="#android:color/transparent" />
</RelativeLayout>