I'm trying to draw a button with an image as background.
Here's my xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="13dp"
android:background="#drawable/button_bg"
android:text="Break Record"
android:textColor="#2c4417"
android:textSize="19dp"
android:textStyle="bold" >
</Button>
</LinearLayout>
On the graphical layout view, it looks as I intended:
But on the emulator, the button takes the entire width of the screen:
I've read the specification more than once, but couldn't get what my mistake is,
How do I write the button xml so that the button will look on the emulator (and all devices..) as in the Eclipse's Graphical Layout?
Thanks.
The width of button is due to #drawable/button_bg. If the background image is constant for different densities then hdpi would should button small in size, on the other hand, mdpi and ldpi devices would take more width to show the same button. Confirm that you have different background images and they are relative to their densities.
P.S. Run three different emulators with hdpi, mdpi and ldpi densities respectively and observe the layout.
Related
I still have problems with the correct view for the images in my Application. So on my first device (5,2 inches & 480 density) it looks good.
On the second device (5,5 inches & 420 density) the image doesn't fit and it shows white borders.
This is the ImageView in my layout:
<ImageView
android:id="#+id/iv_image"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#id/tv_topic" />
I placed all my Images in the drawable folder after reading this on a Android Blog:
There are commonly two ways to target all screen DPIs.
1. Easiest way - Make all images to Extra High or Extra Extra High DPI.
Android auto-scales the drawables if the device does not match the drawable DPI. If the only drawables are created in high density, lower DPI screens will down-scale a resource to fit in a layout.
So I implemented all Images in the highest possible resolution ONCE in the drawable folder. Is it necessary to place them all in the specific folders (drawable-ldpi, drawable-mdpi ...)? It would mean that there will be multiple copies of my Image with always the same size.
And yes I read the official documentation of supporting multiple screens a couple times. However I have some problems understanding it.
I advice you to use the layout_weight attribute to keep the constant ratio between the ImageView and the question layout.
Change your layout to something like this :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/iv_image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3" />
</LinearLayout>
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 am making a bus schedule app. I have a lot of buttons in the main activity. My phone has a HD screen, so I made the buttons for that screen resolution.
How can I make the positions of the buttons to fit every screen resolutions?
If you are creating the buttons through xml layouts, then size them using dip (density independent pixels) as opposed to px (normal pixels). If you are pulling these images from resources, then you will have to have resources for all screen resolutions placed within the corresponding folders within the project structure (hdpi, mdpi, ldpi, etc.) - this would consume quite a bit of memory though.
You can use GridView...It will allow you lots of button to equally distributed along the screen.
You can follow these tutorials...
Android GridView Layout Tutorial
Android GridView example
Android Custom GridView Example
Android Custom GridView with Images and Text
You can use GridView for that purpose.
If you do not want to use GridView you can use linear with vertical orientation as main layout and linear layouts that contain buttons with "horizontal" orientation as rows.
To make buttons fit same space on different resolutions you can use layout_weigth attribute.
Something like that
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<!-- yo can define as much buttons as you want -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<!-- yo can define as much buttons as you want -->
</LinearLayout>
<!-- and so on -->
</LinearLayout>
Defining layout this way may be not good for peformance so use it carefully
You can use grid view with 7 rows
GridView gridView = new GridView(context);
gridView.setNumColumns(7);
I did an android application with splashscreen :
splash.xml:
<?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"
android:background="#drawable/splashnine">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:textSize="16sp"
android:text="test" />
</RelativeLayout>
where splashnine.png is very clear with 1333x2000 but the picture is not clear when tha app is launched.
First, you should put different versions of this image to different drawable folders, such as drawable-hdpi, drawable-xhdpi, etc. If you just put the image to drawable folder, it's loaded as an mdpi image and then scaled up.
Second, when you set an image as a background, it's scaled up or down depending on the size of the view. It means that the quality of the image becomes worse because of resizing.
Maybe ,since you use "fill_parent" with layout size parameters, image would be resized according to your device screen dimensions. try to change fill_parent to wrap_content or give DP values.
I have a screen with 4 ImageButton in a 2x2 Grid (using TableLayout).
I need to give support to all the different screen sizes. So I created the 4 layout folders (small, medium, large and extralarge).
It worked ok for the position of the ImageButton. But on large and extralarge screens the ImageButton's size are too small.
I tried to solve this problem using the 4 folders for diferents density (drawable-ldpi, drawable-mdpi, drawable-hdpi and drawable-xhdpi) using the x0.75, x1, x1.5 and x2 relation between mdpi and the others folders.
But I thinks that is not working or is not the right way to resolve this.
It is that the right way to resolved?
I worry about small screen but with Hight Density. Or Medium screen with low density. In those cases maybe is not working, right?
Other idea that I have, is to force the ImageButton's size (measure in dips) on every layout of every sizes folder. It that a better way to resolved?
I really lost with this. I want to apply the best/correct solution.
Can somebody help me?
Thanks and sorry for my poor english
Update:
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<TableRow
android:gravity="center"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_marginTop="60dip" >
<ImageButton
android:id="#+id/newCard_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_new_card_button"/>
<ImageButton
android:id="#+id/showLastTicket_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_show_last_ticket_button"/>
</TableRow>
<TableRow
android:gravity="center"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<ImageButton
android:id="#+id/cancelLastTransaction_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_anulla_button"/>
<ImageButton
android:id="#+id/searchCustomer_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_search_customer_button"/>
</TableRow>
</TableLayout>
Okay, so what I would suggest for this is to use the relatively new qualifiers sw600dp and sw720dp (shortest width: 600dp or 720dp) to define larger sizes for those screens -- those are basically 7" and 10" tablets. You could either define a specific dimen variable and have a larger value in a values-sw600dp resource folder, or actually create a different layout altogether in a layout-sw600dp resource folder, depending on how much needs to change.
You could try to adjust ImageButton's width and height values in your layout by giving exact values like 50dip instead of wrap content. dip value is going to appear in different sizes in different screens as dip means Density Independent Pixels.