CODEWITHSUNDEEP
android
Kar
Kar

Reputation: 6365

Aligning icon with ActionBar's Home button

I have a row that contains an icon on the left and a EditText field on the right. I'd like the icon to be aligned with the ActionBar's Home arrow/icon and the text field to be aligned with the ActionBar's title.

Preferably, the size of the icon matches the icon as well.

Does anyone know how this should be done?

Here's what my layout looks like now

enter image description here

If I give it a height of 56dp and a padding of 16dp, I get the following

enter image description here

EDIT Here's the XML for the icon-text row

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:layout_width="56dp"
               android:layout_height="56dp"
               android:padding="16dp"
               android:id="@+id/icon"/>

    <EditText android:layout_width="200dp"
              android:layout_height="wrap_content"
              android:singleLine="true"
              android:id="@+id/text"/>

</merge>

Upvotes: 1

Views: 656

Answers (1)

Pratik Butani
Pratik Butani

Reputation: 62419

You can visit Google Design Specification where you can get icon size and Left margin of Title.

You can use following margin for EditText and ImageView

Here following image will more understandable:

enter image description here

  • App bar height: 56dp

  • App bar left and right padding: 16dp

  • App bar icon top, bottom, left padding: 16dp

  • App bar title left padding: 72dp

  • App bar title bottom padding: 20dp

enter image description here

  • Action area height: 56dp
  • Title area height: 80dp
  • Title area bottom padding: 8dp
  • Description area height: 72dp
  • Description area bottom padding: 16dp

Thank you. May it will helps you.

Upvotes: 3

Related Questions