Search code examples
androidabsolutelayout

Android Absolute Layout with different screen size

I'm using Absolute Layout to divide the screen to 4 species with circle in the center like this enter image description here

It is work fine with small screen size but with large screen it doesn't. How to do this with different screen width?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<AbsoluteLayout
    android:id="@+id/AbsoluteLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:l="true"
    android:layout_centerInParent="true"
    android:background="#fcf2cf"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.organizer2.MainActivity" >

    <Button
        android:id="@+id/Button1"
        android:layout_width="148dp"
        android:layout_height="180dp"
        android:layout_weight="1"
        android:layout_x="0dp"
        android:layout_y="0dp"
        android:background="#219baa"
        android:text="Button" />

    <Button
        android:id="@+id/Button2"
        android:layout_width="148dp"
        android:layout_height="180dp"
        android:layout_weight="1"
        android:layout_x="148dp"
        android:layout_y="0dp"
        android:background="#ef820b"
        android:text="Button" />

    <Button
        android:id="@+id/Button3"
        android:layout_width="148dp"
        android:layout_height="180dp"
        android:layout_weight="1"
        android:layout_x="0dp"
        android:layout_y="180dp"
        android:background="#e3c800"
        android:text="Button" />

    <Button
        android:id="@+id/Button4"
        android:layout_width="148dp"
        android:layout_height="180dp"
        android:layout_weight="1"
        android:layout_x="148dp"
        android:layout_y="180dp"
        android:background="#36bc89"
        android:text="Button" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_x="4dp"
        android:layout_y="132dp"
        android:src="@drawable/circle" />

   </AbsoluteLayout>

</RelativeLayout>
Solution

  • AbsolueLayouts are a big no-no since they don't do anything with devices of different sizes. Try and achieve this view with using a combination of LinearLayouts. By setting all the buttons to be inside of linearlayout and giving each button a weight of 1, we are telling them all to grow, which would not happen inside of an absolute layout. The linearlayouts themselves are also in a linearlayout and also have been given weights so they will grow as there is extra screen space to occupy (nested LinearLayouts are not great for performance but don't worry about that as of now, since you still seem to be learning the basics and users of your app will not notice any delay). :

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/linear"
android:layout_width="match_parent"
android:background="#fcf2cf"
android:layout_height="match_parent"
android:orientation="vertical" >

    <LinearLayout 
    android:id="@+id/linear"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical" >

           <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           xmlns:tools="http://schemas.android.com/tools"
           android:id="@+id/linear"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_weight=1
           android:orientation="hoizontal" >

                 <Button
                 android:id="@+id/Button1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
                 android:background="#219baa"
                 android:text="Button" />

                 <Button
                 android:id="@+id/Button2"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
                 android:background="#ef820b"
                 android:text="Button" />

           </LinearLayout>

           <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           xmlns:tools="http://schemas.android.com/tools"
           android:id="@+id/linear"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_weight=1
           android:orientation="hoizontal" >

                <Button
                android:id="@+id/Button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#e3c800"
                android:text="Button" />

                <Button
                android:id="@+id/Button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#36bc89"
                android:text="Button" />

          </LinearLayout>
</LinearLayout>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:src="@drawable/circle" />

   </AbsoluteLayout>

</RelativeLayout>