Develop Reference

Android create specifc Layout (only XML)

I am new to XML and wanted to create a simple start page of a game. First I startet with the Android Studio 3.0 Layout maker and came up to something like this(second image). The biggest problem is to get the 3 ImageButtons on the bottom right. After lots of trying and google I couldnt find the solution, is it eaven possible with just XML code?
In my case until now it looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="220dp"
android:layout_height="220dp"
android:layout_marginTop="30dp"
android:layout_marginBottom="30dp"
android:cropToPadding="false"
app:srcCompat="#drawable/logo" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/buttons_style1"
android:textColor="#color/colorPrimaryFont"
android:paddingBottom="12dp"
android:paddingTop="12dp"
android:text="#string/play"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:textColor="#color/colorPrimaryFont"
android:background="#drawable/buttons_style1"
android:paddingBottom="12dp"
android:paddingTop="12dp"
android:text="#string/rate"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="15dp"
android:layout_weight="0.33"
android:adjustViewBounds="false"
android:background="#drawable/button_style2"
android:cropToPadding="false"
android:scaleType="centerInside"
app:srcCompat="#drawable/settings" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="0.33"
android:scaleType="centerInside"
android:layout_margin="15dp"
android:background="#drawable/button_style2"
app:srcCompat="#drawable/highscores" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="0.33"
android:scaleType="centerInside"
android:layout_margin="15dp"
android:background="#drawable/button_style2"
app:srcCompat="#drawable/share" />
</LinearLayout>
</LinearLayout>
Is it possible to get this with XML?
Hopefully someone can help :D
EDIT tryied this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">
<View
android:id="#+id/bigCircle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="48dp"
android:background="#drawable/logo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"/>
but that looks like that:

Here's how I would do it:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/green">
<View
android:id="#+id/bigCircle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="48dp"
android:background="#drawable/circle"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"/>
<TextView
android:id="#+id/play"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:gravity="center"
android:textColor="#88ffffff"
android:textSize="24sp"
android:text="PLAY"
android:background="#color/green_dark"
app:layout_constraintTop_toBottomOf="#+id/bigCircle"
app:layout_constraintLeft_toLeftOf="#+id/bigCircle"
app:layout_constraintRight_toRightOf="#+id/bigCircle"/>
<TextView
android:id="#+id/rate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:gravity="center"
android:textColor="#88ffffff"
android:textSize="24sp"
android:text="RATE"
android:background="#color/green_dark"
app:layout_constraintTop_toBottomOf="#+id/play"
app:layout_constraintLeft_toLeftOf="#+id/bigCircle"
app:layout_constraintRight_toRightOf="#+id/bigCircle"/>
<ImageView
android:id="#+id/settings"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:scaleType="center"
android:background="#drawable/circle"
app:layout_constraintTop_toBottomOf="#+id/rate"
app:layout_constraintLeft_toLeftOf="#+id/rate"
app:layout_constraintRight_toLeftOf="#+id/space1"
app:layout_constraintDimensionRatio="1:1"
app:srcCompat="#drawable/ic_settings_white_24dp"/>
<android.support.v4.widget.Space
android:id="#+id/space1"
android:layout_width="6dp"
android:layout_height="0dp"
app:layout_constraintLeft_toRightOf="#+id/settings"
app:layout_constraintRight_toLeftOf="#+id/trophy"/>
<ImageView
android:id="#+id/trophy"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:scaleType="center"
android:background="#drawable/circle"
app:layout_constraintTop_toBottomOf="#+id/rate"
app:layout_constraintLeft_toRightOf="#+id/space1"
app:layout_constraintRight_toLeftOf="#+id/space2"
app:srcCompat="#drawable/ic_settings_white_24dp"
app:layout_constraintDimensionRatio="1:1"/>
<android.support.v4.widget.Space
android:id="#+id/space2"
android:layout_width="6dp"
android:layout_height="0dp"
app:layout_constraintLeft_toRightOf="#+id/trophy"
app:layout_constraintRight_toLeftOf="#+id/share"/>
<ImageView
android:id="#+id/share"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:scaleType="center"
android:background="#drawable/circle"
app:layout_constraintTop_toBottomOf="#+id/rate"
app:layout_constraintLeft_toRightOf="#+id/space2"
app:layout_constraintRight_toRightOf="#+id/rate"
app:srcCompat="#drawable/ic_settings_white_24dp"
app:layout_constraintDimensionRatio="1:1"/>
</android.support.constraint.ConstraintLayout>
And the circle background:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/green_dark"/>
</shape>
Obviously you'll have to replace the images and colors with your real images and colors, and you'll probably want to adjust the spacing, but this should get you started.
The important parts of the solution are:
For the top circle view, use a percentage width and an aspect ratio in order to make it a perfect circle that doesn't fill the whole screen
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
For the bottom row of images, use the center scaleType so that the image isn't stretched to fill the whole view
android:scaleType="center"
Note: the app:layout_constraintWidth_percent attribute requires that you use version 1.1.0 of the constraint-layout support library.

