Search code examples
androidxmlslidingdrawerdrawerlayout

How to change text color of a custom view list item for menu drawer when selected - DrawerLayout


I am a new android developer. In my app I have a drawer using DrawerLayout of android:

<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">

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

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="@drawable/menu"/>
</android.support.v4.widget.DrawerLayout>

and this is my custom layout for list items:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:id="@+id/itemLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:orientation="vertical"
        android:layout_marginTop="0dp"
        android:background="?android:attr/activatedBackgroundIndicator">

        <LinearLayout

            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/drawer_icon"
                android:layout_width="45dp"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_marginTop="4dp"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="12dp"
                android:layout_marginRight="12dp"
                android:layout_centerVertical="true"
                android:padding="4dp"/>

            <TextView
                android:id="@+id/drawer_itemName"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:minHeight="40dp"
                android:textAppearance="@android:style/TextAppearance.Medium"
                android:gravity="center_vertical"
                android:paddingRight="40dp"
                android:textColor="@android:color/white"/>

            <TextView
                android:id="@+id/drawer_itemExtra"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#ffef5c6f"
                android:layout_gravity="center"
                android:background="@drawable/menu_counter"
                android:layout_marginLeft="20dp"/>
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginBottom="1dp"
            android:layout_marginTop="1dp"
            android:layout_marginLeft="70dp"
            android:background="@android:color/white"
            android:alpha="0.4"
            ></View>

    </LinearLayout>

</RelativeLayout>

Now I want to change color of first TextView when selected and get rid of current selected background color which I know comes from this:

android:background="?android:attr/activatedBackgroundIndicator"

Anyone can help please?


Solution

  • <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#FFFFFF" /> <!-- pressed -->
    <item android:state_focused="true" android:color="#ef5c6f" /> <!-- focused -->
    <item android:state_activated="true" android:color="#FFFFFF" /> <!-- activated -->
    <item android:color="#ef5c6f" /> <!-- default -->
    </selector>