Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

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).

enter image description here

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?

like image 732
Bö macht Blau Avatar asked Jan 05 '16 10:01

Bö macht Blau


People also ask

How do I set the content description of the materialtoolbar?

For an overall content description of the top app bar, set an android:contentDescription or use the setContentDescription method on the MaterialToolbar. For the navigation icon, this can be achieved via the app:navigationContentDescription attribute or setNavigationContentDescription method.

How to replace Actionbar in Android app with material design support?

And Google provides some built-in widgets in it’s design support library to follow this pattern. android.support.v7.widget.Toolbar is just one commonly used widget in that library, it behaves like ActionBar, and google suggests you use Toolbar to replace ActionBar in your android app. 1. Add Material Design Support Library.

How does the toolbar work with multiple sheets of material?

The toolbar maintains its seam until it moves off of the screen. Finally, the second sheet can cover the toolbar as it moves. The second sheet covers the toolbar as it moves. A toolbar’s left and right actions are never split by another sheet of material, with the exception of temporary materials such as menus or dialogs.

How do I use the materialtoolbar for activity callbacks?

The MaterialToolbar can be set as the support action bar and thus receive various Activity callbacks, as shown in this guide. The following example shows the top app bar positioned at the same elevation as content. Upon scroll, it increases elevation and lets content scroll behind it. ... ... ...


1 Answers

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!

like image 147
TejjD Avatar answered Apr 01 '23 03:04

TejjD