CODEWITHSUNDEEP
androidlayoutandroid-layout
Louis
Louis

Reputation: 177

How does one align views at certain positions of the screen, staying consistent across multiple screen resolutions?

I've got a bit of a problem aligning my buttons. I want to get them at (roughly) 1/3rd and 2/3rd of my screen (I provided a screenshot below to make things a bit more clear) My code is the following:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:background="@drawable/mainbg">

    <Button 
        android:text="@string/topbutton"
        android:background="@drawable/silvertablesbuttonbgkort"
        android:id="@+id/topbutton"
        android:layout_alignParentRight="true" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center|center_vertical">
    </Button>

    <Button 
        android:text="@string/midbutton"
        android:background="@drawable/silvertablesbuttonbglang"
        android:id="@+id/midbutton"
        android:layout_alignParentRight="true" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center|center_vertical">
   </Button>


<RelativeLayout 
    android:id="@+id/underbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" >

    <Button 
        android:text="@string/underbartekst"
        android:background="@drawable/silvertablesunderbar"
        android:id="@+id/underbarbutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp"
        android:textSize="20dp"
        android:gravity="left|center_vertical" >
    </Button>

</RelativeLayout>

I'm trying to get it to look like this: (I'm sorry if posting screenshot mock-ups is frowned upon here, I just couldn't think of a better way to clear up what I'm trying to do)

It seems that I can't post images because I'm too new here... So here is a link to the screenshot: https://i.sstatic.net/LIVup.png

My initial idea was just wrapping a vertical linear layout around the two buttons and putting empty textviews above and in between the two, which would actually work if this app was meant to be running on one screen size, but I'm pretty sure it'd mess up on every phone with another screen resolution. I solved this problem for the bar at the bottom by using a relativelayout with android:layout_alignParentBottom="true", but I can't really think of a way to snap to 1/3rd or 2/3rd. Is there a way to do this that will work with various screen resolutions?

Edit: I solved my problem! I tried to post it as an answer, but I can't until in 8 hours. Will do then, but for now, I'll just post it as an edit here:

I've placed a TextView of 0x0 in the middle of the screen, and put RelativeLayouts on top of and below it, filling the screen. Then I placed two TextViews of 0x0 in the middle of those layouts, and within those layouts, two new RelativeLayouts. One below the highest TextView, one above the lowest. I placed my buttons in the center of those layouts. It works like a charm, and does not rely on anything but the code itself. This is my code now:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:background="@drawable/mainbg">


    <TextView 
        android:text=" "
        android:id="@+id/ankermidden"
        android:layout_centerVertical="true"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </TextView>

    <RelativeLayout
        android:id="@+id/ankerveldboven"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/ankermidden">

                <TextView 
                    android:text=" "
                    android:id="@+id/ankerboven"
                    android:layout_centerVertical="true"
                    android:layout_width="0dp"
                    android:layout_height="0dp">
                </TextView>

            <RelativeLayout
                android:id="@+id/ankerveldmidboven"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/ankerboven">

                 <Button 
                    android:text="@string/topbutton"
                    android:background="@drawable/silvertablesbuttonbgkort"
                    android:id="@+id/topbutton"
                    android:layout_alignParentRight="true"
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center|center_vertical">
                </Button>

            </RelativeLayout>

</RelativeLayout>


<RelativeLayout
        android:id="@+id/ankerveldonder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ankermidden">

    <TextView 
        android:text=" "
        android:id="@+id/ankeronder"
        android:layout_centerVertical="true"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </TextView>

            <RelativeLayout
                android:id="@+id/ankerveldmidonder"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@id/ankeronder">      

                <Button 
                    android:text="@string/midbutton"
                    android:background="@drawable/silvertablesbuttonbglang"
                    android:id="@+id/midbutton"
                    android:layout_alignParentRight="true" 
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center|center_vertical">
                </Button>

            </RelativeLayout>       

 </RelativeLayout>

<RelativeLayout 
    android:id="@+id/underbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" >

    <Button 
        android:text="@string/underbartekst"
        android:background="@drawable/silvertablesunderbar"
        android:id="@+id/underbarbutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp"
        android:textSize="20dp"
        android:gravity="left|center_vertical" >
    </Button>

</RelativeLayout>

So yeah, that was easier than I thought.

Upvotes: 2

Views: 1166

Answers (2)

Louis
Louis

Reputation: 177

I have found a solution! One that is completely relative to itself, and does not rely on pixels or density pixels at all.

I've placed a TextView of 0x0 in the middle of the screen, and put RelativeLayouts on top of and below it, filling the screen.

Then I placed two TextViews of 0x0 in the middle of those layouts, and within those layouts, two new RelativeLayouts. One below the highest TextView, one above the lowest. I placed my buttons in the center of those layouts.

It works like a charm, and does not rely on anything but the code itself.

This is my code now:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:background="@drawable/mainbg">


    <TextView 
        android:text=" "
        android:id="@+id/ankermidden"
        android:layout_centerVertical="true"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </TextView>

    <RelativeLayout
        android:id="@+id/ankerveldboven"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/ankermidden">

                <TextView 
                    android:text=" "
                    android:id="@+id/ankerboven"
                    android:layout_centerVertical="true"
                    android:layout_width="0dp"
                    android:layout_height="0dp">
                </TextView>

            <RelativeLayout
                android:id="@+id/ankerveldmidboven"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/ankerboven">

                 <Button 
                    android:text="@string/topbutton"
                    android:background="@drawable/silvertablesbuttonbgkort"
                    android:id="@+id/topbutton"
                    android:layout_alignParentRight="true"
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center|center_vertical">
                </Button>

            </RelativeLayout>

</RelativeLayout>


<RelativeLayout
        android:id="@+id/ankerveldonder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ankermidden">

    <TextView 
        android:text=" "
        android:id="@+id/ankeronder"
        android:layout_centerVertical="true"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </TextView>

            <RelativeLayout
                android:id="@+id/ankerveldmidonder"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@id/ankeronder">      

                <Button 
                    android:text="@string/midbutton"
                    android:background="@drawable/silvertablesbuttonbglang"
                    android:id="@+id/midbutton"
                    android:layout_alignParentRight="true" 
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center|center_vertical">
                </Button>

            </RelativeLayout>       

 </RelativeLayout>

<RelativeLayout 
    android:id="@+id/underbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" >

    <Button 
        android:text="@string/underbartekst"
        android:background="@drawable/silvertablesunderbar"
        android:id="@+id/underbarbutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp"
        android:textSize="20dp"
        android:gravity="left|center_vertical" >
    </Button>

</RelativeLayout>

So yeah, that was easier than I thought.

Bill Gary suggested using a margin in dp which would keep the same proportions on different screen sizes, but after a lot of experimenting, things end up looking weird for me on different screens again.

I'll do some more experimenting before I'll get back to that, because this whole dip-margins thing is weirding me out... Things that should be displayed properly are not, and things that just shouldn't, do, on some screen resolutions.

I'll start doing my homework on that stuff, but for now, albeit it being a bit long, the code I posted above works flawlessly for me.

Upvotes: 1

Bill Gary
Bill Gary

Reputation: 3005

try this, you may have to adjust the dp android:layout_marginTop="150dp"

<Button 
    android:text="@string/topbutton"
    android:background="@drawable/silvertablesbuttonbgkort"
    android:id="@+id/topbutton"
    android:layout_alignParentRight="true" 
    android:layout_marginTop="150dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center|center_vertical">
</Button>

Upvotes: 0

Related Questions