Search code examples
androidvectorimageviewalignment

Aligning vector image inside LinearLayout


I created a navigation bar using LinearLayout like below.

enter image description here

The xml code.

    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/green"
    android:textColor="@android:color/white">

    <ImageView
        android:id="@+id/previous_button"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:padding="10sp"
        app:srcCompat="@drawable/ic_play_arrow_black_24dp"
        android:rotation="180"
        android:scaleType="fitCenter"/>

    <Button
        android:id="@+id/list_button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_toRightOf="@+id/previous_button"
        android:layout_toLeftOf="@+id/next_button"
        android:text=""
        android:background="@color/green"
        android:textColor="@android:color/white"/>

    <ImageView
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:padding="10sp"
        app:srcCompat="@drawable/ic_play_arrow_black_24dp"
        android:scaleType="fitCenter"/>

</LinearLayout>

The Back and Next Arrow (ic_play_arrow_black_24dp) is from Android stuido's vectors.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="45dp"
    android:height="45dp"
    android:viewportWidth="20.0"
    android:viewportHeight="20.0">
<path
    android:fillColor="@android:color/white"
    android:pathData="M8,5v14l11,-7z"/>
</vector>

As you can see, my problem is both the back and next arrow are not aligning them selves vertically. I tried a lot of methods like layout_gravity:center ... but no thing worked.

Any help would be greatly appreciated!


Solution

  • Found the problem, It was because when I created the vector image using Android Studio (File -> new vector image), I entered the width and height as 24x24, but after that I changed to width and height to 45x45. To solve the problem, I simply create the vector again with 45x45 size.

    <vector android:height="45dp" android:viewportHeight="24.0"
        android:viewportWidth="24.0" android:width="45dp" xmlns:android="http://schemas.android.com/apk/res/android">
        <path android:fillColor="@android:color/white" android:pathData="M8,5v14l11,-7z"/>
    </vector>
    

    enter image description here