StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAndroid screen layouts - multiple layouts and densities
text
Body
copied!<p>I am looking for some advice on a problem I have supporting multiple Android screens in my app.</p> <p>I have read the article <a href="http://developer.android.com/guide/practices/screens_support.html" rel="nofollow noreferrer">Supporting Multiple Screens</a>. I followed the advice and created 4 /res layout folders /layout-small, /layout-normal, /layout-large and /layout-xlarge. I mostly use RelativeLayouts and all units are measured in dip.</p> <p>On my various test devices, this all works fine. However, a number of users have contacted me to say that the data is running off the edge of the screen. Closer examination using the excellent <a href="https://play.google.com/store/apps/details?id=com.jotabout.screeninfo" rel="nofollow noreferrer">Screen info app</a> shows that the devices I have been able to test my app on have Normal HDPI, Normal XHDPI and XLarge MDPI screens but the user devices where there are problems have Large MDPI screens.</p> <p>My IDE is IntelliJ Idea and this has a preview mode which lets me test the layouts against a number of different screen emulations. To emulate the Large screen, I set the Preview mode to 7 inch WSVGA (Tablet). Does that seem correct? I don't own an actual Large screen test device.</p> <p>What I don't understand is why I am having a problem with certain devices? Surely I don't have to create any more than the 4 layouts I have already designed? Even at 4, it becomes a real pain every time I add a screen to have to update different values for each of them.</p> <p>How do other developers test different screen sizes / densities without having a range of test devices?</p> <p><em>EDIT</em> I should have said - my screens consist only of buttons and textviews, no graphics to speak of.</p> <p><em>EDIT 2</em> I have added screenshots. The first (actually a photograph) shows the screen layout as it appears on a user device (note Friday is not visible). The second shows the program working as it should be.</p> <p><em>Edit 3</em> I have included some of the XML code used for the layout</p> <p><img src="https://i.stack.imgur.com/YkB3v.jpg" alt="Incorrect timetable view"> <img src="https://i.stack.imgur.com/zFbdr.jpg" alt="Correct timetable view"></p> <pre><code><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/paper_thin_background" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingLeft="15dip" android:paddingTop="15dip" > <TextView android:id="@+id/timetable_week" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="25dip" android:textSize="20sp" android:textColor="#15252D" android:text="@string/timetable_week" android:paddingTop="10dip" android:paddingBottom="30dip" /> <Spinner android:id="@+id/timetable_week_spinner" android:layout_toRightOf="@id/timetable_week" android:layout_height="wrap_content" android:prompt="@string/enterday" android:layout_width="140dip" android:entries="@array/timetable_weeks" android:textSize="205sp" android:textColor="#768766" /> </code></pre> <pre><code> <TextView android:id="@+id/period_heading" android:layout_width="120dp" android:layout_height="wrap_content" android:textColor="#768766" android:text="@string/period" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" android:layout_below="@+id/timetable_week" /> <TextView android:id="@+id/monday_heading" android:layout_toRightOf="@id/period_heading" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#768766" android:text="@string/monday" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" android:layout_below="@+id/timetable_week" /> <TextView android:id="@+id/tuesday_heading" android:layout_toRightOf="@id/monday_heading" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#768766" android:text="@string/tuesday" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" android:layout_below="@+id/timetable_week" /> <TextView android:id="@+id/wednesday_heading" android:layout_toRightOf="@id/tuesday_heading" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#768766" android:text="@string/wednesday" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" android:layout_below="@+id/timetable_week" /> <TextView android:id="@+id/thursday_heading" android:layout_toRightOf="@id/wednesday_heading" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#768766" android:text="@string/thursday" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" android:layout_below="@+id/timetable_week" /> <TextView android:id="@+id/friday_heading" android:layout_toRightOf="@id/thursday_heading" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#768766" android:text="@string/friday" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" android:layout_below="@+id/timetable_week" />  <TextView android:id="@+id/p1_heading" android:layout_below="@id/period_heading" android:layout_width="120dp" android:layout_height="wrap_content" android:textColor="#768766" android:text="@string/p1" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" /> <TextView android:id="@+id/monp1" android:layout_below="@id/period_heading" android:layout_toRightOf="@id/period_heading" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#15252D" android:text="@string/blank" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" /> <TextView android:id="@+id/tuep1" android:layout_below="@id/period_heading" android:layout_toRightOf="@id/monp1" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#15252D" android:text="@string/blank" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" /> <TextView android:id="@+id/wedp1" android:layout_below="@id/period_heading" android:layout_toRightOf="@id/tuep1" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#15252D" android:text="@string/blank" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" /> <TextView android:id="@+id/thup1" android:layout_below="@id/period_heading" android:layout_toRightOf="@id/wedp1" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#15252D" android:text="@string/blank" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" /> <TextView android:id="@+id/frip1" android:layout_below="@id/period_heading" android:layout_toRightOf="@id/thup1" android:layout_width="170dp" android:layout_height="wrap_content" android:textColor="#15252D" android:text="@string/blank" android:textSize="20sp" android:paddingBottom="15dip" android:gravity="center_horizontal" /> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload