I'm quiet a fresh starter with android and I'm trying to have a screen filled with 4 buttons below each other, I've made 3 different layout folders layout_normal, layout_large and layout_xlarge. for normal I've set width and height both to 120dp and for xlarge I've set them to 170dp both, resulting in a square shaped buttons. I've tested it on my LG-E975 and it was fine, I've teste on Samsung Galaxy tab 10.0 and it was also fine but then I've created some emulators for other devices to test and it was messed up, the fourth button is not in the screen, emulator only shows 3 buttons.
Emulator info:
target: Android 4.2.2
Skin: 320 x 480
hw.lcd.density: 160
Both my LG and emulator are considered Normal screen size as I checked.
I know there are alot of articles about this matter but I'd be thankful if someone explain it to me in an easy way to understand. Should drop using fixed sizes for my buttons?
EDIT: here is my xml for layout-normal
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.kaw.mp2.MainActivity"
android:background="#color/background_all" >
<Button
android:id="#+id/btn_main_aboutus"
android:layout_width="120dp"
android:layout_height="120dp"
android:text="#string/btn_aboutus_text"
android:layout_centerHorizontal="true"
android:layout_alignParentRight="true"
android:layout_marginTop="20dp"
android:background="#color/background_btn"
android:textColor="#color/text_color_btn" />
<Button
android:id="#+id/btn_main_contactus"
android:layout_width="120dp"
android:layout_height="120dp"
android:text="#string/btn_contactus_text"
android:layout_below="#id/btn_main_aboutus"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:background="#color/background_btn"
android:textColor="#color/text_color_btn" />
<Button
android:id="#+id/btn_main_products"
android:layout_width="120dp"
android:layout_height="120dp"
android:text="#string/btn_products_text"
android:layout_below="#id/btn_main_contactus"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:background="#color/background_btn"
android:textColor="#color/text_color_btn" />
<Button
android:id="#+id/btn_main_news"
android:layout_width="120dp"
android:layout_height="120dp"
android:text="#string/btn_news_text"
android:layout_below="#id/btn_main_products"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:background="#color/background_btn"
android:textColor="#color/text_color_btn" />
</RelativeLayout>
I assume you want 4 buttons in a vertical row (horizontally centered). If I understood this correctly you should be using a LinearLayout, with which you can specify weight on the different components. Think of it as priority. If the buttons all have the same weight, they will all scale to fit the screen.
Change the RelativeLayout to a LinearLayout and add the property:
android:orientation="vertical"
The buttons should all have the same height, and
android:layout_centerHorizontal="true"
You can remove
android:layout_below="#id/btn_main_aboutus
Then add your margins and preferences as you wish.
Related
I'm new in android.
I have create a simple example to test the scaling function of Android on Nexus One and Galaxy Nexus.
This is my layout:
<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"
android:background="#drawable/sfondo"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.testlayout.MainActivity$PlaceholderFragment" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:layout_marginTop="22dp"
android:text="#string/hello_world" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_marginLeft="16dp"
android:layout_marginTop="75dp"
android:layout_toRightOf="#+id/textView1"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_centerVertical="true"
android:text="#string/hello_world" />
</RelativeLayout>
Using a particular background image with specific text positions, I have that the positions of text are correct in one device and not in the other.
This two phones are in the same layout category: normal.
Why do I get two different results?(also using dp)
how can I do to have the same result in both devices?
Thanks
With dp you ensure the physical size of the Views and of the margins is the same on all devices.
That means if you use a background image that fills the whole screen, and you have devices with a different screen size, the locations on the image of the Views will be different for each device.
Small example:
Take a 10cm screen, 160 dp. Use a margin in dp that will physically result in a 1 cm margin (10% of the screen).
Now take a 20cm screen, 160dp. With the same margin in dp, pysically it will still be 1cm, but that is only 5% of the screen. But the physical size of the background will be double of the size it has on the 10cm screen, so the positioning will be off.
One solution for this problem would be to do the positioning in code, so you can scale the based on the available pixels of the screen, but generally I'd not recommend you to use such a background image that needs absolute positioning of Views on it.
Okay!
I am developing android application right now, but I want to know how I can fit all the layoutouts to the a multiple device screens.
* I did made multiple screen folders.
res/layout-small/main.xml
res/layout-normal/main.xml
res/layout-large/main.xml
res/layout-xlarge/main.xml
* Here is an example of my code.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="120dp"
android:layout_height="70dp"
android:text="#sting/button1" >
<Button
android:layout_width="120dp"
android:layout_height="70dp"
android:text="#sting/button2" >
<Button
android:layout_width="120dp"
android:layout_height="70dp"
android:text="#sting/button3" >
<Button
android:layout_width="120dp"
android:layout_height="70dp"
android:text="#sting/button3" >
</LinearLayout>
</LinearLayout>
As you can see, I used 120dp for every buttons.
When I ran in the virtual device machine, the screen is fit. (Because I used 480dp width screen in virtual device machine.)
However, when I ran in real cell phone devices (Mine: SamSung Galaxy Note 1(Korean version), my dad's: SamSung Galaxy S2(Korean version), and my mom's: SamSung Galaxy S(Canadian version)), even though I created different screen size of folders, I can see the (width) of the button is go too far from the device's screen layout.
Can anyone tell me how I can fit to all the device screen?
Can I still use dp in this case? (Please give me an example too!)
You need to read up on using LinearLayout and RelativeLayout (and other layouts). You're not using their layout parameters at all. You shouldn't need to specify any specific size (like 120dp) to support multiple screen sizes for your situation.
http://developer.android.com/guide/topics/ui/declaring-layout.html
Here's what you should do:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#sting/button1"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#sting/button2"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#sting/button3"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#sting/button4"
android:layout_weight="1" />
</LinearLayout>
I feel like I'm the only one lost here. Everyone seems to be fine with using DP to make apps work across multiple screen sizes. For me, whenever I load up another screen, the alignment will never be the scale properly.
However, if I use android:weight everything will scale fine across all devices. The problem I have with android weight for everything is that it doesn't always want to resize images well into layouts, not to mention the warnings I'll get for using nested weights.
One solution I see is creating a new screen size for each possible screen sizes out there. Is this what everyone else does? At first I thought we'd have to only create the x-large, small, etc layouts only to find that even these don't cope for various screen sizes (even the nexus 7 doesn't fall well into any of these categories).
Sample code
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:background="#drawable/layout_border"
android:padding="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:contentDescription="#string/app_name"
android:src="#drawable/yg" />
<ProgressBar
android:id="#+id/progressBar2"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/imageView1"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:progress="50" />
<TextView
android:id="#+id/textView1"
style="#style/NormalFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/progressBar2"
android:layout_alignLeft="#+id/progressBar2"
android:layout_marginLeft="36dp"
android:text="#string/exercise_percent" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_above="#+id/textView1"
android:layout_toRightOf="#+id/imageView1"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:background="#drawable/start"
android:onClick="meditateTask" />
</RelativeLayout>
For example, here the imagebutton I have will be out of place on every new screen size.
You can create same layout for all screen sizes, small, normal, large and x large.
How can you do that: Make new XML layout file in layout folder, make it so it has same name as the layout you want to modify to fit for all screen sizes. Click next, and there will be some options shown, find Size and insert it. Then you will be able to chose which screen size you want.
And when launched, system will chose best screen size for device.
Repeat for all 4 screen sizes. Hope this helps
I put 2 buttons, with wrap_content size, but as device is bigger, buttons are upper, I cannot figure how to fix them, so on all devices to have the same position. Is there a solution not to cover the head of this guy, as example.
Layout.xml
<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"
android:background="#drawable/background"
tools:context=".BasicScreenActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="102dp"
android:background="#drawable/custom_button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"
android:background="#drawable/custom_button2" />
</RelativeLayout>
//try like this below one
#remove the margin top 102dp
#don't use button background image use color with white stroke
#make your button width as match parent and minheight= 100dp as ur need.
#add android:gravity="center" to your parent layout
<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"
android:background="#drawable/background"
android:gravity="center"
tools:context=".BasicScreenActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/holo_green_dark" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"
android:background="#android:color/holo_green_dark" />
</RelativeLayout>
Android is running on multiple devices with different screen resolutions, here is how to support them all: Supporting Multiple Screens
Basically we have following screens resolution:
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
to support them all, in Res folder we have to create folders depending what screens we want to support.
layout-xlarge
layout-large
layout-normal
layout-small
after, copy the your final layout_file.xml to all of them, open it in Graphical mode, and rearrange the buttons to look good on the screen. Depending on the resolution screen android will choose layout which is closer to device resolution . Just test it on different devices, or virtual devices to make sure it looks good.
If you want all of your views to cover the whole screen of the device when the app is launched, you need LinearLayout's weight
<LinearLayout 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"
android:background="#drawable/background"
android:orientation="vertical"
tools:context=".BasicScreenActivity">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="0 dip" //this is important!
android:layout_weight="5" //<-- add this
android:layout_marginTop="102dp"
android:background="#drawable/custom_button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="0 dip" //this is important!
android:layout_weight="5" //<-- add this
android:background="#drawable/custom_button2" />
</LinearLayout>
I usually have the weight total equal to 10 so its easier to compute and visualize the UI
im sorry this is a noob question but i suck at layouting. How would i make a layout that positions the flashlight_button so it would preserve the ratio between imageviews on top and bottom.
It looks okay on nexus s (800x480), thats what i want
...image ...
but obviously when i switch to galaxy nexus (1280 x 720), it moves the middle button a bit to the top, like this (so it doesnt preserve the ratio between top and bottom margins as designed on nexus s)
...image...
The layout is here:
<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"
android:background="#drawable/background"
android:padding="20dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:contentDescription="#string/application_logo_description"
android:src="#drawable/mylight" />
<ImageButton
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#null"
android:contentDescription="#string/settings_button_description"
android:src="#drawable/settings_button" />
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_centerHorizontal="true"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/flashlight_button_selector" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/ad_button"
android:layout_centerHorizontal="true"
android:contentDescription="#string/powered_by_description"
android:src="#drawable/powered_by" />
<ImageButton
android:id="#+id/ad_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#null"
android:contentDescription="#string/ad_button_description"
android:src="#drawable/freeml" />
so it just anchors the top and bottom imageviews to parent edges, and the middle button is just pushed down using layout_maginBottom. I am providing scaled images for different densities and obviously density pixels to express size, so as it seems it just not enough on a bigger screen.
Whats the correct way to do this? Different .xml files or .. ?
//Sorry i cant still post images, hope you can imagine it.
Have you considered placing your flashlight image according to the parent's center?
So for now you are pushing flashlight image down (according to the top image position). Would it be more accurate to make flashlight image center-aligned and give it some bottom margin (to push it a bit higher according to your design).