Scroll through an image in android studio's designer window

Question

I have this guitar fret-board image that I would like to place dots over but android studio's designer won't let me scroll around it to place them. This is a big image so the whole thing can't be displayed at once and needs to be scrolled around both in the designer and programmatically scrolls with java (the latter of which I have already working).

Here is my simple xml 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">


<ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rotation="90"
    android:scaleType="centerCrop"
    android:src="@drawable/fretboard"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />


</androidx.constraintlayout.widget.ConstraintLayout>

This is the image that is used in case anyone wants to try to replicate. I'm on Android Studio 4.0.1 and the emulator is running Android 9.0 Wear OS.

As you can see, it's flipped 90 degrees in the xml, which makes it a bit tougher. I had to center crop it because it wouldn't let me increase it's size with the height and width parameters without it going off the screen. The image scrolls fine with a java OnTouchListener albeit, kind of sloppily. Any Help is deeply appreciated with this.

score 1 · Answer 1 · answered Jan 06 '21 at 21:58

Solved it by encapsulating the ImageView inside of a FrameView and putting them all in a HorizontalScrollView. You have to have the FrameView or else you can't put other elements over top of the fretboard.

 <?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">

<HorizontalScrollView
    android:layout_width="199dp"
    android:layout_height="213dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#c1c1c1"
            android:src="@drawable/fretboard" />



    </FrameLayout>

</HorizontalScrollView>


</androidx.constraintlayout.widget.ConstraintLayout>

Scroll through an image in android studio's designer window

1 Answers1