I have a guitar fret board image and have dots that I have overlay-ed on top of them. Unfortunately when I scroll the image the dots don't move with it. Sorry it is so long. It's the only way I could figure out how to implement dots on the image. If anyone has any ideas on a better way to do the images also, I'm all ears.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/fretboardView"
android:layout_width="match_parent"
android:layout_height="67dp"
android:layout_gravity="center_vertical"
android:src="@drawable/fretboard" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="61dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="44dp" />
<ImageView
android:id="@+id/dot1e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="44dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="44dp" />
<ImageView
android:id="@+id/dot1B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="44dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="44dp" />
<ImageView
android:id="@+id/dot1G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="44dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="44dp" />
<ImageView
android:id="@+id/dot1D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="44dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="44dp" />
<ImageView
android:id="@+id/dot1A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="44dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="44dp" />
<ImageView
android:id="@+id/dot1E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="44dp"
android:src="@drawable/dot" />
</LinearLayout>
<LinearLayout
android:layout_width="19dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot2e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot2B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot2G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot2D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot2A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot2E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
</LinearLayout>
<LinearLayout
android:layout_width="19dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot3e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot3B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot3G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot3D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot3A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot3E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
</LinearLayout>
<LinearLayout
android:layout_width="19dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot4e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot4B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot4G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot4D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot4A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot4E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
</LinearLayout>
<LinearLayout
android:layout_width="19dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot5e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot5B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot5G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot5D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot5A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot5E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
</LinearLayout>
<LinearLayout
android:layout_width="19dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot6e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot6B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot6G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot6D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot6A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot6E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
</LinearLayout>
<LinearLayout
android:layout_width="19dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot7e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot7B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot7G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot7D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot7A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot7E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
</LinearLayout>
<LinearLayout
android:layout_width="21dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot8e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot8B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot8G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot8D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot8A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot8E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
</LinearLayout>
<LinearLayout
android:layout_width="17dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot9e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot9B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot9G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot9D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot9A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot9E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="3dp"
android:src="@drawable/dot" />
</LinearLayout>
<LinearLayout
android:layout_width="18dp"
android:layout_height="match_parent"
android:orientation="vertical">
<Space
android:layout_width="18dp"
android:layout_height="4dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot10e"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="2dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="1dp" />
<ImageView
android:id="@+id/dot10B"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="2dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2.5dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot10G"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="2dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="2dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot10D"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="2dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot10A"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="2dp"
android:src="@drawable/dot" />
<Space
android:layout_width="18dp"
android:layout_height="3dp"
android:layout_marginLeft="3dp" />
<ImageView
android:id="@+id/dot10E"
android:layout_width="18dp"
android:layout_height="7dp"
android:layout_marginLeft="2dp"
android:src="@drawable/dot" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
If I were you, I'd place all the buttons in the layout, and put it into a ScrollView. This way, you can give the fragment a background image, and scroll everything together.
Like this:
<ScrollView>
<LinearLayout
android:id="@+id/linearlayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="@drawable/your_image" <!-- place that image in the drawables folder -->
android:orientation="vertical">
</LinearLayout>
</ScrollView>
(Mind that you'll have to put the scroll view inside some layout as well, for example a constraint layout)
You can also set the background image programmatically with:
LinearLayout mLayout = (LinearLayout) findViewById(R.id.linearlayout1);
mLayout.setBackground(Image);