Add margin to main LinearLayout like below.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:orientation="vertical">
...
</LinearLayout>

Remove both inner linear layouts. Use constraints to connect elements, and margins for places where You want distance between elements and borders.
If You want an element to take all available space, except for some space on the sides, give it width of 0dp and connect with constraints to both sides.
For more info on the topic, read this
https://developer.android.com/training/constraint-layout/index.html
Like, for instance, add this to buttons:
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
Another example:
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"/>

Android : code not functioning as intended

Screenshot of Code
I'm trying to display information about a business.
However the phone number is being displyed in wrong place ( ie top right)
According to me, It should come right of call image.
What is wrong with code phonenumber_text_view
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.rafi.ansarenglishschool.MainActivity">
<ImageView
android:id="#+id/ansar_image_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/ansar"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/ansar_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ansar_image_view"
android:text="Ansar English School"
android:textSize="30sp"
android:background="#2962ff"
android:padding="20dp"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/call_image_view"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/call1"
android:layout_below="#id/ansar_text_view"
/>
<TextView
android:id="#+id/phonenumber_text_view"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_toRightOf="#id/call_image_view"
android:layout_alignParentRight="true"
android:text="123456789"
android:textSize="30sp"
android:padding="20dp"
android:textColor="#android:color/black" />*
<ImageView
android:id="#+id/location_image_view"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/location1"
android:layout_below="#id/call_image_view"
/>
<TextView
android:id="#+id/disc_text_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/location_image_view"
android:text="Ansar English is a private school run by Ansari Charitable trust located in Perumpilavu."
android:textSize="15sp"
android:padding="20dp"
android:textColor="#android:color/black" />

Just use the android:layout_below attribute to align it properly like following:
<TextView
android:id="#+id/phonenumber_text_view"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_toRightOf="#id/call_image_view"
android:layout_below="#id/ansar_text_view"
android:text="123456789"
android:textSize="30sp"
android:padding="20dp"
android:textColor="#android:color/black" />
PS: There is a * right after above TextView in your xml file

Support screen issue

I added support screen for different sizes for the devices but when i test it it seems that the buttons are a bit up,not like in the preview(I have the same phone as the preview).
Here's the layout for my phone specs:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
android:background="#drawable/backgroundapp"
android:orientation="vertical">
<ImageButton
android:id="#+id/btnSwitch"
android:layout_width="110dp"
android:layout_height="120dp"
android:src="#drawable/poweroffline"
android:background="#null"
android:contentDescription="#null"
android:layout_marginTop="64dp"
android:scaleType="fitXY"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:clickable="false" />
<ImageButton
android:id="#+id/FlashBlinkButton"
android:layout_width="75dp"
android:layout_height="100dp"
android:src="#drawable/blinkoffline"
android:background="#null"
android:contentDescription="#null"
android:scaleType="fitCenter"
android:layout_below="#+id/btnSwitch"
android:layout_alignLeft="#+id/AlarmButton"
android:layout_alignStart="#+id/AlarmButton"
android:layout_marginTop="12dp" />
<ImageButton
android:layout_width="75dp"
android:layout_height="60dp"
android:id="#+id/AlarmButton"
android:src="#drawable/alarmoffline"
android:background="#null"
android:contentDescription="#null"
android:scaleType="fitXY"
android:layout_marginTop="19dp"
android:layout_below="#+id/FlashBlinkButton"
android:layout_centerHorizontal="true" />
</RelativeLayout>
I also have another device where it's like the other one a bit up even when i put the configuration qualifiers .

You will never achieve a fool-proof layout with this techique. Try adding the background of the button (the embossed circles) to the ImageButtons instead, they will move together with the buttons and nothing will be off-center.

Fragments in Android Studio are stacked on top of each other in Virtual Machine

