I've created my android application. The app is complete but it's a problem: when I install this app in other smartphone, objects,that normally are in the screen, are overlapping or not in original position.
My IDE is Android Studio 2.2
<RelativeLayout 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"
>
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugePH"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_red_900"
app:gaugePointEndColor="#color/md_red_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="0"
app:gaugeEndValue="14"
app:gaugeSweepAngle="270"
android:layout_alignTop="#+id/gaugePressione"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp"/>
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugePressione"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_blue_900"
app:gaugePointEndColor="#color/md_blue_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="0"
app:gaugeEndValue="15"
app:gaugeSweepAngle="270"
android:layout_marginTop="39dp"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="10dp"/>
<TextView
android:id="#+id/textPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignRight="#+id/textStrPH"
android:layout_marginTop="100dp"/>
<TextView
android:id="#+id/textPressione"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignRight="#+id/textStrPressione"
android:layout_marginTop="100dp" />
<TextView
android:id="#+id/textStrPressione"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bar"
android:textSize="30dp"
android:textStyle="italic"
android:layout_below="#+id/textPressione"
android:layout_alignLeft="#+id/gaugePressione"
android:layout_marginLeft= "70dp"
android:textColor="#color/md_black_1000"/>
<TextView
android:id="#+id/textStrPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PH"
android:textSize="30dp"
android:textStyle="italic"
android:layout_alignRight="#+id/gaugePH"
android:layout_alignBottom="#+id/textStrPressione"
android:layout_marginRight= "70dp"
android:textColor="#color/md_black_1000"/>
<Button
android:id="#+id/goMaps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mappa"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="#+id/textTemperatura"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignTop="#+id/textUmidita"
android:layout_alignRight="#+id/textStrPressione"/>
<TextView
android:id="#+id/textStrTemperatura"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="°C"
android:textSize="30dp"
android:textStyle="italic"
android:layout_marginLeft= "70dp"
android:textColor="#color/md_black_1000"
android:layout_alignRight="#+id/textPressione"
android:layout_alignTop="#+id/textTemperatura"
android:layout_marginTop="40dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="#+id/textUmidita"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignRight="#+id/textPH"
android:layout_alignTop="#+id/gaugeUmidita"
android:layout_marginTop="60dp"/>
<TextView
android:id="#+id/textStrUmidita"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="%"
android:textSize="30dp"
android:textStyle="italic"
android:layout_marginLeft= "70dp"
android:textColor="#color/md_black_1000"
android:layout_marginRight="10dp"
android:layout_alignBaseline="#+id/textStrTemperatura"
android:layout_alignBottom="#+id/textStrTemperatura"
android:layout_alignEnd="#+id/textStrPH" />
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugeUmidita"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_red_900"
app:gaugePointEndColor="#color/md_red_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="0"
app:gaugeEndValue="100"
app:gaugeSweepAngle="270"
android:layout_alignTop="#+id/gaugeTemperatura"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp" />
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugeTemperatura"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_blue_900"
app:gaugePointEndColor="#color/md_blue_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="-20"
app:gaugeEndValue="50"
app:gaugeSweepAngle="270"
android:layout_marginTop="13dp"
android:layout_marginLeft="10dp"
android:layout_below="#+id/gaugePressione"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/textImpianto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Impianto:"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"/>
<TextView
android:id="#+id/textCodImpianto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="145dp"
android:layout_marginBottom="10dp"/>
</RelativeLayout>
There is not a simple answer but start reading Supporting Different Screen Sizes documentation at https://developer.android.com/training/multiscreen/screensizes.html
That is because you are using hard coded values for height and width. Those values have dp - which is density pixel. Since the screens are different, the pixels on those screens will also be different, so those values "will not work".
You should try to use match_parent (which will fill all the space they can within the parent) or wrap_content which will use only the needed space. Usually the width is match_parent and the height is wrap_content.
If have more than one element on that layout, you can also try to use weight, which basically will give a certain percentage to each one of the elements.
Imagine one element with android:weight="1" and another one with android:weight="2". Both those elements will have different "percentages" of the screen.
What are the views that are causing problems?
Are #id/goMaps, #id/textCodImpianto or #id/textImpianto among them?
Here is what Android Studio editor has to say about it (once I replaced hard-coded text with resources):
#id/goMaps can overlap #id/textCodImpianto if #string/_0, #string/mappa grow due to localized text expansion less... (Ctrl+F1)
If relative layout has text or button items aligned to left and right sides they can overlap each other due to localized text expansion unless they have mutual constraints like toEndOf/toStartOf
Substitute text size change with screen size change (the same effect in this case) and you have at least one explanation about why some of your views are overlapping or moved.
At the very least, you are lacking some constraints.
Related
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.
I'm trying to put an N (new) badge at the end of the Textview. But Android Studio gives me that two Textviews, hashtag_list_row_title and hashtag_list_row_new can overlap if one Textview contains some lengthy string.
In production environment, it's not likely that hashtag_list_row_title is long, but I want to prevent two Textviews from being overlapped. How can I achieve this?
I prefer the way hashtag_list_row_new has priority over hashtag_list_row_title because that's more natural way to display an N badge.
So far my code is as follows.
list_row.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/hashtag_list_row_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_list_row_selector" >
<RelativeLayout
android:id="#+id/hashtag_list_row_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp"
android:layout_toLeftOf="#+id/hashtag_list_row_post_count"
android:layout_toStartOf="#+id/hashtag_list_row_post_count">
<TextView
android:id="#+id/hashtag_list_row_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:textColor="#color/hotspot_list_row_title"
android:textSize="16sp"
android:textStyle="bold"
android:text="asdfasdfsadfsadfsfsfsafasdfsafsfasfasfasf" />
<TextView
android:id="#+id/hashtag_list_row_new"
android:layout_toRightOf="#+id/hashtag_list_row_title"
android:layout_toEndOf="#+id/hashtag_list_row_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/red"
android:textStyle="bold"
android:layout_marginTop="2dp"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:text="#string/N" />
</RelativeLayout>
<TextView
android:id="#+id/hashtag_list_row_post_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/btn_post_normal"
android:gravity="center"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#787878"
android:textSize="12sp"
android:textStyle="bold" />
<View
android:id="#+id/hashtag_list_row_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/hashtag_list_row_title_layout"
android:layout_marginTop="24dp"
android:background="#color/bg_horizontal_divider" />
</RelativeLayout>
Edit
Textview on the right side should place right next to the left one, which has varying length. And I want to prevent the situation where the left one gets longer beyond certain length so that the right one is hidden, or overlapped, or whatever.
It should look as below.
| (text) N (empty space empty)|
| (more text) N (empty space) |
| (more text more more...) N |
Edit 2
I want the left TextView to be ellipsized when it's beyond the width of the row except for N badge. I want this.
I don't want this.
Edit 3
N badge should not be placed on the right side all the time. I want the badge to be placed right next to the left TextView when the length is shorter than horizontal width.
It's good.
It's no go.
Ran into the same problem.
What you want is the right side TextView to have:
android:layout_toEndOf="#+id/member_count"
The ID being the ID of the left side TextView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/member_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textStyle="bold"
android:text="10"
android:textSize="16sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:layout_toEndOf="#+id/member_count"
android:text="Members"
android:textSize="16sp"/>
</RelativeLayout>
Try something like below.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/hashtag_list_row_root"
android:background="#drawable/bg_list_row_selector"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/hashtag_list_row_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp"
android:layout_toLeftOf="#+id/hashtag_list_row_post_count"
android:layout_toStartOf="#+id/hashtag_list_row_post_count">
<TextView
android:singleLine="true"
android:id="#+id/hashtag_list_row_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:textColor="#color/hotspot_list_row_title"
android:textSize="16sp"
android:textStyle="bold"
android:text="asdfasdfsadfsadfsfsfsafasdfsafsfasfasfasf" />
</RelativeLayout>
<TextView
android:id="#+id/hashtag_list_row_post_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/btn_post_normal"
android:gravity="center"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#787878"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:layout_centerVertical="true"
android:id="#+id/hashtag_list_row_new"
android:layout_toLeftOf="#+id/hashtag_list_row_post_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/red"
android:textStyle="bold"
android:layout_marginTop="2dp"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:text="#string/N" />
<View
android:id="#+id/hashtag_list_row_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/hashtag_list_row_title_layout"
android:layout_marginTop="24dp"
android:background="#color/bg_horizontal_divider" />
</RelativeLayout>
Result will be something similar like below. I had to remove some attributes that was pointing to resources that my project didn't have, so below figure is just a mock up. The code is updated to fit you.
Hello all i need to develop layout like whats app in chatting screen like
in this i want to display time after chat textview complete.
For that i have done
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/blue" >
<TextView
android:id="#+id/tv_message_chat_item_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginTop="2dp"
android:gravity="left|center"
android:paddingBottom="#dimen/one_dp"
android:paddingLeft="#dimen/fifteen_dp"
android:paddingRight="#dimen/five_dp"
android:paddingTop="#dimen/one_dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="fgfdgdf rete tretretret rtrtrwtw fgdfr grtwerwerewr ewrwerew" />
<TextView
android:id="#+id/tv_message_time_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/tv_message_chat_item_f"
android:layout_marginBottom="2dp"
android:paddingRight="#dimen/five_dp"
android:gravity="right"
android:paddingBottom="#dimen/one_dp"
android:text="fgfdg"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
But not working with big message (the time texview not set properly)
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:gravity="bottom"
android:background="#drawable/blue"
android:layout_alignParentStart="true" android:weightSum="10">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Hi"
android:layout_weight="1"
android:id="#+id/textView"
android:gravity="bottom"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="bottom"
android:layout_marginStart="10dp"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
assuming your textView3 is the one with the "Big message" you should first take advantage of relative layout capabilities and use android:layout_below="#id/textview2" this will prevent overlapping with textView2 instead of just aligning everything from the bottom up.
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView2"
android:layout_centerHorizontal="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
then after you set your TextView that will hold your 'time' you can once agian use something like
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView2"
android:gravity="right"
android:layout_alignParentRight="true"
android:text="12:00 pm"
android:textAppearance="?android:attr/textAppearanceSmall" />
Gravity right will allow the text to be place from right to left, since displaying time usually does not take more than 6 or 7 characters it will help.
Hope it resolves your problem.
You will need to implement ImageViews using 9patches (here: link)
And a listview, which can handle CustomLayouts for ListItems (with the 9Patch ImageView).
I think you are able to implement a list view, therefore I don't go deeper here.
Greets.
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.
Hi I have created an app that i want to run across multiple screens i built the whole thing at HDPi. and when I run it on a newer android phone with a bigger screen the alignment of stuff is out. I know this is because i have set margins to position things using DP.
My question is whats the best practices for using margins across multiple screen sizes and/or is there some code that I can set that can divide/multiply the DP based on screen size?
I'm wanting to get the app across as many devices as possible. but this is my first app so not entirely sure how to do this. So any help would be greatly appreciated.
heres an example of my layout
<?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="20dip"
android:background="#drawable/bg_tablecell"
android:orientation="horizontal"
android:weightSum="1"
>
<TextView
android:id="#+id/position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:paddingLeft="4dip"
android:text="#string/POS"
android:textSize="15dip"
android:textColor="#color/blue"
/>
<TextView
android:id="#+id/TeamName"
android:layout_width="90dip"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:ellipsize="end"
android:gravity="left"
android:lines="1"
android:text="#string/Team"
android:textColor="#color/blue"
android:textSize="15dip"
android:textStyle="bold"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/played"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/TeamName"
android:layout_alignBottom="#+id/TeamName"
android:layout_marginLeft="35dip"
android:layout_toRightOf="#+id/TeamName"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/won"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/played"
android:layout_alignBottom="#+id/played"
android:layout_marginLeft="17dip"
android:layout_toRightOf="#+id/played"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/drawn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/won"
android:layout_alignBottom="#+id/won"
android:layout_marginLeft="16dip"
android:layout_toRightOf="#+id/won"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/lost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/drawn"
android:layout_alignBottom="#+id/drawn"
android:layout_marginLeft="16dip"
android:layout_toRightOf="#+id/drawn"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/goalsFor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/lost"
android:layout_alignBottom="#+id/lost"
android:layout_marginLeft="16dip"
android:layout_toRightOf="#+id/lost"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/goalsAgainst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/goalsFor"
android:layout_alignBottom="#+id/goalsFor"
android:layout_marginLeft="17dip"
android:layout_toRightOf="#+id/goalsFor"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/Difference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/goalsAgainst"
android:layout_alignBottom="#+id/goalsAgainst"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#+id/goalsAgainst"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/Difference"
android:layout_alignBottom="#+id/Difference"
android:layout_marginLeft="18dip"
android:layout_toRightOf="#+id/Difference"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
screens hdpi
screens xhdpi
Well the whole point of using DP is so that you don't have to worry about this. Margins will be roughly the same across devices, but if you're relying on lining things up on one particular device resolution/density combination, you'll definitely be in for a surprise when you test on other devices.
That said, if you do need to specify different margins for different screen sizes, simply add an XML file in res/values -- something like dimens.xml:
<resources
xmlns:android="http://schemas.android.com/apk/res/android"
>
<dimen name="my_view_margin">10dip</dimen>
</resources>
Then add one of these XMLs for every specific device qualifier that you need to (e.g. values-large, values-sw600dp, values-xlarge, etc.) and modify the value as you see fit. When you want to use these dimensions in a layout, just use:
android:layout_margin="#dimen/my_view_margin"
And Android will pick the correct value for whatever device it happens to be running on.