How to edit xml file layout. All display screen is the same.
screen size 4.7", 5.0" display accuracy. But screen other than this. Display Distortion. Except screen tablet.
Help me fix it.
screen_main.xml
<FrameLayout 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="jp.vertice.test.MainScreenFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#51c8fc">
<ImageView
android:layout_width="200dp"
android:layout_height="195dp"
android:id="#+id/imageView2"
android:src="#mipmap/ic_launcher"
android:background="#fc0c0c"
android:layout_marginLeft="18dp"
android:layout_marginStart="18dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn1"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/btn3"
android:layout_alignStart="#+id/btn3" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn2"
android:layout_below="#+id/btn1"
android:layout_alignLeft="#+id/btn1"
android:layout_alignStart="#+id/btn1" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn5"
android:layout_below="#+id/btn2"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignStart="#+id/imageView2"
android:layout_marginTop="5dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn4"
android:layout_alignTop="#+id/btn5"
android:layout_toRightOf="#+id/btn5"
android:layout_toEndOf="#+id/btn5"
android:layout_marginLeft="9dp"
android:layout_marginStart="9dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn3"
android:layout_alignTop="#+id/btn4"
android:layout_toRightOf="#+id/btn4"
android:layout_toEndOf="#+id/btn4"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="205dp"
android:background="#F4F4F4"
android:layout_gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="YYYY.MM.DD"
android:id="#+id/txt1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="22dp"
android:layout_marginStart="22dp"
android:layout_marginBottom="173dp" />
<TextView
android:layout_width="230dp"
android:layout_height="50dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
android:id="#+id/text2"
android:layout_alignTop="#+id/txt1"
android:layout_alignLeft="#+id/txt1"
android:layout_alignStart="#+id/txt1"
android:layout_marginTop="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON"
android:id="#+id/btn6"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:layout_alignTop="#+id/text2"
android:layout_toRightOf="#+id/text2"
android:layout_toEndOf="#+id/text2" />
<TextView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="FOOTER"
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="10sp"
android:textStyle="bold"
android:textAlignment="center"
android:gravity="center_vertical"
android:background="#FFFFFF" />
</RelativeLayout>
</FrameLayout>
Don't use Frame Layout here because Frame Layout used to show single view.
I see you are using fixed dp values for layout_width and layout_height.
dp means density independent pixel. It is not a size independent pixel.
The dp makes sure your layout looks the same on devices with the same size, but different pixel density. It will not look the same on bigger devices.
If you want it to scale to larger devices you will have to use match_parent and wrap_content.
Use the power of the relative layout to place items on the right side of the screen also.
You can also make separate layout files for differently sized devices. So you can customise it depending on the size.
You do this by making a new layout folder named for example layout-sw600dp/ (or any number you want) which will only be used on devices that have at least the width you specified (so 600dp in this example).
Make sure your layout file has the same name in this folder as in the normal folder.
You can find very useful information about this in the documentation:
here and here.
You can try using a GridLayout. This way, the image columns will fill the whole screen.
you can't work with dp and expect the same result on different
if you want same display for all the devices you can work with weightSum and weight here is a little example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
Related
So I was designing my main page for my first app, and when I emulated it I noticed that the size of my stopwatch got a little bigger for some reason. So I took my phone and tested it on there and the results aren't pretty. I used dp which I was almost certain is % and not set value so I have no clue why it changes like that.
Here is the images so it dosn't clutter my question http://imgur.com/a/IKvdI
menu1_layout.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:gravity="center_horizontal">
<ImageView
android:layout_width="500dp"
android:layout_height="800dp"
android:id="#+id/imageView"
android:background="#drawable/background3" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:gravity="center_horizontal">
<Button
android:id="#+id/stopWatch"
android:layout_width="225dp"
android:layout_height="200dp"
android:background="#drawable/stopwatch2"
android:layout_marginTop="83dp"
android:layout_marginRight="3dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal|bottom">
<Chronometer
android:id="#+id/aChronometer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40sp"
android:textColor="#ffffff"
android:layout_marginBottom="144dp"
android:layout_above="#+id/editText"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:text="#string/Explanation"
style="#style/Base.TextAppearance.AppCompat.Medium"
android:layout_above="#+id/button"
android:layout_centerHorizontal="true"
android:layout_marginBottom="26dp"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText2"
android:text="= 0"
android:layout_marginTop="8dp"
style="#style/Base.TextAppearance.AppCompat.Medium"
android:layout_alignTop="#+id/button"
android:layout_centerHorizontal="true"
android:layout_marginRight="-10dp"
android:textColor="#ffffff" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="50dp"
android:layout_height="40dp"
android:background="#drawable/cookie"
android:id="#+id/button"
android:layout_marginRight="-10dp"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="#+id/editText2"
android:layout_toStartOf="#+id/editText2"
android:layout_marginBottom="84dp" />
</RelativeLayout>
</FrameLayout>
If you run you particular layout in 5 different devices with different sizes, you will get 5 different results.
Well, this is because you have put specific values for layout_height, layout_width and the margins, like 225dp, 200dp. I know these are independent pixels, but when drawable is considered never set both width and height to a specific value. It messes up the aspect ratio. These settings will work well for one particular configuration of device, but not the rest. The device will pick different drawable based on the resolution of the device.
You need to try to design your relative to other views. Always make sure that the layout_width and layout_hight are in wrap_content. This will ensure that the drawable is loaded in correct aspect ration in all the devices and emulators.
I have the following RelativeLayout (landscape mode) in my application:
<RelativeLayout 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:id="#+id/ivLeft" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ivRight"
android:layout_toRightOf="#id/ivLeft"/>
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/ivClose"
android:onClick="onClose" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="65dp"
android:id="#+id/ivSwitch"
android:onClick="onSwitch" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="130dp"
android:id="#+id/ivAnaglyph"
android:onClick="onAnaglyph" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="195dp"
android:id="#+id/ivWiggle"
android:onClick="onWiggle" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="260dp"
android:id="#+id/ivSave"
android:onClick="onSave" />
</RelativeLayout>
It renders correctly (at least it renders the same) on different mobile platforms like modern HTC, LG, One Plus etc. The result should be that the two images (of the same size) split the landscape screen into two equal halves. The smaller symbols are on the left hand side below each other (covering the left image).
But the latest Sony XPeria (Z3 and M4 Aqua) beg to differ. The small symbols are positioned correctly, but the first big image takes more than half of the screen (it moves significantly to the right) so the second image has not enough space left to maintain its full size. I already tried to temporarily remove the small symbols, with no difference at all!
Maybe I need a new approach: How can I split the landscape layout into two equal halves, independent of the resulting platform? I'm not forced to use RelativeLayout ... what would help me here?
Thanks to #Frank N. Stein I was able to solve the issue with two RelativeLayouts nested inside a LinearLayout using weights like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<ImageView
android:layout_height="wrap_content"
android:id="#+id/ivLeft"
android:layout_width="wrap_content" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/ivClose"
android:onClick="onClose" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="65dp"
android:id="#+id/ivSwitch"
android:onClick="onSwitch" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="130dp"
android:id="#+id/ivAnaglyph"
android:onClick="onAnaglyph" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="195dp"
android:id="#+id/ivWiggle"
android:onClick="onWiggle" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="260dp"
android:id="#+id/ivSave"
android:onClick="onSave" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<ImageView
android:layout_height="wrap_content"
android:id="#+id/ivRight"
android:layout_width="wrap_content" />
</RelativeLayout>
</LinearLayout>
I'm new to android development, and I am making a calculator in android studio. My calculator works fine but there isa problem with its layout I installed it on my tablet and the buttons were very small as I designed them in Android Studio on an emulator, the button size doesn't change, and need help so that the button size increases as the screen size changes.
My calculator design in Android Studio
<?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="#ff000000">
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/clear"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="110dp"
android:background="#drawable/clear_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/plus_minus"
android:layout_alignBottom="#+id/clear"
android:layout_toRightOf="#+id/clear"
android:layout_toEndOf="#+id/clear"
android:layout_marginLeft="-11dp"
android:background="#drawable/pm_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/per"
android:layout_alignBottom="#+id/plus_minus"
android:layout_toRightOf="#+id/plus_minus"
android:layout_toEndOf="#+id/plus_minus"
android:layout_marginLeft="-11dp"
android:background="#drawable/per_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/div"
android:layout_alignTop="#+id/per"
android:layout_toRightOf="#+id/per"
android:layout_toEndOf="#+id/per"
android:layout_marginLeft="-11dp"
android:background="#drawable/div_btn"
android:layout_alignParentRight="false" />
<TextView
android:layout_width="fill_parent"
android:layout_height="70dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/disp"
android:layout_above="#+id/plus_minus"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#android:color/white"
android:textSize="32sp"
android:inputType="none"
android:textStyle="normal"
android:gravity="right" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/seven"
android:layout_below="#+id/clear"
android:layout_toLeftOf="#+id/plus_minus"
android:layout_toStartOf="#+id/plus_minus"
android:layout_marginTop="-10dp"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="true"
android:background="#drawable/seven_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/eight"
android:layout_alignTop="#+id/seven"
android:layout_alignLeft="#+id/plus_minus"
android:layout_alignStart="#+id/plus_minus"
android:background="#drawable/eight_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/nine"
android:layout_alignBottom="#+id/seven"
android:layout_alignLeft="#+id/per"
android:layout_alignStart="#+id/per"
android:background="#drawable/nine_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/mul"
android:layout_alignTop="#+id/nine"
android:layout_alignLeft="#+id/div"
android:layout_alignStart="#+id/div"
android:background="#drawable/mul_btn" />
<Button
android:layout_width="103dp"
android:layout_height="90dp"
android:id="#+id/four"
android:layout_below="#+id/seven"
android:layout_alignRight="#+id/seven"
android:layout_alignEnd="#+id/seven"
android:layout_marginTop="-10dp"
android:layout_alignParentLeft="false"
android:background="#drawable/four_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/five"
android:layout_alignBottom="#+id/four"
android:layout_alignLeft="#+id/eight"
android:layout_alignStart="#+id/eight"
android:background="#drawable/five_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/six"
android:layout_alignTop="#+id/five"
android:layout_alignLeft="#+id/nine"
android:layout_alignStart="#+id/nine"
android:background="#drawable/six_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/sub"
android:layout_toEndOf="#+id/nine"
android:layout_alignTop="#+id/six"
android:layout_alignLeft="#+id/mul"
android:layout_alignStart="#+id/mul"
android:background="#drawable/min_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/one"
android:layout_below="#+id/four"
android:layout_alignLeft="#+id/four"
android:layout_alignStart="#+id/four"
android:layout_marginTop="-10dp"
android:layout_alignParentLeft="false"
android:background="#drawable/one_btn" />
<Button
android:layout_width="203dp"
android:layout_height="90dp"
android:id="#+id/zero"
android:layout_below="#+id/one"
android:layout_alignLeft="#+id/one"
android:layout_alignStart="#+id/one"
android:layout_marginTop="-10dp"
android:background="#drawable/zero_btn"
android:layout_alignParentLeft="true"
android:layout_marginLeft="-7dp" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/two"
android:layout_above="#+id/zero"
android:layout_alignLeft="#+id/five"
android:layout_alignStart="#+id/five"
android:background="#drawable/two_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/three"
android:layout_below="#+id/five"
android:layout_alignLeft="#+id/six"
android:layout_alignStart="#+id/six"
android:layout_marginTop="-10dp"
android:background="#drawable/three_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/add"
android:layout_toEndOf="#+id/three"
android:layout_below="#+id/six"
android:layout_alignLeft="#+id/sub"
android:layout_alignStart="#+id/sub"
android:layout_marginTop="-10dp"
android:background="#drawable/plus_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/dot"
android:layout_below="#+id/two"
android:layout_alignRight="#+id/three"
android:layout_alignEnd="#+id/three"
android:layout_marginTop="-10dp"
android:background="#drawable/dot_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/equ"
android:layout_toEndOf="#+id/dot"
android:layout_below="#+id/three"
android:layout_alignLeft="#+id/add"
android:layout_alignStart="#+id/add"
android:layout_marginTop="-10dp"
android:background="#drawable/equ_btn" />
</RelativeLayout>
You have to use layout_weight in order to achieve what you want, and that will be used by wrapping each row of buttons inside a LinearLayout and all that LinearLayouts plus the TextView will be wrapped inside one big LinearLayout instead of your RelativeLayout like the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff000000"
android:orientation="vertical"
android:weightSum="6" >
<TextView
android:id="#+id/disp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:inputType="none"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white"
android:textSize="32sp"
android:textStyle="normal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4" >
<Button
android:id="#+id/clear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/clear_btn" />
<!-- then the three remaining buttons -->
<LinearLayout />
<!-- then the four remaining rows -->
<!-- in the last row the "0" button will have layout_weight="2" NOT "1" -->
</LinearLayout>
</LinearLayout>
UPDATE:
use ImageButtons instead of Buttons for better scalability, and this is how you must use it:
<ImageButton
android:id="#+id/clear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#drawable/clear_btn"
android:scaleType="fitCenter" />
<!-- and so for all Buttons -->
Note here we changed:
1- layout_height : from wrap_content to match_parent .
2- background : removing the drawable(clear_btn) and making it transparent.
and we added:
1- src : assigning to it the drawable(clear_btn).
2- scaleType : making it fitCenter to make it scales in all the available area without ruining the Image scalability ratio.
P.S: in case you are want the Button to take all the area weather it is scalable or not, change scaleType from fitCenter to fitXY (may be you will need that for the "0" Button).
If you want to support multiple screens never drag and drop and resize views manually.
You can check both the android:layout_weight attribute and LinearLayout
Solution 1:
please use dimens.xml for specifying with and height for buttons.
for tablet,please create folder values-sw600dp,values-sw720dp and put your dimens.xml inside.
Solution 2:
Use linearlayout and layout_weight property.
While setting the height/width of a button in android, using fixed density pixel values will result in exact sizes on all screens. Using width values as wrap_content, fill_parent, weights etc. will make the button look according to the screen densities.
Try going through this link once:- Best Practices for User Interface
<android.support.v7.widget.RecyclerView
android:id="#+id/sampleRecyclerView"
android:scrollbars="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/sampleButton"
android:width="0dp"
android:height="50dp">
</Button>
</android.support.v7.widget.RecyclerView>
I think the point here is <Button> </Button> inside a Linear Layout.
android:width="0dp" // This line changes width as of linear layout.
android:height="50dp">
I am testing my layout in eclipse's graphical layout. There are 5.4in FWVGA(480x854,mdpi) and 5.1in WVGA(480x800,mdpi) screens available to view in the graphical layout. If I am correct they both fall into large screen category, therefore I've put the layout xml into layout-large folder. And I've put my images into drawable-large-mdpi folder. But the image buttons are slightly off in 5.1in WVGA as you can see in the screenshots below. First is 5.1in, the second screenshot is 5.4'' and the correct one.
My second question which is similar to the above goes like this. I've done new layout for the Nexus 7 and put it into layout-sw600dp folder, and images to the drawable-tvdpi. Then I viewed this layout in the 7in tablet (1024x600,mdpi). And the image buttons are slightly off than it should look. The same way as in the first question.
I understand that the reason is probably because 5.1in and 5.4in isn't exactly the same even though they fall into the same category and I should have 2 different layouts for them. So how I should go about it? How can I have two different layouts? Or is there better solution, as I don't want to create a layout for each screen size that exist on the market.
Here is xml file:
<?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/wall4_cabinetclosed" android:orientation="vertical">
<RelativeLayout android:id="#+id/frames_layout"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="73dp" android:layout_marginTop="57dp">
<ImageView android:id="#+id/fire_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:background="#drawable/small_fire_icon" />
<ImageView android:id="#+id/water_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignTop="#+id/fire_frame" android:layout_marginLeft="75dp"
android:layout_toRightOf="#+id/fire_frame" android:background="#drawable/small_water_icon" />
<ImageView android:id="#+id/earth_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/fire_frame" android:layout_marginTop="71dp"
android:layout_toLeftOf="#+id/water_frame" android:background="#drawable/small_earth_icon" />
<ImageView android:id="#+id/wind_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#+id/water_frame" android:layout_alignTop="#+id/earth_frame"
android:background ="#drawable/small_wind_icon" />
</RelativeLayout>
<ImageView android:id="#+id/zoomed_image"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<Button android:id="#+id/frames" android:layout_width="210dp"
android:layout_height="220dp" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:layout_marginLeft="55dp"
android:layout_marginTop="30dp" android:onClick="zoomFrames"
android:background="#android:color/transparent"/>
<Button android:id="#+id/blue" android:layout_width="115dp"
android:layout_height="70dp" android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" android:layout_marginLeft="220dp"
android:onClick="zoomImage"
android:background="#android:color/transparent"/>
<Button android:id="#+id/white" android:layout_width="85dp"
android:layout_height="50dp" android:layout_alignParentRight="true"
android:layout_alignParentTop="true" android:layout_marginRight="420dp"
android:layout_marginTop="420dp" android:onClick="zoomImage"
android:visibility="invisible"
android:background="#android:color/transparent"/>
<ImageView
android:id="#+id/fireplace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="311dp"
android:layout_marginLeft="67dp"
android:background="#drawable/fire"
/>
<ImageButton
android:id="#+id/water_room"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="310dp"
android:layout_marginLeft="90dp"
android:background="#drawable/view_water_room"
android:onClick="finishFireRoom"
android:visibility="gone"
/>
<ImageView android:id="#+id/frames_zoomed_image"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/frames_zoomed" android:onClick="hideZoomedFrames"
android:visibility="gone"/>
<RelativeLayout android:id="#+id/frameZoomedLayout"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="113dp" android:layout_marginLeft="145dp"
android:visibility="gone"
>
<ImageButton android:id="#+id/fire_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/fire_icon" android:onClick="changeIcon" />
<ImageButton android:id="#+id/water_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignBottom="#+id/fire_icon" android:layout_toRightOf="#+id/fire_icon"
android:background="#drawable/water_icon" android:layout_marginLeft="147dp" android:onClick="changeIcon"/>
<ImageButton android:id="#+id/earth_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/fire_icon" android:layout_marginTop="140dp"
android:layout_toLeftOf="#+id/water_icon" android:background="#drawable/earth_icon" android:onClick="changeIcon"/>
<ImageButton android:id="#+id/wind_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#+id/water_icon" android:layout_alignTop="#+id/earth_icon"
android:background="#drawable/wind_icon" android:onClick="changeIcon"/>
</RelativeLayout>
</RelativeLayout>
in 3rd step set all ur device specific like screen, language etc all. and ur done
I'm having problems with my layout I want to arrange the image buttons vertically and I want it to have the same look for different screen sizes here is a print screen http://flic.kr/p/fwEZn1
<?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/chalk"
android:gravity="center|fill_vertical"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="1000dp"
android:layout_height="wrap_content"
android:layout_marginTop="104dp" >
<ImageButton
android:id="#+id/m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="62dp"
android:layout_weight="1.30"
android:background="#android:color/transparent"
android:contentDescription="exam schedule button"
android:onClick="ex"
android:src="#drawable/exam" />
<ImageButton
android:id="#+id/cl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
android:background="#android:color/transparent"
android:contentDescription="classes button"
android:onClick="cl"
android:src="#drawable/list1" />
<ImageButton
android:id="#+id/lec"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.24"
android:background="#android:color/transparent"
android:contentDescription="lecture section button"
android:onClick="lc"
android:src="#drawable/sylla" />
<ImageButton
android:id="#+id/gr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_weight="3.36"
android:background="#android:color/transparent"
android:contentDescription="group button"
android:onClick="gr"
android:src="#drawable/group" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="1000dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout1"
android:layout_marginTop="123dp" >
<ImageButton
android:id="#+id/kl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="74dp"
android:layout_weight="0.69"
android:background="#android:color/transparent"
android:contentDescription="calendar button"
android:onClick="kl"
android:src="#drawable/calendar" />
<ImageButton
android:id="#+id/d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/pd"
android:layout_marginRight="84dp"
android:layout_weight="0.38"
android:background="#android:color/transparent"
android:contentDescription="Schedule button"
android:onClick="sk"
android:src="#drawable/sked" />
<ImageButton
android:id="#+id/pd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button1"
android:layout_alignTop="#+id/an"
android:layout_weight="0.16"
android:background="#android:color/transparent"
android:contentDescription="podcast button"
android:onClick="pd"
android:src="#drawable/podcast" />
<ImageButton
android:id="#+id/an"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/kl"
android:layout_marginLeft="60dp"
android:layout_toRightOf="#+id/kl"
android:layout_weight=".92"
android:background="#android:color/transparent"
android:contentDescription="announcement button"
android:onClick="an"
android:src="#drawable/announce" />
</LinearLayout>
<ImageButton
android:id="#+id/button1"
android:layout_width="53dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="106dp"
android:layout_marginLeft="342dp"
android:layout_weight="0.38"
android:background="#android:color/transparent"
android:contentDescription="logout button"
android:onClick="logout"
android:src="#drawable/logout"
android:text="Logout" />
</RelativeLayout>
So basically I want to fix the arrangement of the images button. How can I do this? Do I need to resize images per drawable folder?
There is a simple solution. I see you want the layout to look the same in all screen sizes, but you are using hard coded values for layout_height,margin,padding etc. For this purpose use the dimens.xml in the values folder. Specify the values for all screens, create these folders in your resource folder:
values-small
values-normal(The default values folder is values-normal)
values-large
values-xlarge(You can use values-sw600 for tablets after Android 3.2)
In all of these folders create dimens.xml where you specify the margin,height,width,padding etc in dp, you can even specify the font size. Hope this helps!
Did You mean the same Size for all screen sizes when You say "look"? A possible way to do this, would be to set to ImageButton in Your xml:
scaleType="centerInside"
and set all weights from Your image buttons to 1
layout_weight="1"
And if You want to set every button vertical, declare in Your LinearLayout
android:orientation="vertical"
And by the way, it is allways a good practise to set different images for every drawable to fit in multiple screens.