CODEWITHSUNDEEP
android
user1798049
user1798049

Reputation: 265

Screen layout doesn't look good on bigger screens

I have 3 horizontal LinearLayouts, I've been making xml on 4.7 screen and it looked good, then i switched to bigger screen and it doesnt look good. So my xml looks good on screen size of 4.7 but on 10.01 and 7 it screws up
on 4.7 screen: enter image description here

on 10,01 :enter image description here

<LinearLayout 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:background="@drawable/backgroun"
    android:orientation="vertical" 
  >

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal" >

     <Button
         android:id="@+id/button1"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_weight="1"
         android:text="Load" />

     <Button
         android:id="@+id/button2"
         android:layout_width="wrap_content"
        android:layout_height="match_parent"
         android:text="Play"
         android:layout_weight="1" />

     <Button
         android:id="@+id/button3"
         android:layout_width="wrap_content"
        android:layout_height="match_parent"
         android:text="Mute" 
         android:layout_weight="1"/>

     <Button
         android:id="@+id/button4"
         android:layout_width="wrap_content"
        android:layout_height="match_parent"
         android:text="Volume up"
         android:layout_weight="1" />

     <Button
         android:id="@+id/button5"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:text="Volume up"
         android:layout_weight="1" />

     <Button
         android:id="@+id/button6"
         android:layout_width="wrap_content"
        android:layout_height="match_parent"
         android:text="Mute" 
         android:layout_weight="1"/>

     <Button
         android:id="@+id/button7"
         android:layout_width="wrap_content"
        android:layout_height="match_parent"
         android:text="Play"
         android:layout_weight="1"/>

     <Button
         android:id="@+id/button8"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:text="Load"
         android:layout_weight="1" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal" >

        <SeekBar
            android:id="@+id/seekBar1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:layout_weight="7"/>

        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <SeekBar
            android:id="@+id/seekBar2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
             android:layout_weight="7"/>

    </LinearLayout>
     <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal" >

         <SeekBar
             android:id="@+id/seekBar3"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_weight="1" />

         <SeekBar
             android:id="@+id/seekBar4"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_weight="1" />

    </LinearLayout>

    </LinearLayout>

Upvotes: 0

Views: 103

Answers (2)

Nathua
Nathua

Reputation: 8826

For different size screens. you can also make another layout for bigger screen.

res/layout-small
res/layout-large
res/layout-xlarge

create a new folder as named "layout-xlarge" and copy your xml layout in there and you can adjust the sizes.

Android will automatically select the appropriate layout for the current device. Remember that, layout name should be the same in each folder.

Upvotes: 1

Thomas Kaliakos
Thomas Kaliakos

Reputation: 3304

First of all when you use android:layout_weight you should set the android:layout_width="0dp"
Besides that now, I would suggest having a separate layout for xlarge screens.
The way to do that is to create a separate folder that will contain a layout with the same name as your original layout (eg. main.xml). The folder name for 10" screens should be something like layout-xlarge.
For more details you should check here.

Upvotes: 1

Related Questions