Simon Tenbeitel
Reputation: 877
Android: Optimize Design for different Screen Sizes
I designed a .xml file, with a relative Layout where the distance between the elements is definied by the use of "dp". I thought this would work well, until I got a new Smartphone, with a much bigger screen than my old one had. At the Top there is a TextView which should use 12% of the screen, than there is a ScrollView which should use 84% of the screen, and the last 4% should be empty.
This is the .xml file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.96"
android:background="@drawable/hintergrund"
android:orientation="vertical" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="35dp"
android:layout_marginTop="17dp"
android:text="Prüfung"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000000" />
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="437dp"
android:layout_marginTop="58dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="@+id/textView5"
android:layout_width="293dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#000000"
android:textSize="16dp" />
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_gravity="center_horizontal"
>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<TextView
android:layout_height="wrap_content"
android:text="@string/sf"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<Spinner
android:id="@+id/spinner1"
android:text="@string/sf"
android:prompt="@string/sf"
android:drawSelectorOnTop="true"
/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<TextView
android:layout_height="wrap_content"
android:text="@string/odf"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<Spinner
android:id="@+id/spinner2"
android:layout_width="237dp"
android:text="@string/odf"
android:prompt="@string/odf"
android:drawSelectorOnTop="true"
/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<TextView
android:layout_height="wrap_content"
android:text="@string/ps"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<Spinner
android:id="@+id/spinner3"
android:text="@string/ps"
android:prompt="@string/ps"
android:drawSelectorOnTop="true"
/>
</TableRow>
</TableLayout>
<ProgressBar
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="109dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
android:id="@+id/progressBar1" />
<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_gravity="center_horizontal"
android:textSize="12sp" />
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_gravity="center_horizontal"
>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vorherige" />
<Button
android:id="@+id/btn6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nächste" />
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
Upvotes: 0
Views: 388
Answers (2)
invisbo
Reputation: 3438
I changed your RelativeLayout with LinearLayout and i set weightSum to LinearLayout as 100. Last step is share it for its child as you want:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="100"
android:background="@drawable/hintergrund"
android:orientation="vertical" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="35dp"
android:layout_marginTop="17dp"
android:text="Prüfung"
android:layout_weight="12"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000000" />
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="84"
android:layout_marginTop="58dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView5"
android:layout_width="293dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#000000"
android:textSize="16dp" />
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<TextView
android:layout_height="wrap_content"
android:text="@string/sf"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<Spinner
android:id="@+id/spinner1"
android:drawSelectorOnTop="true"
android:prompt="@string/sf"
android:text="@string/sf" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<TextView
android:layout_height="wrap_content"
android:text="@string/odf"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<Spinner
android:id="@+id/spinner2"
android:layout_width="237dp"
android:drawSelectorOnTop="true"
android:prompt="@string/odf"
android:text="@string/odf" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<TextView
android:layout_height="wrap_content"
android:text="@string/ps"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<Spinner
android:id="@+id/spinner3"
android:drawSelectorOnTop="true"
android:prompt="@string/ps"
android:text="@string/ps" />
</TableRow>
</TableLayout>
<ProgressBar
android:id="@+id/progressBar1"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="109dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp" />
<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#000000"
android:textSize="12sp" />
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vorherige" />
<Button
android:id="@+id/btn6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nächste" />
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
Upvotes: 1
tyczj
Reputation: 73753
Using this textview as an example
<TextView
android:id="@+id/textView5"
android:layout_width="293dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#000000"
android:textSize="16dp" />
the problem is you have hard width's ie. android:layout_width="293dp"
instead it should read android:layout_width="match_parent"
then add a margin to the right or where ever: android:layout_marginLeft="20dp"
so this will make the width of you textview go all the way to the other side of the screen but indent the right margin 20dp so you would see the space you want
Upvotes: 0
Related Questions
- How can i support multiple screen sizes in android with single xml layout file
- How to make a flexible UI for all screen sizes?
- Android Single Layout to FIt All Screen Sizes
- layouts for different screen sizes android
- Android Design Screen for different screen size
- Android XML layout Design for various screens
- Different layout for different screen size
- how to set layout for different screen size in android
- Designing android app for multiple screen sizes
- Android Development - Designing User Interface for multiple screen sizes