Reputation: 133

wrong positioning in android layout

I can't get right positioning in frame layout and I have no idea why is it so. I need to stick exit_layout(LinearLayout in the end of code snippet) to the upper left corner of the screen.

The XML:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/exit_layout"
        android:gravity="top|left">
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/exit_button_mode"
            android:layout_marginTop="5dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/ic_exit_icon"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tv_beck_to_main"
            android:textStyle="bold"
            android:layout_marginLeft="6dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/modes"
        android:gravity="center_vertical|center_horizontal"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tv_choose_mode"
            android:textSize="30sp"
            android:layout_marginLeft="10dp"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                >
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/button_beginner_mode"
                    android:background="@drawable/beginner_button"/>
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/button_advanced_mode"
                    android:background="@drawable/advanced_button"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tv_mode_beginner"
                    android:textStyle="bold"
                    android:layout_marginLeft="17dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tv_mode_advanced"
                    android:textStyle="bold"
                    android:layout_marginLeft="31dp"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/button_expert_mode"
                    android:background="@drawable/expert_button"/>
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/button_custom_mode"
                    android:background="@drawable/custom_button"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tv_mode_expert"
                    android:textStyle="bold"
                    android:layout_marginLeft="24dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tv_mode_custom"
                    android:textStyle="bold"
                    android:layout_marginLeft="48dp"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Screenshot of the screen:

Upvotes: 1

Answers (3)

Syed Arsalan Kazmi

Reputation: 1285

You XML works absolutely fine as it displays your exit_layout at the top left corner of the screen. I think the problem lies in your assets. Look for them or any sort of margins that might be causing your XML to display such view

Upvotes: 0

Rahul Tiwari

Reputation: 6978

Change height and width of your first linear layout to match parent:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    android:id="@+id/modes">

You may need to adjust margins for other views inside this layout to place them at desired location.

Also, frame layout doesn't seem necessary here, you can achieve desired result just by using linear layouts.

Update

As layout in question is changed modify it like this:

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

    <LinearLayout
        android:id="@+id/exit_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="top|left"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/exit_button_mode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:background="@drawable/Capture" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:text="Main Menu"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/modes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Choose Game Mode"
            android:textSize="30sp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#aaaaaa"
            android:gravity="center"
            android:orientation="vertical">

            <!--remove bg color from linear layout-->
            <!--add your buttons in place of textview-->
            <TextView
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:gravity="center"
                android:text="Add your remaining layout here"
                android:textSize="30sp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

result :

Upvotes: 2

Daniel Zolnai

Reputation: 16920

Make sure the image is not having a huge space on the top. Also try adding this line to your ImageButton:

android:adjustViewBounds="true"

If it still fails try using an ImageView instead of an ImageButton:

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/exit_button_mode"
        android:layout_marginTop="5dp"
        android:layout_marginRight="5dp"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_exit_icon"/>

Upvotes: 0

wrong positioning in android layout

Answers (3)

Related Questions