CODEWITHSUNDEEP
androidnavigation-drawermaterial-design
User3
User3

Reputation: 2535

Background Image Size for Navigation Drawer (Profile Part - First row)

I am trying to style the Navigation drawer as per Official Material Design guidelines. Everything is defined here albeit the background image size for the first row - the profile part. What I have is:

enter image description here

But as you can see the image seems stretched. I am setting it as follows: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/mat2" >
    <com.blackB.RoundedImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="16dp"
        android:background="@drawable/icon_default"
        android:contentDescription="@string/imageviewContactus"
        android:scaleType="centerCrop"
        app:riv_border_color="#BDBDBD"
        app:riv_border_width="0dip"
        app:riv_corner_radius="38dip"
        app:riv_mutate_background="true"
        app:riv_oval="true" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="72dp" 
        android:gravity="left|center">

        <TextView
            android:id="@+id/counter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/title"
            android:layout_below="@+id/title"
            android:text="Profile completion"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mr.Right"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />
    </RelativeLayout>

</RelativeLayout>

I also tried using an Imageview as a background, it still stretches. As of now my image specs are 800x600px which is same as the image used by google in iosched and is saved inside drawable-nodpi, just like Google has done.

Do I miss anything here? Please suggest. Thanks :)

Upvotes: 2

Views: 2832

Answers (1)

Angad Singh
Angad Singh

Reputation: 1061

mdpi-
    width=384 pixels
    height=216 pixels
hdpi-
    width=576 pixels
    height=324 pixels
xhdpi-
    width=768 pixels
    height=432 pixels
xxhdpi-
    width=1152 pixels
    height=648 pixels

Image source= Google's Newsstand Application, Tool=Adobe photoshop 7.0

Upvotes: 5

Related Questions