CODEWITHSUNDEEP
javaandroidandroid-studioandroid-layoutkotlin
YosiFZ
YosiFZ

Reputation: 7900

LinearLayout not responsive in small devices

I have a layout file in my Android application:

<?xml version="1.0" encoding="utf-8"?>
<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="@color/player_background"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".Fragments.PlayerFragment">

    <ProgressBar
        android:id="@+id/progress_bar_player"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="5dp"
        android:theme="@style/ProgressBarStyle"
        android:visibility="invisible" />

    <TextView
        android:id="@+id/title_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="Title"
        android:textColor="@color/white"
        android:textSize="24dp" />

    <ImageView
        android:id="@+id/view_imageview"
        android:layout_width="280dp"
        android:layout_height="280dp"
        android:layout_marginTop="10dp"
        android:background="@color/white" />

    <TextView
        android:id="@+id/status_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="Status"
        android:textColor="@color/white"
        android:textSize="20dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <ImageButton
            android:id="@+id/play_pause_btn"
            android:layout_width="70dp"

            android:layout_height="70dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/round_button"
            android:gravity="center_vertical|center_horizontal"
            android:padding="20dp"
            android:scaleType="fitCenter"
            android:src="@drawable/play_btn" />

        <ImageButton
            android:id="@+id/sleep_timer_btn"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_marginLeft="30dp"
            android:layout_toRightOf="@+id/play_pause_btn"
            android:background="@drawable/round_button"
            android:gravity="center_vertical|center_horizontal"
            android:padding="20dp"
            android:scaleType="fitCenter"
            android:src="@drawable/sleep_btn" />

        <ImageButton
            android:id="@+id/share_btn"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_marginRight="30dp"
            android:layout_toLeftOf="@+id/play_pause_btn"
            android:background="@drawable/round_button"
            android:gravity="center_vertical|center_horizontal"
            android:padding="20dp"
            android:scaleType="fitCenter"
            android:src="@drawable/share_btn" />

        <TextView
            android:id="@+id/sleep_timer_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/sleep_timer_btn"
            android:layout_alignLeft="@+id/sleep_timer_btn"
            android:layout_alignRight="@+id/sleep_timer_btn"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="Status"
            android:textColor="@color/white"
            android:textSize="15dp" />

    </RelativeLayout>

    <SeekBar
        android:id="@+id/volume_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:theme="@style/Volume_Seekbar"
        android:paddingStart="30dp"
        android:paddingEnd="30dp"/>

</LinearLayout>

It's working perfectly in most of the devices but in a small screen device I can't see the SeekBar because it's out from the screen. Any idea how I can fix it?

Upvotes: 5

Views: 603

Answers (3)

Tamir Abutbul
Tamir Abutbul

Reputation: 7661

You are using very large fixed sizes on your views, and because different phones got different screen sizes what seems to work on some device will actually not work on another

For example - in a smaller device with height of 300dp with views summing up to total of 400dp you will not have enough room for some views because of the small screen size and that's why you are not seeing your view.

You can use ConstraintLayout to make your screen responsive, or if you want to keep your current layout structure you can use the following libraries for scaling size of dp:

ssp and sdp to get a scalable size unit for your views and texts.

Another option is to wrap your layout with ScrollView, giving your screen the option to be scrollable and by that you will be able to "see" all of your views on your screen - note that this may not be intuitive to your user.

Upvotes: 7

Umair
Umair

Reputation: 6426

I would suggest you to use constraint layout, but if you still want to go ahead with your current view then it will be good practice if you add scrollview to your parent layout, so that your layout won't get cropped on smaller devices:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    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:fillViewport="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/player_background"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        tools:context=".Fragments.PlayerFragment">

        <ProgressBar
            android:id="@+id/progress_bar_player"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            android:theme="@style/ProgressBarStyle"
            android:visibility="invisible" />

        <TextView
            android:id="@+id/title_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="Title"
            android:textColor="@color/white"
            android:textSize="24dp" />

        <ImageView
            android:id="@+id/view_imageview"
            android:layout_width="280dp"
            android:layout_height="280dp"
            android:layout_marginTop="10dp"
            android:background="@color/white" />

        <TextView
            android:id="@+id/status_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="Status"
            android:textColor="@color/white"
            android:textSize="20dp" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">

            <ImageButton
                android:id="@+id/play_pause_btn"
                android:layout_width="70dp"

                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/round_button"
                android:gravity="center_vertical|center_horizontal"
                android:padding="20dp"
                android:scaleType="fitCenter"
                android:src="@drawable/play_btn" />

            <ImageButton
                android:id="@+id/sleep_timer_btn"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginLeft="30dp"
                android:layout_toRightOf="@+id/play_pause_btn"
                android:background="@drawable/round_button"
                android:gravity="center_vertical|center_horizontal"
                android:padding="20dp"
                android:scaleType="fitCenter"
                android:src="@drawable/sleep_btn" />

            <ImageButton
                android:id="@+id/share_btn"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginRight="30dp"
                android:layout_toLeftOf="@+id/play_pause_btn"
                android:background="@drawable/round_button"
                android:gravity="center_vertical|center_horizontal"
                android:padding="20dp"
                android:scaleType="fitCenter"
                android:src="@drawable/share_btn" />

            <TextView
                android:id="@+id/sleep_timer_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/sleep_timer_btn"
                android:layout_alignLeft="@+id/sleep_timer_btn"
                android:layout_alignRight="@+id/sleep_timer_btn"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="Status"
                android:textColor="@color/white"
                android:textSize="15dp" />

        </RelativeLayout>

        <SeekBar
            android:id="@+id/volume_seek_bar"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:paddingStart="30dp"
            android:paddingEnd="30dp"
            android:theme="@style/Volume_Seekbar" />

    </LinearLayout>
</ScrollView>

Upvotes: 1

Shreemaan Abhishek
Shreemaan Abhishek

Reputation: 1230

It is because the fixed sizes you are using to build your layout is getting summed up eventually being too big for small screen size. You can try the following to fix this:

  1. Create a layout specially for small screen size by using smallest width qualifier
  2. Make your layout scrollable
  3. Use constraint layout
  4. Using the ssp and sdp size units

NOTE that you will have to specify the smallest width qualifier to your current layout in such a way that the smallest width qualifer excludes the small screen devices and include the devices in which your layout fits properly.

Upvotes: 1

Related Questions