androidtextviewandroid-constraintlayoutseekbar
Textviews are not positioned correctly in Android
I want to position text views directly under a seekbar in Android. Unfortunately the shown layout in the emulator does not look correct altough in the layout editor the layout looks correct. You can see this on the screenshots
There are two problems:
- The textview on the left of the seekbar is to high altough in the layout editor it is on the same level as the seekbar
- The labels for each point of seekbar are all too much on shifted onto the right side.
Here you have the XML-layout code:
<?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">
<TextView
android:id="@+id/textView50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:text="50"
app:layout_constraintBottom_toTopOf="@+id/o_button"
app:layout_constraintStart_toEndOf="@+id/textView40"
app:layout_constraintTop_toBottomOf="@+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<TextView
android:id="@+id/textView60"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:text="60"
app:layout_constraintBottom_toTopOf="@+id/o_button"
app:layout_constraintStart_toEndOf="@+id/textView50"
app:layout_constraintTop_toBottomOf="@+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="245dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="ContentDescription" />
<TextView
android:id="@+id/textViewS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RButton"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.016"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.395" />
<ImageButton
android:id="@+id/commentButton"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@null"
android:contentDescription="comment_Button"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.83"
app:srcCompat="@mipmap/comment" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/comment"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.76" />
<Button
android:id="@+id/o_button"
android:layout_width="163dp"
android:layout_height="72dp"
android:background="@drawable/custom_button"
android:text="Button"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.87" />
<RadioGroup
android:id="@+id/radioGroup_Size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.4"
app:layout_constraintHorizontal_bias="0.871"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="@+id/r_Button_Small"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_weight="1"
android:background="@drawable/background_selector"
android:text="@string/small"
android:textColor="@drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.322"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="50dp"
app:layout_constraintVertical_bias="0.584" />
<RadioButton
android:id="@+id/r_Button_Medium"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_weight="1"
android:background="@drawable/background_selector"
android:checked="true"
android:text="@string/Medium"
android:textColor="@drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.583" />
<RadioButton
android:id="@+id/r_Button_Large"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="@drawable/background_selector"
android:text="@string/Large"
android:textColor="@drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.584" />
</RadioGroup>
<Spinner
android:id="@+id/spinner1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="130dp"
android:layout_marginLeft="120dp"
android:layout_marginEnd="70dp"
android:layout_marginRight="80dp"
android:popupBackground="#5fe0f5"
android:textSize="25sp"
app:layout_constraintBottom_toTopOf="@+id/spinner2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/radioGroup_Size"
app:layout_constraintVertical_bias="0.4" />
<Spinner
android:id="@+id/spinner2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:popupBackground="#5fe0f5"
android:textSize="120sp"
app:layout_constraintBottom_toTopOf="@+id/o_button"
app:layout_constraintEnd_toEndOf="@id/spinner1"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintStart_toStartOf="@id/spinner1"
app:layout_constraintTop_toBottomOf="@+id/radioGroup_Size"
app:layout_constraintVertical_bias="0.44" />
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:text="Spinner 1"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/spinner1"
app:layout_constraintHorizontal_bias="0.102"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textViewS" />
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="28dp"
android:layout_marginRight="28dp"
android:text="Spinner 2"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/spinner2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView8" />
<SeekBar
android:id="@+id/seekBar"
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="260dp"
android:layout_height="26dp"
android:layout_marginBottom="60dp"
android:max="4"
android:maxHeight="4dip"
android:minHeight="4dip"
android:progress="2"
app:layout_constraintBottom_toTopOf="@+id/o_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.89"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/spinner2"
app:layout_constraintVertical_bias="1" />
<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Seekbar"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/textView2"
app:layout_constraintEnd_toStartOf="@+id/seekBar"
app:layout_constraintHorizontal_bias="0.218"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView9"
app:layout_constraintVertical_bias="0.45" />
<TextView
android:id="@+id/textView30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="57dp"
android:layout_marginLeft="57dp"
android:text="30"
app:layout_constraintBottom_toTopOf="@+id/o_button"
app:layout_constraintEnd_toStartOf="@+id/textView12"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintStart_toEndOf="@+id/textView2"
app:layout_constraintTop_toBottomOf="@+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<TextView
android:id="@+id/textView40"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:text="40"
app:layout_constraintBottom_toTopOf="@+id/o_button"
app:layout_constraintStart_toEndOf="@+id/textView30"
app:layout_constraintTop_toBottomOf="@+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<TextView
android:id="@+id/textView70"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="70"
app:layout_constraintBottom_toTopOf="@+id/o_button"
android:layout_marginStart="42dp"
android:layout_marginLeft="42dp"
app:layout_constraintStart_toEndOf="@+id/textView60"
app:layout_constraintTop_toBottomOf="@+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Can you tell me why this problem occurs? For me it is quite strange because in the layout editor everything is being displayed correctly and I do not understand why generally there are sometimes differences between the layouteditor and the layout on an emulator in Android. I'd appreciate every commment and would be thanful for your help.
Solution
Hey I see here there are some constraint issues what you have set and what you are trying to achieve :- In this :-
<SeekBar
android:id="@+id/seekBar"
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="260dp"
android:layout_height="26dp"
android:layout_marginBottom="60dp"
android:max="4"
android:maxHeight="4dip"
android:minHeight="4dip"
android:progress="2"
app:layout_constraintBottom_toTopOf="@+id/o_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.89"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/spinner2"
app:layout_constraintVertical_bias="1" />
<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Seekbar"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/textView2"
app:layout_constraintEnd_toStartOf="@+id/seekBar"
app:layout_constraintHorizontal_bias="0.218"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView9"
app:layout_constraintVertical_bias="0.45" />
You can see you have set your Seekbar textview top and bottom constraints to app:layout_constraintBottom_toTopOf="@+id/textView2" and app:layout_constraintTop_toBottomOf="@+id/textView9" change that to app:layout_constraintTop_toTopOf="@id/seekBar" and app:layout_constraintBottom_toBottomOf="@id/seekBar" This will make your Seekbar textview in center of your actual seekbar.
Now coming to the values section I see that you haven't set your views in your proper aligned manner so it's really hard to find which text view is set where from your xml code. Although I would suggest you take a constraint or linear layout with the same width of your seekbar and below seekbar and then set the text in that layout using constraintWidthPercent(if using constraint layout) according to the max values you have in your seekbar.