Search code examples
androidandroid-layoutandroid-linearlayoutandroid-relativelayout

Design the layout to place the button in ellipse Android


I have a design to place the buttons in a shape of similar to quarter part of ellipse. I tried with Linear layout and relative layout. Not fixed with both. How should I fix this for multiple screens(Tablet with Landscape). Code of that layout added below..

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/mainscreen_bg"
android:layout_gravity="center_horizontal">

<!--LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="horizontal" >

<Button
    android:id="@+id/button1"
    android:layout_width="75dp"
    android:layout_height="wrap_content"
    android:text="LogIn/SignUp" /-->

<Button
    android:id="@+id/rate"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginRight="20dp"
    android:layout_alignParentBottom="true"
    android:background="@drawable/rate" />

<Button
    android:id="@+id/vehicle"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginRight="20dp"
    android:layout_toRightOf="@id/rate"
    android:layout_above="@id/rate"
    android:background="@drawable/vehicle" />

<Button
    android:id="@+id/hotel"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginRight="20dp"
    android:layout_toRightOf="@id/vehicle"
    android:layout_above="@id/vehicle"
    android:background="@drawable/hotel" />

<Button
    android:id="@+id/user"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginRight="20dp"
    android:layout_toRightOf="@id/hotel"
    android:layout_above="@id/hotel"
    android:background="@drawable/newcustomer" />

<Button
    android:id="@+id/return_vehicle"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginRight="20dp"
    android:layout_toRightOf="@id/user"
    android:layout_above="@id/user"
    android:background="@drawable/return1" />

<Button
    android:id="@+id/sync"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginRight="20dp"
    android:layout_toRightOf="@id/return_vehicle"
    android:layout_above="@id/return_vehicle"
    android:background="@drawable/sync" />

<Button
    android:id="@+id/report"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_toRightOf="@id/sync"
    android:layout_above="@id/sync"
    android:background="@drawable/report" />

<Button
    android:id="@+id/settings"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:background="@drawable/password_reset" />
<!-- /LinearLayout-->

</RelativeLayout>

enter image description here


Solution

  • Android is smart enough to distinguish between two same layout files of different screen size. To define layout for different screen size,goto Layout>Available qualifiers>size and press >> arrow and choose your required screen size.Inside the choosen layout, modify the views dimension according to the requirement. Note: Layout file name for small screen and large screen must be same. And Android will choose the required file at runtime

    If your looking for brief explanation, read this.