How do I customize the navigation drawer in Android Studios?

问题

How do I customize the navigation drawer to look like this:

I cant find any tutorials to customize the navigation drawer. Can anyone please help?

回答1:

You can use MaterialDrawer library that has a very nice API and set a custom view you want for the drawer like this:

        drawer = new DrawerBuilder()
            .withActivity(this)
            .withCustomView(myView)
            .build();

回答2:

This is the layout (activity layout) :

<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:focusable="true"
android:focusableInTouchMode="true"
android:background="#e7e7e7"
android:id="@+id/mainLayout"
tools:context=".MainActivity">


<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <ListView
        android:id="@+id/navList"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="#315d82"
        android:clickable="true"
        android:divider="@null"
        android:dividerHeight="20sp" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

Now the listview should have a custom adapter :

public class DrawerAdapter extends BaseAdapter {
public List<MenuItem> items;
Context c;
TextView title;
ImageView icon;

public DrawerAdapter(Context c, List<MenuItem> items) {
    this.c = c;
    this.items = items;
}

@Override
public int getCount() {
    return items.size();
}

@Override
public Object getItem(int position) {
    return items.get(position);
}

@Override
public long getItemId(int position) {
    return position;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        LayoutInflater mInflater = (LayoutInflater)
                c.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        convertView = mInflater.inflate(R.layout.menu_item, null);
    }
    title = (TextView) convertView.findViewById(R.id.title);
    icon = (ImageView) convertView.findViewById(R.id.icon);
    title.setText(items.get(position).title);
    title.setTypeface(tf);
    icon.setImageResource(items.get(position).image);
    return convertView;
}
}

Now this is the xml for the custom adapter:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal">

<ImageView
    android:id="@+id/icon"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_gravity="center"
    android:layout_marginLeft="10dp"
    android:src="@drawable/pin_icon" />

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginLeft="20dp"
    android:gravity="center"
    android:text="Hello"
    android:textColor="#ffffff"
    android:textSize="20sp" />

Now you class has to extend AppCompatActivity :

In your activity class : (This should be done after you initialize items and add some variables to it)

 list.setAdapter(new DrawerAdapter(getApplicationContext(), items));

Now items is a list variable :

List<String< titles;
List<Integer> images;
List<Items> items;

You initialize it like this :

items= new ArrayList<>();
images= new ArrayList<>();
titles= new ArrayList<>();
titles.add("home");
images.add(R.drawable.icon);

Then you add items to it:

for (int i = 0; i < titles.size(); i++) {
            MenuItem item = new MenuItem();
            item.image = images.get(i);
            item.title = titles.get(i);
            items.add(item);
        }

Class Items is the follows:

public class MenuItem {
public String title;
public int image;
}

Let me know if you need any more help. I am more than ready to assist.

回答3:

First add this code to your res/values/strings.xml

<string-array name="titles">
        <item>Home</item>
        <item>Featured</item>
        <item>Products Search</item>
        <item>Barcode Scanner</item>
        <item>Sales</item>
        <item>Weekly Specials</item>
        <item>My Shopping List</item>
        <item>Recipes</item>
        <item>Shopping Cart</item>
        <item>Order History</item>
    </string-array>

    <array name="icons">
        <item>@drawable/image 1</item>
        <item>@drawable/image 2</item>
        <item>@drawable/image 3</item>
        <item>@drawable/image 4</item>
        <item>@drawable/image 5</item>
        <item>@drawable/image 6</item>
        <item>@drawable/image 7</item>
        <item>@drawable/image 8</item>
        <item>@drawable/image 9</item>
        <item>@drawable/image 10</item>
    </array>

Then Design your NavigationDrawer.xml like this.

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
<ListView
            android:id="@+id/slider_list"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:layout_below="@+id/textPlacesNearBy"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:layout_weight="1" />
</android.support.v4.widget.DrawerLayout>

Then design your list_item.xml like this.

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:padding="5dp" >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="12dp"
            />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@id/icon"
            android:gravity="center_vertical"
            android:textColor="#ffffff"
            android:textSize="20sp" />

</RelativeLayout>

This is only the design. Tell me if you need any coding help. :)

来源：https://stackoverflow.com/questions/32100708/how-do-i-customize-the-navigation-drawer-in-android-studios

标签

android

android-studio

navigation-drawer