How to create a Relative layout with multiple buttons compatible for all screen sizes?

Question

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/lyt_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/plain_bg"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/lyt_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/header" />
</LinearLayout>

<LinearLayout
    android:id="@+id/lyt_body"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/lyt_Buttons"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/imgfrontlogo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/imgcenterlogo"
            android:layout_alignParentTop="true"
            android:layout_marginTop="61dp"
             android:background="@drawable/front_logo"
             />

        <ImageView
            android:id="@+id/imgcenterlogo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/btnPersonaltrainer"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="29dp"
            android:background="@drawable/center_logo" />

        <Button
            android:id="@+id/btnMyProfile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="21dp"
            android:layout_marginLeft="32dp"
            android:background="@drawable/myprofile" />

        <Button
            android:id="@+id/btnTaracker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imgcenterlogo"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="49dp"
            android:background="@drawable/track" />

        <Button
            android:id="@+id/btnPersonaltrainer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/btnMyProfile"
            android:layout_alignLeft="@+id/btnAllExercises"
            android:background="@drawable/personaltrainer" />

        <Button
            android:id="@+id/btnRandomworkouts"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/btnPersonaltrainer"
            android:layout_alignParentLeft="true"
            android:background="@drawable/randomworkout" />

        <Button
            android:id="@+id/btnAllworkouts"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/btnAllExercises"
            android:layout_alignBottom="@+id/btnAllExercises"
            android:layout_alignLeft="@+id/btnMyProfile"
            android:background="@drawable/allworkouts" />

        <Button
            android:id="@+id/btnAllExercises"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/btnTaracker"
            android:layout_alignParentRight="true"
            android:layout_marginRight="40dp"
            android:background="@drawable/allexercises" />

            </RelativeLayout>
            </LinearLayout>

            </LinearLayout>`

I need to create layout compatible for all screen sizes,created separte layout for xlarge sizes(800x1280,720x1280 etc). Here I cant upload image due to reputation,need to place one main button on center of the layout ,place 3 buttons on curvely on left and right side of middle button.please can anyone help me to create the layout compatible for all screen sizes without using dp or fixed points.

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

you can use android:layout_weight attribute. It will allow you to use percentages to define your buttons.

For EX:

  <LinearLayout
android:layout_width="fill_parent" 
android:layout_height="wrap_content"
android:weightSum="1.0" >

    <Button
        android:text="left" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".50" /> 

    <Button
        android:text="right" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".50" />

</LinearLayout>

Now you have given percentages values to buttons so they will be displayed on any size of screen to their percent value of the whole screen.

This can be done in LinearLayout for RelativeLayout check second answer on this link

edited May 23 '17 at 12:12

Community

1
1

answered Apr 24 '13 at 05:58

Shiv

4,569
4
25
39

thank you for reply,but here cant set the layout_weight attribute because I am using Relative layout for placing buttons.There are 7 buttons,One large button on center and curvely three buttons on left and right side of center button.So I m facing the alignment issues.I cant upload the screen shot here,If mention your email id here then I can send the image. – Kishore Apr 24 '13 at 06:09
check the link i have provided in last line of my answer there are answers on relative layout also – Shiv Apr 24 '13 at 06:12
sorry didnt get the solution. – Kishore Apr 24 '13 at 07:11

score 0 · Answer 2 · answered Apr 25 '13 at 06:39

As mentioned in the question you want the buttons to be placed curvely at left and right of a center button, you can have a look at the link to get some idea to how to accomplish this: https://github.com/daCapricorn/ArcMenu This is an open source project which I referred to create a Path like menu.

How to create a Relative layout with multiple buttons compatible for all screen sizes?

2 Answers2