Home > Software engineering >  How can I make a SeekBar take up the width available between a TextView and an ImageButton?
How can I make a SeekBar take up the width available between a TextView and an ImageButton?

Time:05-26

I'd like the TextView and ImageButton to take up space based on their size & have the SeekBar take up whatever space remains. Here's my current code:

<androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="100">

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@ id/seekbar_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:textColor="@color/white" />

        <SeekBar
            android:id="@ id/seek_bar"
            style="@style/Widget.AppCompat.SeekBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp" />

        <ImageButton
            android:id="@ id/ccBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_captions_off"
            app:tint="@color/white" />


    </androidx.appcompat.widget.LinearLayoutCompat>

With this code, the SeekBar has no width & the ccBtn appears in the center of the screen. How can I fix this?

CodePudding user response:

you can use "weight" property. setting seekBar weight to 1 and layout_width to 0dp should do it.

also, on a side note, try to be consistent when naming your variables, don't "do_this" for one variable "andThis" for another

CodePudding user response:

Following Ricardo's answer, the code will be

<androidx.appcompat.widget.LinearLayoutCompat
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@ id/seekbar_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:textColor="@color/white" />

    <SeekBar
        android:id="@ id/seek_bar"
        style="@style/Widget.AppCompat.SeekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_weight="1"
        android:layout_marginBottom="8dp" />

    <ImageButton
        android:id="@ id/ccBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_captions_off"
        app:tint="@color/white" />


</androidx.appcompat.widget.LinearLayoutCompat>

Image preview: https://i.stack.imgur.com/LGrEo.png

In the image I've centered it a bit, which can be achieved with gravity center and no bottom margin

  • Related