I want to create the following layout -
http://postimg.org/image/56e9y0hrj/
But when I use the Relative layout and write the following code, I get something like this.
http://postimg.org/image/4gm0r15k1/
Here is mt xml file -
<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"
android:background="#5c575c"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Top Stories"
android:background="#ccc6ba"
style="#style/format"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignLeft="#+id/textView1"
android:layout_alignTop="#+id/textView1"
android:src="#drawable/one" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/two" />
<TextView
android:id="#+id/textView2"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:text="A sample widget for multiple lines"
android:layout_alignRight="#id/imageView1"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView3"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView2"
android:layout_alignBottom="#+id/textView2"
android:layout_alignLeft="#+id/imageView2"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView4"
android:layout_marginTop="10dip"
android:layout_marginBottom="2dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView2"
android:text="World"
android:background="#ccc6ba"
style="#style/format"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignLeft="#+id/textView4"
android:layout_alignTop="#+id/textView4"
android:src="#drawable/three" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/four" />
<TextView
android:id="#+id/textView5"
style="#style/format_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_alignLeft="#+id/imageView3"
android:layout_alignRight="#+id/imageView3"
android:background="#ccc6ba"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView6"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView5"
android:layout_alignBottom="#+id/textView5"
android:layout_alignLeft="#+id/imageView4"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView7"
android:layout_marginTop="10dip"
android:layout_marginBottom="2dip"
style="#style/format"
android:background="#ccc6ba"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:text="Cricket"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
I have gone through http://android-developers.blogspot.in/2009/02/android-layout-tricks-1.html and http://www.mkyong.com/android/android-relativelayout-example/ but could not find the solution. The images I use are of dimention 400by300 generated by http://dummyimage.com/
Please help me out !
Possible layout workaround, just from scratch, should show only my idea and is not testet: Do two LinearLayouts which specify layout_weight="1" inside one parent LinearLayout. This segments both LinearLayouts inside to the same size. Inside these two LinearLayouts, set the imageView and textView. But also, here You have to do different layout.xml for multiple screen usage.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="center"
android:src="#drawable/one"
/>
<TextView
android:id="#+id/textView2"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A sample widget for multiple lines"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="center"
android:src="#drawable/two"
/>
<TextView
android:id="#+id/textView3"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A sample widget for multiple lines""/>
</LinearLayout>
</LinearLayout>
And then, You have define some new layout folders inside res-folder in your project. You need folders for different sizes. Inside these folder you have to define a layout file where the image views got different heights to match to the related screen size. But this is beyond the frame, so You have to learn a little bit about using multiple screen sizes:
http://developer.android.com/guide/practices/screens_support.html
using Fragments is even possible:
http://developer.android.com/guide/components/fragments.html
http://www.vogella.com/articles/AndroidFragments/article.html
EDIT
This behaviour of your textvies is because of the different screen sizes. That´s what I had talking about, to get all looking good, You have to do more than only one layout. Here are some examples how one layout looks on different screens:
HTC Desire S 3.7 inches
the imageViews and TextViews fill the whole width, so the textViews are completely as width as the imageViews. By default, the textView wraps automatically if the text is too long, but this could be device dependant. Usally define maxLines, that will cause wrap text inside the textView. But if the text is shorter than the width, it doesn´t wrap.
Device with 5.1 inches
here the text is shorter than the width, so it doesn´t wrap. You could fix this by set fixed sizes to textView.
But this is all just scratches the subject, I can´t complain the whole thing in here. You have to learn how to handle different layouts. You have to set fixed sizes to different layouts, different resources and so on.
Related
I made a custom row layout xml file for a ListView so I could design each row to look how I want, but I'm having trouble actually designing the UI in this xml file. I'm trying to make the the activity ultimately look like this:
As you can see there is a listView with rows, each consisting of a game with a textView as a title, two buttons, and an imageView as the background. I've been doing a lot of research through Google's UI documentation but I can't figure out how to get the elements to appear on top of each other like this while have the row scale perfectly to different screen sizes. The furthest I've gotten is using a FrameLayout to place the different views on top of each other, but from here I cannot place the views in the correct position relative to each other. Any advice on how to do this or where I can find out how to do this?
XML so far (terrible I know):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/gameNameID" />
</RelativeLayout>
Sure that is no problem. Just use weight to handle spacing and you don't need the frame layout just use relative as a root.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:weightSum="2">
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You could also just use two nested Relative Layouts with gravity bottom left and bottom right and hold your buttons in there and align buttons to right with margins from side. Also don't use the "endOF" aligning as that will force a left alignment and make larger gaps on the right side of the screen even if you make it look good for one phone it will look bad on another. Aesthetics matter.
Or you could just float your buttons to the bottom left and bottom right with margins from side and make both set to match_parent so they fill the space but use padding to shrink the button look inside the space, but this can get messy. So I prefer the implementation above although some people won't like the extra layouts. It's just a matter of opinion though as the performance diff of using extra nested layouts is so tiny that no one can actually argue performance with a straight face haha.
<RelativeLayout
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:background="#drawable/overwatch" >
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp"
android:layout_toEndOf="#+id/btnJoinLobby" />
</RelativeLayout>
Try this. And let me know if that helps.
I want to overlap 10 buttons on an image. I am using RelativeLayout to do the same but as a result, the position of the buttons changes in different devices. So, can someone tell me a workaround for that? This is the xml file for this activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/exercise1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp"
tools:context="nmss.example.com.coach.Exercise1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/humanbody"
android:layout_marginStart="20dp"/>
<Button
android:id="#+id/btn_neck"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_marginStart="145dp"
android:layout_marginTop="62dp"
android:text="Neck"
android:textSize="12sp" />
<Button
android:id="#+id/btn_shoulder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginTop="75dp"
android:text="Shoulder"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_biceps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="135dp"
android:text="Biceps"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_forearm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginTop="195dp"
android:text="Forearm"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_quads"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="68dp"
android:layout_marginTop="315dp"
android:text="Quads"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_chest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="145dp"
android:layout_marginTop="100dp"
android:text="Chest"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_abs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_marginStart="150dp"
android:layout_marginTop="160dp"
android:text="Abs"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_triceps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="246dp"
android:layout_marginTop="125dp"
android:text="Triceps"
android:textSize="12sp" />
<Button
android:id="#+id/btn_mid_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="215dp"
android:layout_marginTop="175dp"
android:text="Middle back"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_calves"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="210dp"
android:layout_marginTop="400dp"
android:text="Calves"
android:textSize="12sp"/>
</RelativeLayout>
This is the view in Android Studio
Just use LinearLayout instead of RelativeLayout.
Try to arrange your image buttons on top,bottom,right and left using the percentages.
You also need to create different Layouts Folders in your res folder for all devices and use the dimensions accordingly.
Never hard code the sizes like this, 25dp,
Add this link to your dependencies, to get the dimensions for every screen.
compile 'com.intuit.sdp:sdp-android:1.0.4'
Its uses is like this,
android:layout_marginTop="#dimen/_110sdp"
After writing, #dimen/...Ctrl+Space, you can see the value of dimensions from 1dp to 600dp. Try it, its very useful.
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>
My application uses buttons and image buttons constructed via XML and drawable folder.
On some devices applications UI elements (buttons and image buttons) losses its position and overlaps on each other and on some devices last button in bottom of screen disappears.
Same is happening when orientation is changed.
I want all my elements to be on same position on all devices.
How can I make this using XML.
Is there any easy and simple way to do so?
Here is my XML.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:orientation="vertical" >
<ImageButton
android:id="#+id/main_btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="55dp"
android:layout_marginTop="71dp"
android:background="#ffffff"
/>
<ImageButton
android:id="#+id/main_btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/main_btn_1"
android:layout_marginRight="56dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_1"
android:layout_below="#+id/main_btn_1"
android:textColor="#00aeed"
android:textStyle="normal" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_alignLeft="#+id/main_btn_2"
android:textColor="#ea1d24"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginTop="42dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_3"
android:layout_below="#+id/main_btn_3"
android:textColor="#f7941d"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_alignTop="#+id/main_btn_3"
android:background="#000000"
/>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_4"
android:layout_below="#+id/main_btn_4"
android:textColor="#f7941d"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView4"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/main_btn_5"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:textColor="#0065b3"
android:textStyle="normal" />
</RelativeLayout>
Because there are many devices with so many different screen sizes, resolutions, etc., probably the main thing you have to avoid is using absolute positions when placing layout elements. The Android SDK has some powerful structures to avoid absolute positioning (i.e. LinearLayout, RelativeLayout), so try working with them and instead of defining positions like "12dp", use the correct combination of layout_width, layout_height (wrap_content or match_parent) and layout_weight, which can help you to place layout elements without specifying absolute positions.
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