Material design - left margins for action bar title and content don't match

Question

I'm trying to set screen margins following the guidelines for Layout - Metrics and keylines. Specifically, list content on mobile screens should have a margin of 72 dp and align with the title as shown in the guide:

As Android Studio automatically generates margin values in the res/dimens.xml, I thought that I'd get my content to align with the title by adding my own 'inner' margin:

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <!-- 16 + 56 = 72 = "Content left margin from screen edge" -->
    <dimen name="content_horizontal_margin">56dp</dimen>
</resources>

myactivity.xml

<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">

    <TextView
        android:id="@+id/tvEditPlaylistInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="@dimen/content_horizontal_margin"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="test" />

    <ImageButton
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:src="@drawable/action_current"
        android:layout_alignBottom="@id/tvEditPlaylistInfo"
        android:layout_toRightOf="@id/tvEditPlaylistInfo"
        android:layout_marginLeft="16dp"/>

    <ListView
        android:id="@+id/lvAudioFiles"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/content_horizontal_margin"
        android:layout_below="@id/tvEditPlaylistInfo">
    </ListView>

</RelativeLayout>

But somehow my content is "off" by about 8dp (emulator, Lollipop 22).

I'm using a custom theme with parent Theme.AppCompat.Light.DarkActionBar but I only changed colors so I think that is not the source of my problem.

What am I missing?

score 6 · Accepted Answer · edited May 23 '17 at 12:22

6

Remove this from your TextView and ListView:

android:layout_marginLeft="@dimen/content_horizontal_margin"

Your parent tag already specifies what the padding should be:

<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">

The reason why it is off is because you are padding, and then setting a margin.

Also, just for interest, here is The difference between Padding and Margin.

UPDATE

As per the discussion with @0X0nosugar, we've come to a point where the following code assists with achieving your objective:

In order to alter the ActionBar, the following should be added to your onCreate():

ActionBar actionBar = getSupportActionBar(); 

if (actionBar != null) 
{ 
    View customView = getLayoutInflater().inflate(R.layout.custom_action_bar, null); 
    actionBar.setDisplayShowTitleEnabled(false); 
    actionBar.setDisplayShowCustomEnabled(true); 
    actionBar.setCustomView(customView); 
}

Create a custom view for the toolbar

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:background="@color/accent_deeporangeA400" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="MyMusicApp" 
    android:id="@+id/ab_title" 
    android:layout_centerVertical="true" 
    android:layout_alignParentLeft="true" 
    android:layout_marginLeft="@dimen/activity_horizontal_margin" 
    android:textAppearance="?android:attr/textAppearanceLarge"/> 

</RelativeLayout>

This should help you achieve your objective! Good researching on your part!

edited May 23 '17 at 12:22

Community

1
1

answered Jan 05 '16 at 11:02

TejjD

2,571
1
17
37

Thanks for answering. But if I set the padding of the ViewGroup to zero and the margin for the Views to 72 then the **effect is exactly the same as before**, so my problem remains unsolved. Padding of the surrounding "container" and margin of the content seem to be just added, but the title seems to follow different layout rules. Or is there some kind of default hidden padding of the root container? – Bö macht Blau Jan 05 '16 at 11:10
Let me understand the question correctly, you wish for all of your elements to be aligned on the red line in your image, or aligned at the same distance **away** from the line? – TejjD Jan 05 '16 at 11:12
I need all the elements to be aligned on the red line (=beginning of title in action bar) – Bö macht Blau Jan 05 '16 at 11:14
You do not need to change any values, just remove the lines that I have stated. You are setting the padding of the parent container, and then placing a margin on the elements within it, so naturally those elements are going to move away. – TejjD Jan 05 '16 at 11:17
yes, but initially I moved them by 56 dp. So they were moved by 16dp + 56dp = 72 dp. And so they *should* align with the title, but they don't. - I just set the padding to 72dp and left out the margin as you suggested. Same result, looks exactly like my screenshot :( – Bö macht Blau Jan 05 '16 at 11:26
If that is the case, then remove the padding right and left from your relative layout, whilst leaving out padding from the elements within the parent as well. See what happens. Then place padding on the elements inside the parent **only** – TejjD Jan 05 '16 at 11:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99809/discussion-between-0x0nosugar-and-tejjd). – Bö macht Blau Jan 05 '16 at 11:32
please take a look at the chat :) – Bö macht Blau Jan 05 '16 at 16:16

Material design - left margins for action bar title and content don't match

1 Answers1

Linked