Layout clipping / ignoring padding on xhdpi/xxhdpi

Question

For my apps main menu I have a CircleLayout inside a RelativeLayout. It is displayed as I wish on all devices except ones with xhdpi or xxhdpi screens, where the padding / margin (tried both) is displayed, but the CircleLayout is bigger than its parent and cropped. Any idea what the high dpi devices are doing differently? Thanks in advance ! :)

What it should look like, working on a Nexus S on the left, result on a Nexus 5 on the right: here

activity_main.xml:

<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="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
tools:context=".MainActivity" >



<com.ericzim.dbtbuddy.Layout.CircleLayout
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"

    >

    <include
        android:id="@+id/buttonMe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round"
        />

    <include
        android:id="@+id/buttonSleep"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />

    <include
        android:id="@+id/buttonStress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />

    <include
        android:id="@+id/buttonAnger"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />

    <include
        android:id="@+id/buttonFear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />

    <include
        android:id="@+id/buttonMemories"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />

    <include
        android:id="@+id/buttonSkills"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />

    <include
        android:id="@+id/buttonResources"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />
</com.ericzim.dbtbuddy.Layout.CircleLayout>

<com.ericzim.dbtbuddy.Layout.CircleLayout
    android:id="@+id/menuMe"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerInParent="true"
    android:visibility="invisible"
    app:angleRange="-180" >

    <include
        android:id="@+id/buttonSelfWorth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />

    <include
        android:id="@+id/buttonSecurity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />

    <include
        android:id="@+id/buttonHelpfulImages"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />

    <include
        android:id="@+id/buttonMindfulness"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />
</com.ericzim.dbtbuddy.Layout.CircleLayout>

<RelativeLayout
    android:id="@+id/MenuButtonBack"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:paddingLeft="15dp"
    android:visibility="invisible" >

    <include
        android:id="@+id/buttonBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/button_round" />
</RelativeLayout>

<include
    android:id="@+id/buttonEmergency"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    layout="@layout/button_round" />



</RelativeLayout>

with activity_horizontal_margin set to 20dp.

The includes are RelativeLayouts looking like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_height="wrap_content" 
  android:layout_width="wrap_content">
<ImageView  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true" 
    android:layout_centerHorizontal="true"
    android:id="@+id/test_button_image"
    android:paddingLeft="1dp"
    android:paddingRight="1dp">
 </ImageView>

<TextView
    android:id="@+id/test_button_text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/test_button_image"
    android:gravity="center"
    android:textAlignment="center"
    android:text=""
    >
</TextView>

</RelativeLayout>

Answer 1

you should look closely at dp. dp (also known as dip) is a Density-independent pixels. this means essentially that it will display different on different resolution screens. you can create layouts just like you do drawable to be for specific densities, naming them the same and distributing them in different density layout folders.. by default android will choose the layout with the closest matching resolution..