I'm trying to make a widget that would be 4x1.
I set the provider as follow
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="294dp"
android:minHeight="72dp"
android:updatePeriodMillis="0"
android:initialLayout="#layout/widgetlayout"></appwidget-provider>
and the widget layout is as follow
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="320dp"
android:layout_height="100dp"
android:background="#drawable/widgetframe">
<Button android:id="#+id/butscan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me" />
<Button android:id="#+id/butenable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="On/Off"
android:paddingRight="5dip"/>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="4dip"
android:includeFontPadding="false"
android:id="#+id/lblcurrent"
android:text="Test"/></LinearLayout>
Now when i try this on the emulator, i get only the middle of the layer shown on the home screen. The background image is the 4x1 portait image from the SDK (320x100).
What am i missing?
Your layout width and height for the LinearLayout should probably be fill_parent.
You buttons do not have any resources for graphics but I assume that you are assigning something like drawables or bitmaps in code, otherwise they might not show. I have never created a button without an image, so I do not know how it would act.
I am suprised that your 'Test' text is not showing, but it could be diplaying outside the size of your widget since your background is bigger thatn the widget itself. Again, try fill_parent instead of 320dp and 100dp (BTW, I have never used 'dp' only 'sp').
Your TextView is taking over the layout due to fill_parent.
You should probably add layout_weight=1 to it, so it only scales to the available space.
Related
How can I adjust EditTexts and Buttons to fit any screen size for android ? I'm trying to put some transparent EditTexts and Buttons in certain positions to fit my background image, but when I change screen size every thing changes. Here are my background image and my XML code :
<?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:background="#drawable/login_page"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="10sp" >
<EditText
android:id="#+id/etLogin"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10sp"
android:layout_marginTop="135sp"
android:background="#android:color/transparent"
android:hint="Login"
android:inputType="textCapWords"
android:padding="8sp" />
<EditText
android:id="#+id/etPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="0sp"
android:layout_marginTop="-3sp"
android:background="#android:color/transparent"
android:hint="Password"
android:inputType="textPassword"
android:padding="8sp" />
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12sp"
android:background="#android:color/transparent"
android:minHeight="40sp"
android:minWidth="500sp"
android:text="Login"
android:textColor="#08b0ef" />
</LinearLayout>
I tried other units like dp and dpi and dip but no one is giving the expected result.
Have you tried using "android:layout_weight" ?
I think what your talking about to set your Layout objects in a certain position relative to the background and once set, stay fixed proportionally so when the background stretches our contracts so do the buttons so they stay in the same position over the background?
If so (I could be way off),
setting the layout_weight attribute inside of each child object of the LinearLayout can let you position everything relative to the screen size so it automatically changes with each screen size. It will take a little trial and error to get the right percentages but should work.
Also consider creating multiple xml layout definitions for the major screen sizes so the OS automatically calls the one it needs for a particular screen with a resource qualifier, that way you know it will display in the right position. For example a xml called activity_main in R.layout is inflated by default but if you also create a activity_main in R.layout-land, this XML will only be inflated if the screen is in landscape mode. So you can set the sizes of your editText and Buttons for multiple screen size.
If you want to create only one file for all layout and trying to make your screen universal, you should try Linearlayout with weight property.
Instead of using sp or px, you should use pd for margin, padding or any other properties in your layout. dp will render differently as per screen resolution.
I have a problem to make a proper layout for a special case. I experimented on that already for a while both in the designer and in code, but I couldn't find a solution, that's why I need your help.
I have to create a layout which should have a structure like pictured in the images below. It is mainly a combination of several linearLayouts. The problem I have is, that the picture can only be added within the code, because this layout is a detail view that displays information about items from a list.
On the top is the layout without an image place holder (no loaded picture - indicated in black), here the width of "linearLayout_BigLeft" is given by the width of the two buttons and the textView (which all have content) in the "linearLayout_BelowImage".
In the middle you see the layout after the picture has been loaded (image indictated in orange) in code. Depending on the aspect ratio of the android device the black colored gaps differ. I can't get the image to resize to the whole available height and adjusting its width accordingly. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
On the bottom is the layout which shows the ideal state. The image always should use the whole available space in height and resize accordingly in width. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
Question:
How can I get a layout (after the image is loaded in code) that looks like the bottom picture? The image, after loaded in code, has to resize itself, so it uses the whole available height and resizes its width accordingly. The "relativeLayout_Top" and the "linearLayout_BelowImage" have both fixed heights. The "scrollView_BigRight" adjusts itself based on the space that the "imageView_OrangeImage" doesn't need for itself.
I can deal with solutions that adjust the layout in code, after the image has been added, or solutions that makes the layout.xml itself flexilbe enough to deal with this situation.
Any help is highly appreciated. If you need any more information please let me know.
Below is the main content of my layout.xml, that is needed for this problem.
<?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="vertical"
android:background="#color/white">
<RelativeLayout
android:id="#+id/relativeLayout_Top"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/blue" >
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout_Big"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/transparent" >
<LinearLayout
android:id="#+id/LinearLayout_BigLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/transparent" >
<ImageView
android:id="#+id/imageView_OrangeImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/black" />
<LinearLayout
android:id="#+id/linearLayout_BelowImage"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/blue_white_blue" >
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
<TextView
android:id="#+id/textView_BelowImageMiddle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:id="#+id/scrollView_BigRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/grey" >
</ScrollView>
</LinearLayout>
</LinearLayout>
android:adjustViewBounds="true"
This one’s a manual fix for “optimized” code in scaleType="fitCenter". Basically when Android adds an image resource to the ImageView it tends to get the width & height from the resource instead of the layout. This can cause layouts to reposition around the full size of the image instead of the actual viewable size.
AdjustViewBounds forces Android to resize the ImageView to match the resized image prior to laying everything else out. There are times where this calculation won’t work, such as when the ImageView is set to layout_width="0dip". If it’s not working, wrap the ImageView in a RelativeLayout or FrameLayout which handles the 0dip flexible size instead
get it from this site
OR
Mode android:scaleType="centerCrop" uniformly stretches the image to fill the entire container and trims unnecessary.
You can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself!
get it here
I got a problem in a project with the following structure. On each emulator (also large screens) a button positioned within a simple relative layout using that code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/first_bg" >
<Button
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="202dp"
android:layout_marginRight="54dp"
android:background="#drawable/m_button"
android:text="#string/next" />
</RelativeLayout>
appears fine. BUT testing the app on Galaxy Note has shown that the button just flies away to some crazy positions. I used an emulator with similar configuration and the button appeared properly. I have no idea where the problem could be..
Have you tried to use a linearlayout instead?
With it you don't nedd to set the margin, just the position
It's based on the density-independent pixels (dp units), it'll show up at different positions on different phones.
http://developer.android.com/guide/practices/screens_support.html#density-independence
I would like to place an image into the background of my activities. This image is effectively a circle shaped logo which will be semi-transparent, and should sit behind any other content on the UI. I will also offset it into the bottom corner.
What is the best way I can place this image without it become "squashed" (egg shaped) under varying screen dimensions? My app will operate in portrait mode only.
This is what I'm trying to achieve:
So far, I've placed my circle image onto 3 white rectangle canvases for the popular sized screens 480x854, 320x480 and 240x320 which seems to work, but I don't think its very solid.
Any tips?
This probably is not the perfect solution, and will require a bit of maintenance on the UI, but here's my thought:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginRight="-15dp"
android:layout_marginBottom="-15dp"
android:src="#drawable/circle"
/>
<!--Rest of Layout goes here-->
</FrameLayout>
Just wrap this around your current layout, and adjust the right and bottom margins to whatever negative margins you wish for the offsetting. This should work for any screen size, assuming you have drawables for each density.
EDIT: Yeah, you also shouldn't have to worry about a white rectangle this way, either. Just add the android:background tag to the FrameLayout with whatever color you want for the background, and save the logo as a transparent PNG.
I would do it like this, use a relative layout to have an ImageView in the background with on top of that a relative layout containing the rest of your layout
This way the image is as big as it can be keeping the correct dimensions
<?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:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:scaleType="centerInside"
android:src="#drawable/splash_picture"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<!-- rest of your layout -->
</LinearLayout>
</RelativeLayout>
My ImageView for some odd reason is always displaying a picture in the middle, left of my screen despite the xml code insisting it to be in the center.
I force portrait orientation in my app and here is my xml code for my layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="center">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/image_view"
android:layout_weight="1.0"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/message"
android:gravity="center_horizontal"
android:padding="10dip"/>
<Button
android:layout_gravity="center_horizontal"
android:layout_width="fill_parent"
android:textStyle="bold" android:id="#+id/action_button" android:selectAllOnFocus="false" android:layout_height="100dip" android:text="Click here to preform actions"/>
</LinearLayout>
So, the page should display as Picture in the middle, extending the width of the screen, the text below that and the button below that. But for some reason, the picture is displayed as a small, box thumbnail in the middle left of the screen - any ideas on a workaround?
Assuming you want your picture centered inside a top box here, you don't want android:gravity="center", you actually just want android:scaleType set on the ImageView itself. "center" is the right value if you don't want scaling; centerInside is probably appropriate if you do (in which case you'll need to define some sort of dimensions or weight on your ImageView). For more on scaleType values, see the documentation.
You also don't want the image height set to fill_parent, or it will do that (which means no text below it, since the image fills the entire parent LinearLayout leaving no room for text). You probably want the ImageView's height set to wrap_content or some fixed height (e.g. 100dip).