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.
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>
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>