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?
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.
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.
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.
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. ... ... ...
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With