Change color of NavigationDrawer click color

Question

I would like to know how to change the list item click color of the NavigationDrawer as shown by the arrow in the image from blue to for instance red. enter image description here

My second question is that I would like to add a logo (image), where upon click would direct user to the MainActivity activity at the actionbar (top bar), and below is the activity code that calls the ActionBarActivity.

public class MainActivity extends  ActionBarActivity {

    private String[] mOptionMenu;
    private DrawerLayout mDrawerLayout;
    private RelativeLayout mDrawerRelativeLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;

    private CharSequence mTitleSection;
    private CharSequence mTitleApp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);



        mOptionMenu = new String[] { "Opción 1", "Opción 2", "Opción 3" };
         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
         mDrawerRelativeLayout = (RelativeLayout)
         findViewById(R.id.left_drawer);
         mDrawerList = (ListView) findViewById(R.id.list_view_drawer);
         mDrawerList.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
         mOptionMenu));

         mDrawerList.setOnItemClickListener(new OnItemClickListener() {
         @Override
         public void onItemClick(AdapterView<?> parent, View view,
         int position, long id) {

         Fragment fragment = null;

         switch (position) {
         case 0:
         fragment = new FirstFragment();
         break;
         case 1:
         fragment = new SecondFragment();
         break;
         case 2:
         fragment = new ThirdFragment();
         break;
         }

         FragmentManager fragmentManager = getSupportFragmentManager();

         fragmentManager.beginTransaction()
         .replace(R.id.content_frame, fragment).commit();

         mDrawerList.setItemChecked(position, true);

         mTitleSection = mOptionMenu[position];
         getSupportActionBar().setTitle(mTitleSection);

         mDrawerLayout.closeDrawer(mDrawerRelativeLayout);
         }
         });
         mDrawerList.setItemChecked(0, true);
         mTitleSection = getTitle();
         mTitleApp = getTitle();

         mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
         R.drawable.ic_drawer, R.string.drawer_open,
         R.string.drawer_close) {

         public void onDrawerClosed(View view) {
             getSupportActionBar().setTitle(mTitleSection);
         ActivityCompat.invalidateOptionsMenu(MainActivity.this);
         }

         public void onDrawerOpened(View drawerView) {
             getSupportActionBar().setTitle(mTitleSection);
         ActivityCompat.invalidateOptionsMenu(MainActivity.this);
         }
         };

         mDrawerLayout.setDrawerListener(mDrawerToggle);

         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
         getSupportActionBar().setHomeButtonEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.main_activity_actions, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }

        switch (item.getItemId()) {
        case R.id.action_settings:
            Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();
            ;
            break;
        default:
            return super.onOptionsItemSelected(item);
        }

        return true;
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }
}

Thanks in advance.

Using Drawable XML you can do this – Amy Nov 05 '14 at 06:50 — Amy, Nov 05 '14 at 06:50
Navigation Drawer != List View inside Navigation Drawer – krossovochkin Nov 05 '14 at 06:54 — krossovochkin, Nov 05 '14 at 06:54

score 1 · Answer 1 · answered Nov 05 '14 at 07:50

You can use selector to change color of pressed states in your mDrawerList. First of all, create a red color solid drawable shape(say redbg) like this in your res/drawable/redbg.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="@android:color/holo_red_dark"/>
</shape>

then create a selector say(listviewbg) in res/drawable/listviewbg.xml like this

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/redbg"/>
</selector>

and apply this bg to your mDrawerList in xml

<ListView
android:id="@+id/mDrawerList "
android:layout_width="match_parent"
android:layout_height="match_parent"
android:listSelector="@drawable/listviewbg"
/>

and sorry didn't get your second question :(. plz explain a bit — Mukesh Rana, Nov 05 '14 at 07:50

score 1 · Accepted Answer · answered Nov 05 '14 at 09:22

On Your first question for Background indicator. it works above API level 11.

navigation_list_background.xml Add your desired colors

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_activated="true" android:drawable="@color/green" />
    <item android:state_selected="true" android:drawable="@color/green" />
    <item android:state_pressed="true" android:drawable="@color/light_blue" />
    <item android:state_focused="true" android:drawable="@color/light_blue" />
    <item android:drawable="@color/blue" />

</selector>

Add to your base style :

  <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:activatedBackgroundIndicator">@drawable/navigation_list_background</item>

    </style>

Add the background to your layout ( which is your item you display in the drawer)

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="?android:attr/activatedBackgroundIndicator"
        android:orientation="horizontal" >


        <TextView
            android:id="@+id/title"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="8"
            android:text="Option 1" />


    </LinearLayout>

Hope this works.!!

And to your second question. You can use custom action bar.

customactionbar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/header_drawer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/drawermenu" />

        <TextView
            android:id="@+id/header_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:text="TEST"
            android:textStyle="bold" />
      <ImageView
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/button" />
    </LinearLayout>

    <View
        android:id="@+id/actionbarseperator"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="@color/blue" />

</LinearLayout>

Yourlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include layout="@layout/actionbar" />


    <--Your Layout-->
</LinearLayout>

Add this in your Java before setcontent

this.requestWindowFeature(Window.FEATURE_NO_TITLE);

Add for onclick on the button.

   Button button=(Button)findViewById(R.id.button);
    button.setOnClickListener(this);

    public void onClick(View v) {
    // TODO Auto-generated method stub
    switch(v.getId())
    {
    case R.id.button:
    ActivityYouwantToOpen.onOpen(v);
        break;
        }
        }

Its a long post :P

Change color of NavigationDrawer click color

2 Answers2