Dynamically centering a seekbar based on image dimensions

Question

I'm trying to place a seekbar under an image that I had loaded into an imageview - the xml (below) works fine but what I would like to do is set the maximum length of the seekbar equal to the width of the image when it is loaded and also center it under the image. I've done some research on this group, and the following code resizes the bar:

   LayoutParams lp = new LayoutParams(img2.getWidth(), 50);
   simpleSeekBar.setLayoutParams( lp );

However, it puts the seekbar against the left margin; how do I change this to center it? And how do I get it work when the user alternates between landscape and portrait? When switching between the two orientations, the image gets centered - how do I get the seekbar to dynamically center too?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1"
>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frlayout"
    android:layout_weight="0.80"
    android:layout_width="match_parent"
        android:layout_height="0dp">
            <ImageView
            android:id="@+id/ImageTest"
                android:background="@android:color/transparent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true" />
    </FrameLayout>
<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:progress="1000"
    android:max="2000"
    />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".20"
android:background="#004D79"
android:orientation="horizontal">
    <Button
        android:text="Open File"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/ofbutton" />
    <Button
        android:text="Save File"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/sfbutton" />
    <NumberPicker
        android:id="@+id/np"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@drawable/drawablenp"
        android:layout_centerVertical="true"
        />
</LinearLayout>

score 0 · Answer 1 · answered Mar 07 '19 at 13:42

For this simple layout(and many more), you can just use constraint layout - very easy to use and very responsive to different screen sizes.

Here is an example of what you asked for:

 <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/ImageTest"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginEnd="59dp"
        android:adjustViewBounds="true"
        android:background="@android:color/transparent"
        app:layout_constraintEnd_toStartOf="@+id/ofbutton"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="0dp" />


    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="0dp"
        android:layout_height="14dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintHorizontal_bias="0.581"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />


    <Button
        android:id="@+id/ofbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="Open File"
        app:layout_constraintBottom_toBottomOf="@+id/sfbutton"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/sfbutton" />

    <Button
        android:id="@+id/sfbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="Save File"
        app:layout_constraintBottom_toTopOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        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"
        tools:src="@tools:sample/avatars[12]" />
</androidx.constraintlayout.widget.ConstraintLayout>

Does ConstraintLayout allow items, such as editviews etc. to be dynamically added on top of them? Thats the reason why I am using FrameLayout. That is, I need to be able to do something like this ultimately: scaleview = new ScaleView( getApplicationContext() ); frLayout.addView(scaleview, Math.round(width),Math.round(height/8)); scaleview.setHeight(Math.round(height/8)); scaleview.setWidth(Math.round(2*width/3)); scaleview.setWindowWidth(width); (I am sorry but this is not indenting the code) — user3713442, Mar 07 '19 at 13:50
By dynamically added on top of them do you want to ask if they can act kind of like frame layout? — Tamir Abutbul, Mar 07 '19 at 13:56
Yes, I think so. Its a trick I have done before (as you can see from the code fragment). I don't know if ConstraintLayout will allow new items to be added on top - and if it doesn't I can't use it, sorry. — user3713442, Mar 07 '19 at 14:00
So yes you can do it with [change your constraints programmatically](https://stackoverflow.com/questions/45263159/constraintlayout-change-constraints-programmatically) - for simple view on a view, you can use those constraints - `app:layout_constraintBottom_toBottomOf="@+id/button"` `app:layout_constraintEnd_toEndOf="@+id/button"` `app:layout_constraintStart_toStartOf="@+id/button"` `app:layout_constraintTop_toBottomOf="@+id/button"` — Tamir Abutbul, Mar 07 '19 at 14:05

score 0 · Answer 2 · answered Mar 07 '19 at 15:07

0

Try setting the layout_gravity to center_horizontal. Also you might want to set height to wrap_content instead of 50. Like this:

LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(img2.getWidth(), LinearLayout.LayoutParams.WRAP_CONTENT);
lp.gravity = Gravity.CENTER_HORIZONTAL;
simpleSeekBar.setLayoutParams( lp );

Hope it helps

answered Mar 07 '19 at 15:07

Raihanul

91
1
5

Thanks - this seems to work. It's now thrown up another error; the seekbar is not the same width as the image width. It not very much, a few tens of pixels on either side, but its noticeable. I'm stumped. – user3713442 Mar 07 '19 at 17:43
have you tried manually setting the width of both the image and seekbar to something fixed? like 500 for instance? just to see if there's any difference – Raihanul Mar 07 '19 at 17:51
I think I figure it out - and it so obvious I feel silly. The slider bar itself doesn't extend to the full length of the view. Theres a gap between the left and right edges and where the slider begins and ends. Oops. – user3713442 Mar 08 '19 at 10:41

Dynamically centering a seekbar based on image dimensions

2 Answers2