put buttons on an image which looks the same in different displays - android

I have a map and wanna put some Buttons on it as pointers. Here is my
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/karte"
android:background="#drawable/my_map"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/btnSP1"
android:layout_width="#dimen/pinpoint_size"
android:layout_height="#dimen/pinpoint_size"
android:scaleType="fitXY"
android:background="#drawable/pinpoint"
android:tag="001"
android:layout_marginLeft="50px"
android:layout_marginTop="90px"
android:onClick="spClick"/>
<ImageButton
android:id="#+id/btnSP2"
android:layout_width="#dimen/pinpoint_size"
android:layout_height="#dimen/pinpoint_size"
android:scaleType="fitXY"
android:background="#drawable/pinpoint"
android:tag="002"
android:layout_marginLeft="100px"
android:layout_marginTop="250px"
android:onClick="spClick"/>
</RelativeLayout>
I have set layout_margin in px or dp or progremmatically in percentage of the display_size:
RelativeLayout.LayoutParams param =(RelativeLayout.LayoutParams)(getActivity().findViewById(id[i])).getLayoutParams();
param.setMargins((int)(xFactor[i]*displySize.x),(int)(yFactor[i]*displySize.y),0,0);
but in all of these methods Buttons change their position when I use different display size.
Is there any idea how to fix Buttons to make their position independent of the display size.

Normally DP or DIP means in android Density-independent Pixels so if you attribute a position to an object obviously it will be fixed.
From your code i see that you should get the equal of your values in DP with this way.
RelativeLayout.LayoutParams param =(RelativeLayout.LayoutParams(getActivity().findViewById(id[i])).getLayoutParams();
param.setMargins(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,(int)(xFactor[i]*displySize.x), context.getResources().getDisplayMetrics()),TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,(int)(yFactor[i]*displySize.y), context.getResources().getDisplayMetrics()),0,0);
I hope that will help you

Related

How to resize nestedlinearlayout in xml

I am trying to resize layout(l2) which is already in other layout(l1).Please let me know how to achieve it.
I want to do it xml.I dont want hardcode dp values such as 50 dp for l1 and 30 dp2.
Generally we use width 0r height as 0 dp and layout weight to partition according to our requirement.Is there any similar way like it.
One possible approach is nested linearlayouts with transparent views inside them (they do not show anything, just take place); layout_width="0" layout_weight="1" will do the job.
is this ok?
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:padding="10dp"
></RelativeLayout>

How to put an ImageView relative to a background image in Android Studio

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);

android:layout_width along with layout weight usage

why should i put android:layout_width="0px" when i use android:layout_weight property? For example following is my main.xml file , and in that i used android:layout_width="wrap_content", and everything works fine, so why android:layout_width="0px" should be used when i am using the layout_weight property?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText" android:hint="enter your name"
android:layout_weight="3"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
android:id="#+id/button"
android:layout_weight="0"/>
</LinearLayout>
and this is how my layout looks:
You certainly don't have to. Additionally weight=0 doesn't make much sense. The weight parameter controls what part of the remaining space in the layout the widget occupies. So setting width=0 effectively tells it to take up only the remaining space. If you set width=30, it will occupy 30 px|dp + all the remaining space. Setting 0 as the width makes it easier to get a predictable result on different screen sizes.
A common pattern is to have two widgets with width=0 and equal weight to make them equally sized inside the parent container, where you don't care about the actual size (width or height).
Layout weight itself is used to give appropriate width as per weight property.
Check this
This attribute assigns an "importance" value to a view in terms of how
much space is should occupy on the screen. A larger weight value
allows it to expand to fill any remaining space in the parent view.
So eclipse suggests to give width as 0px
layout_weight you can specify a size ratio between multiple views.
E.g. you have a Tabelview and a image which should show some additional information to the layout. The tabel should use 3/4 of the screen and image should use 1/4 of the screen. Then you will set the layout_weight of the tabelview to 3 and the layout_weight of the image to 1.
To get it work you also have to set the height or widthto 0px.
http://developer.android.com/guide/topics/ui/declaring-layout.html#CommonLayouts

Position of imageview

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

Apply scale to layout in android

I have a RelativeLayout which currently has a fixed size. Widths, heights, margins, font heights of child views are specified so everything looks just right.
I now want to scale the layout (to fit screen size). The layout should scale as if it was a flat image, so everything gets smaller in proportion (fonts, margins etc.)
I made a simplified example, below. Scaled to 0.5, this would display the text "ONE QUARTER" with margin left 200dip and margin top 120dip.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="1600dip"
android:layout_height="960dip"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView
android:text="ONE QUARTER"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="400dip"
android:layout_marginTop="240dip"
></TextView>
</RelativeLayout>
Of course, I'm not asking anyone to help me hand code an algorithm to scale all these values: just wondering if there's some simple way to achieve this...
Thanks!
If you just want your app to look ok on another device then specifying things in dip and sp should do the trick.
If you actually want to shrink or expand the scale of your app on the same device then you would have to do it manually, perhaps using themes or styles.

Categories

Resources