Marshall
Reputation: 1362
Buttons distributed on top of an image, that stay in the same position no mater the screensize
I am making an app in which I am doing the following:
25 buttons (the red, 5x5) that are equally distributed throughout an image in the background and on the left side 5 buttons (brown) a bit closer to the edge.
I have looked at a few similar questions here, with relative layout, but the problem is that as soon as I adjust for one screen size, it doesn't fit with another any more...
Here is how it looks on my phone screen:
On other screensizes:
Here is my code:
(a bunch of code before that, but part about the image):
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scaleType="fitXY"
android:src="@drawable/chord_box1" />
<LinearLayout
android:id="@+id/firstrow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/imageView1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:orientation="vertical"
android:weightSum="10" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="4"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/empty1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
<TextView
android:id="@+id/fretposition1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="1" />
<TextView
android:id="@+id/fretposition2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="2" />
<TextView
android:id="@+id/fretposition3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="3" />
<TextView
android:id="@+id/fretposition4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="4" />
<TextView
android:id="@+id/fretposition5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="5" />
<Button
android:id="@+id/empty2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1.1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/empty4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="@+id/fret10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="@drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="@+id/fret11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/empty3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/empty5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="@+id/fret20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="@drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="@+id/fret21"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret22"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret23"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret25"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/empty6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/empty7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="@+id/fret30"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="@drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="@+id/fret31"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret32"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret33"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret34"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret35"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/empty8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/empty9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="@+id/fret40"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="@drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="@+id/fret41"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret42"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret43"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret44"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/empty10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/empty11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="@+id/fret50"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="@drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="@+id/fret51"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret52"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret53"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret54"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="@+id/fret55"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="@+id/empty12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
<Button
android:id="@+id/empty13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
</RelativeLayout>
I've made the first row and tried to make it fit, but I'm not sure how to make it fit on different screens. Is this the right way to do it, or should it maybe be done on the java code instead of the xml?
Upvotes: 0
Views: 43
Answers (1)
samgak
Reputation: 24417
Change the layout_height of your top-level LinearLayout to "match_parent". Then it will cover the entire screen vertically.
<LinearLayout
android:id="@+id/firstrow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="@+id/imageView1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:orientation="vertical"
android:weightSum="10" >
You might need to re-adjust the weights to make it look exactly as it did before.
Upvotes: 1
Related Questions
- Is it possible to keep buttons and imageview aligned for every screen size?
- Positioning buttons at fixed position on backgound image for different screens?
- How to position the image buttons in my android app with respect to the background for different screen sizes?
- put buttons on an image which looks the same in different displays
- How to set a linear layout of buttons at the top of an image (layouts in android)?
- How to position buttons on scaled background image
- Android: Correctly position buttons inside layout
- Buttons on top on image on different screensizes - Android
- Android: position of buttons in screens with different resolutions
- How to set the absolute position of an image or button so that it is consistent across multiple screen sizes?