Search code examples
androidandroid-layoutandroid-recyclerview

How to have the same white space around a view in android for different devices


I have the following seek bar in Android XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <SeekBar
        android:id="@+id/seekBar_Sweetness"
        style="@style/Widget.AppCompat.SeekBar.Discrete"
        android:layout_width="@dimen/_120sdp"
        android:layout_height="@dimen/_18sdp"
        android:elevation="2dp"
        android:max="1000"
        android:maxHeight="4dip"
        android:minHeight="4dip"
        android:progress="150"
        android:progressDrawable="@drawable/seek_bar_ruler_rate"
        android:thumb="@drawable/seek_bar_slider_beer"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

The problem is, that there is always white space around the view. Strangely this white space has different ratios depending on the used screen. You can see on the screenshot, that the aspect ratio for tablets is smaller compared to phones. This has fundamental negative impacts on the disgn of the UI because when using the constraint layout, the constraint will lead to different visual results depending on the used screen. This results in a layout that is not usable for multiple devices. Thus, I would like to know if there is a method to either remove the white space around a view or to at least have a white space whose aspect ratios are the same when having different screen sizes.

enter image description here

Update: Here is the custom drawable seek_bar_ruler_rate.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <size
                android:width="10dp"
                android:height="2dp"
                />
            <solid
                android:color="#efc013" />
            <corners android:radius="0dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <size
                    android:width="10dp"
                    android:height="2dp"
                    />
                <solid
                    android:color="#efc013" />
                <corners android:radius="0dp" />
            </shape>
        </clip>
    </item>
</layer-list>

and here is the custom drawable seek_bar_slider_beer.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

    <solid android:color="#FFFFFF" />
    <stroke
        android:width="@dimen/_2sdp"
        android:color="#211a05"
        />
    <size
        android:width="@dimen/_6sdp"
        android:height="@dimen/_13sdp"
        />
</shape>

Solution

  • In order to remove the white space you need to set the start/end paddings to 0dp. The final xml layout will look like this:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
    
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
    
        <SeekBar
            android:id="@+id/seekBar_Sweetness"
            style="@style/Widget.AppCompat.SeekBar.Discrete"
            android:layout_width="@dimen/_120sdp"
            android:layout_height="@dimen/_18sdp"
            android:elevation="2dp"
            android:max="1000"
            android:paddingStart="0dp"
            android:paddingEnd="0dp"
            android:maxHeight="4dip"
            android:minHeight="4dip"
            android:progress="150"
            android:progressDrawable="@drawable/seek_bar_ruler_rate"
            android:thumb="@drawable/seek_bar_slider_beer"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
    
    </androidx.constraintlayout.widget.ConstraintLayout>