I have to turn my Unit Converter App into fragments and have it working. Everything compiles so I am able to run it in the virtual machine. The only problem is that all of the xml visuals are stacked on top of each other. I will provide code and a picture of what it looks like in my virtual machine. Please help me fix my issue so that they are not stacked on top of each other.
content_unit_converter.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.plamen.unitconverter.UnitConverterActivity"
tools:showIn="#layout/activity_unit_converter">
<fragment
android:id="#+id/unitconverterfragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterFragment"/>
<fragment
android:id="#+id/unitcoverterdisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterDisplay"/>
</RelativeLayout>
fragment_unit_converter.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.plamen.unitconverter.UnitConverterActivity"
tools:showIn="#layout/activity_unit_converter">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/TemperatureEditText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/radioGroup">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From Celsius to Farenheit"
android:id="#+id/toFarenheitRadioButton"
android:checked="true" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From Farenheit to Celsius"
android:id="#+id/toCelsiusRadioButton"
android:checked="false" />
</RadioGroup>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Convert"
android:id="#+id/convertButton"
android:layout_below="#+id/radioGroup"
android:layout_centerHorizontal="true"/>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner1"
android:spinnerMode="dropdown"
android:layout_below="#+id/LengthEditText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:layout_alignRight="#+id/LengthEditText"
android:layout_alignEnd="#+id/LengthEditText"
android:entries ="#array/length"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CONVERT"
android:id="#+id/convertLength"
android:layout_below="#+id/spinner1"
android:layout_centerHorizontal="true"/>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner2"
android:layout_below="#+id/AreaEditText"
android:layout_centerHorizontal="true"
android:entries ="#array/area"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Convert"
android:id="#+id/convertArea"
android:layout_below="#+id/spinner2"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
fragment_unit_converter_display.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.plamen.unitconverter.UnitConverterActivity"
tools:showIn="#layout/activity_unit_converter">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/TemperatureEditText"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:hint="Enter Temperature" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/LengthEditText"
android:hint="Enter Length"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/AreaEditText"
android:layout_below="#+id/convertLength"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:hint="Enter Area" />
</RelativeLayout>
This is what it looks like when I run it in the Virtual Machine
This is what it looks like after I tried android: layout_below
It is also duplicated which I do not know why.

In general, whenever you use relative layout you must specify where things go. In Linear layout adding a new thing places it below/next to the previous element (depending on your orientation), but in Relative layout this doesn't happen.
So you have this:
<fragment
android:id="#+id/unitconverterfragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterFragment"
/>
<fragment
android:id="#+id/unitcoverterdisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterDisplay"
/>
In here you're just displaying 2 fragments but without saying where which one goes first.
You could add this line, or a similar:
android:layout_below="#id/unitconverterfragment"
So now you'll have this:
<fragment
android:id="#+id/unitconverterfragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterFragment"
/>
<fragment
android:id="#+id/unitcoverterdisplay"
android:layout_below="#id/unitconverterfragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterDisplay"
/>
You can place it below, to the right, left, on top, etc...

Android UI using XML (Android and Xml)

I am tying to create a UI like the image below.
This is how it SHOULD look like: (Screen shot from my app using Nexsus 5):
And this is how it look like on a Nexsus S device (4 inch):
Someone have an idea why the diffrences happen? This is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2e2e2e"
tools:context=".MainActivity"
android:id="#+id/viewew">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="9"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginBottom="0dp"
android:layout_weight="8"
android:gravity="center_vertical"
>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/www"
android:paddingLeft="10dp"
android:paddingRight="10dp"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/www"
android:paddingLeft="10dp"
android:paddingRight="10dp"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/www"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
</LinearLayout>
<View
android:id="#+id/idd"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_alignParentBottom="true"
android:layout_weight="2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_centerHorizontal="true"
android:text="Doesn't belong here?"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
<include layout="#layout/buttons" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_centerHorizontal="true"
android:text=" here?"
android:paddingBottom="15dp"
android:layout_alignParentBottom="true"
android:textColor="#f7f7f7"
android:id="#+id/tDoesntBelongHere"
/>
<com.lorentzos.flingswipe.SwipeFlingAdapterView
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rotation_degrees="15.5"
android:layout_above="#+id/eee"
tools:context=".MyActivity" />
</RelativeLayout>

On android studio you have to set the screen size for different devices.
your buttons have this:
android:layout_width="90dp"
android:layout_height="90dp"
So whichever screen you are using the size will always be 90dp.
In android studio you can create more xml pages for same page: one for portrait, for landscape, ecc ecc and also one for small-big-xxl ecc screen.
Have a look at this link from android developer site.
Hope it help :)
EDIT:
At the moment i don't have Android studio in the pc i'm working on, so i try to explain a possible solution.
Instead of setting height and width, set margins:
You can anchor all from botside, adding in your TextView android:layout_alignParentBottom="true" (and a margin-bottom if you want). Then keep your view with a static height of 400dp like now, then anchor it to the top of the TextView by android:layout_above="#id/TextViewId (it doesn't have id, add it)
Now you have to do the same with your LinearLayout: use android:layout_above="#id/idd and removing the the static size. At this point you can just let your buttons to set height equals to the LinearLayout's height (obiouvsly you can set margin top-bot in buttons).
Sorry if my english is not that good, i hope u got the solution