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.
Related
I think the solution will be quite obvious, but as long as I'm rookie in android forgive me :)
I want to place some picture on the right upper side of the view, and a textview, which will fit the rest of the view. Here's what I've done:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/logo_in_listing"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_alignParentRight="true"
android:layout_marginRight="11dip"
android:layout_marginTop="11dip"
android:background="#drawable/border_for_imageview"
android:src="#drawable/facebook_logo" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/someString"
android:id="#+id/textview1"
android:layout_toLeftOf="#id/logo_in_listing"
android:layout_margin="3dip"/>
</RelativeLayout>
Here's what I get:
My questions:
1) How to make the textview fit also the lower part of imageview? I don't want that space to be left unused.
2) As you see, I've used dips for placing ImageView. What would you recommend in this case? I mean, how to write in a way, that it will be same for all screen sizes? Or maybe dip is OK?
You have to use Spanned interface. Here's a good example
1) How to make the textview fit also the lower part of imageview? I
don't want that space to be left unused.
Flow around text isn't possible with currently available layouts. However you can display content as HTML in a WebView or even spanned-HTML in a TextView.
2) As you see, I've used dips for placing ImageView. What would you
recommend in this case? I mean, how to write in a way, that it will be
same for all screen sizes? Or maybe dip is OK?
Dip is for device independent pixels. On different screen sizes, 1 Dip will take different number of pixels, but visually, 1 dip will appear almost same to eye on all screens.
If You don´t want to left space, You could use spannables. For example:
int TEXT_START = 0;
int TEXT_END = yourTextView.length();
Spannable span = (Spannable) yourtextview.getText();
span.setSpan(new AlignmentSpan.Standard(Alignment.ALIGN_CENTER), TEXT_START, TEXT_END,
0);
For Your second Question: use dp instead of dip.
THE ISSUE:
I cannot seem to get my ImageButtons to appear in the right place or be the right size.
THE PLATFORM:
Eclipse with Android API 16
THE PROBLEM:
My RelativeLayout is 600x800 and my ImageButtons are 194x64, yet when I put them in the editor they are twice as big as they should be. See link to image.
My XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android1="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/main_portal_bg" >
<RelativeLayout
android1:layout_width="353dp"
android1:layout_height="758dp"
android1:layout_marginLeft="115dp"
android1:layout_marginTop="29dp"
android1:background="#000000" >
</RelativeLayout>
<ImageButton
android1:id="#+id/new_customer_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_marginTop="89dp"
android1:contentDescription="#string/back_button_desc"
android1:background="#drawable/new_customer_button_selector" />
<ImageButton
android1:id="#+id/returning_customer_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentLeft="true"
android1:layout_below="#+id/new_customer_button_selector"
android1:contentDescription="#string/back_button_desc"
android1:src="#drawable/returning_customer_button_selector" />
<ImageButton
android1:id="#+id/redeem_coupon_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentLeft="true"
android1:layout_below="#+id/returning_customer_button_selector"
android1:contentDescription="#string/back_button_desc"
android1:src="#drawable/redeem_coupon_button_selector" />
<ImageButton
android1:id="#+id/info_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentLeft="true"
android1:layout_below="#+id/redeem_coupon_button_selector"
android1:contentDescription="#string/back_button_desc"
android1:src="#drawable/info_button_selector" />
</RelativeLayout>
THE RESEARCH:
I have tried to use ScaleType of FitXY, setting MaxHeight and MinHeight, and using android:background instead of android:src. The only way I have been able to make them smaller is by using the Graphical Editor to resize them by holding down SHIFT and dragging the bottom-right corner. That also unfortunately forces them to be automatically aligned to the bottom of the layout and when I try to move them they snap back to their original size and all the other buttons get shuffled around the layout. Editing the XML only gets me part of the way there.
THE QUESTIONS:
Every time I try to move a button in the Graphical Editor, all the other buttons get shuffled in a seemingly random pattern around the screen. Why does this happen?
I set a width of 194dp and a height of 64dp. Changing these values does nothing. Why doesm't this affect the actual width and height of my ImageButton?
When using the Graphical Editor to resize the button by holding SHIFT and dragging the corner, this doesn't change the width and height values in the XML, but just adds margins. See resulting XML below:
<ImageButton
android1:id="#+id/new_customer_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentBottom="true"
android1:layout_alignRight="#+id/returning_customer_button_selector"
android1:layout_marginBottom="408dp"
android1:layout_marginRight="86dp"
android1:layout_marginTop="89dp"
android1:background="#drawable/new_customer_button_selector"
android1:contentDescription="#string/back_button_desc" />
HERE IS MY FINAL GOAL:
Please tell me how I can get there. This simple thing should be easier.
After reading the information supplied at developer.android.com/guide/practices/screens_support.html, I now understand the 4 different types of screen density. Thanks CaseyB for that link.
I calculated my screen density at roughly 160, after using the utility I found at http://members.ping.de/~sven/dpi.html.
My problem was that the default AVD created by the AVD Manager has the LCD density set to 240 (high).
After setting it to 160, my project rendered with the buttons the correct size.
I left all my drawables in the drawables folder, since I am developing for 1 screen resolution and density. If I decided to use another tablet, then I might make use of the other folders.
TIP: Don't depend on the Eclipse Graphical Editor for asset alignment or sizing. I'm not sure its entirely accurate. I use the old edit the XML and run the project method when trying to adjust size and spacing.
I recently tried to position an imageview's x and y coordinates with no luck, it seems there is no way to do it in Gingerbread. I then decided to try out paddings and margins, but when I set them, it shrinks my imageview. I set a left padding of 250dp and image view became tiny. The layout_height and width are set to wrap_content. I'm not sure what's going on. Does anyone know why setting a padding/margin would shrink an imageview?
You're confusing margin and padding. Margin is the area outside of your view, while padding affects the content inside your margin.
If you set padding, then it is going to affect your available content area, and assuming you have a ScaleType set, it's going to shrink your image down to fit the available space.
Now, you say you've tried margins, but margins will do exactly what you're asking.
For example, if you wanted an ImageView placed 10dp from the top-left corner, you can do something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/my_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:src="#drawable/my_image_id"
/>
</RelativeLayout>
Keep in mind that this places it 10dp with respect to the parent boundaries. If your parent layout also has padding, then that will affect your content placement.
if by shrink you mean the picture's ratio is messed then you should use
android:scaleType="centerInside"
this will prevent the ratio from changing
I am using relative layout to superimpose one smaller image on top of a larger one.
I want the bottom-right corner of the smaller image to coincide with B-R corner of the larger image. I'm using margin parameters in my layout XML (specifying measurement in dips) but this doesn't seem to work for all devices and resolutions - in some cases the small image is shifted by 4-5px from the border.
Is it possible to specify the position of the smaller image without pixel values? I.e. with gravity or something?
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/big_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bigimage"/>
<ImageView
android:id="#+id/little_image"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_alignRight="#id/big_image"
android:layout_alignBottom="#id/big_image"
android:src="#drawable/littleimage"/>
</RelativeLayout>
Nice thing about RelativeLayout is that you can use relative positions and dimensions, instead of using specific dips or pixels. In the case above, I just played with the android:layout_align* parameters, to make sure that both images are aligned. Keep in mind that I set a specific dimension of the little image, but you can change that to fit your needs.
I'm trying to get my textview to hug the left side of the screen while the button hugs the right side (and if possible just for ocd sake have the text view center itself vertically to be in line with the button) but not do it using absolute values. Here's my coding:
<?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"
>
<TextView
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Change City:"
/>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Click"
android:id="#+id/citychoicebutton"
/>
</LinearLayout>
I thought layout_gravity took care of what I'm trying to do but apparently not.
Gravity specifies how to place the element within the element itself, not within the boundaries of the parent (screen).
What this means is if your text takes only 50px in width but you have allocated 100px to TextView, the actual characters will place themselves to the left, center or right of the 100px space (as per gravity value).
With a LinearLayout, you will have to assume a screen width to reach your desired effect and use "dip" as a unit, and hope for the best (test it on different screen sizes on your emulator).
A better alternative is Relative Layout, and use android:layout_alignParentLeft and android:layout_alignParentRight.
Incidentally, it is recommended to use "dip" (density independent pixels) and not "px" for layout units in general.
Density independent pixels unit is now "dp". "dip" still works though.
You could try using RelativeLayout with
android:layout_alignParentLeft
for TextView and
android:layout_alignParentRight
for Button. To align the button and TextView you could use
android:layout_alignbaseLIne
attribute on Button.