Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change change text and arrow color on Toolbar?

I am currently building an app using the new material design guidelines. I am using a Toolbar rather than an action bar.

I want the text, overflow icon, and the arrow/hamburger icon (thing that flips over when you pull out the navigation draw) to be white rather than black, but the rest of my theme needs to be the AppCompat.light theme.

If someone could please explain how i would go about changing these things, i would be very greatful.

I also need to change the colors both in xml and via java code.

And on a sub note, does anyone know how i set a sub-text in the toolbar? I read it is possible, but i cant find any resources on how it is done.

<LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimaryDark"
        xmlns:android="http://schemas.android.com/apk/res/android"
        />
    <com.bacon.corey.audiotimeshift.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:panelHeight="0dp"
        sothree:shadowHeight="10dp"
        sothree:paralaxOffset="100dp"
        sothree:fadeColor="@android:color/transparent"

        >

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




                <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:padding="0dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    >
                    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        xmlns:app="http://schemas.android.com/apk/res-auto"
                        android:orientation="vertical"
                        android:padding="0dip"
                        android:gravity="center_horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_margin="0dp"
                        android:id="@+id/recordingListMainLayout"
                        android:foreground="@drawable/dim_shadow_shape_dark"

                        >

                        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                            xmlns:app="http://schemas.android.com/apk/res-auto"
                            android:orientation="vertical"
                            android:padding="0dp"
                            android:gravity="center_horizontal"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"

                            >

                            <FrameLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:id="@+id/mainLayoutContainer"/>
                <!--
                            <android.support.v4.view.ViewPager
                                android:id="@+id/viewPager"
                                android:layout_width="match_parent"
                                android:layout_height="0px"
                                android:layout_weight="1"
                                android:padding="0dp"
                                android:layout_margin="0dp"
                                />
                -->


                        </LinearLayout>

                    </FrameLayout>
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
                        <FrameLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@drawable/textview_rounded_corner_background_fam"
                            android:layout_alignParentRight="true"
                            android:layout_alignParentBottom="true"
                            android:layout_marginBottom="33dp"
                            android:layout_marginRight="90dp"
                            android:id="@+id/fabMainText"

                            >
                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Main Option - Quick Record"
                                android:textAlignment="center"
                                android:padding="6dp"
                                android:fontFamily="sans-serif-medium"

                                />
                        </FrameLayout>
                        <com.bacon.corey.audiotimeshift.FloatingActionsMenu
                            android:id="@+id/fabMenu"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom|right"
                            android:gravity="right"
                            app:fab_addButtonColorNormal="@color/holo_red_light"
                            app:fab_addButtonColorPressed="@color/c16"
                            app:fab_addButtonPlusIconColor="@color/white"
                            app:fab_expandDirection="up"
                            android:layout_marginTop="10dp"
                            android:layout_marginRight="10dp"
                            android:layout_marginBottom="10dp"
                            android:layout_marginEnd="10dp"
                            android:layout_alignParentRight="true"
                            android:layout_alignParentBottom="true"

                            >
                            <LinearLayout
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal"
                                android:gravity="center_vertical"
                                >
                                <FrameLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:background="@drawable/textview_rounded_corner_background_fam"
                                    android:layout_marginRight="14dp"
                                    >
                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Option Four"
                                        android:textAlignment="center"
                                        android:padding="6dp"
                                        android:fontFamily="sans-serif-medium"

                                        />
                                </FrameLayout>

                                <com.bacon.corey.audiotimeshift.FloatingActionButton
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    app:fab_colorNormal="@color/c15"
                                    app:fab_colorPressed="@color/c15"
                                    app:fab_size="mini"
                                    />
                            </LinearLayout>
                            <LinearLayout
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal"
                                android:gravity="center_vertical"
                                >
                                <FrameLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:background="@drawable/textview_rounded_corner_background_fam"
                                    android:layout_marginRight="14dp"

                                    >
                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Option Three"
                                        android:textAlignment="center"
                                        android:padding="6dp"
                                        android:fontFamily="sans-serif-medium"
                                        />
                                </FrameLayout>

                                <com.bacon.corey.audiotimeshift.FloatingActionButton
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    app:fab_colorNormal="@color/c8"
                                    app:fab_colorPressed="@color/c8"
                                    app:fab_size="mini"
                                    />
                            </LinearLayout>
                            <LinearLayout
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal"
                                android:gravity="center_vertical"
                                >
                                <FrameLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:background="@drawable/textview_rounded_corner_background_fam"
                                    android:layout_marginRight="14dp"

                                    >
                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Option Two"
                                        android:textAlignment="center"
                                        android:padding="6dp"
                                        android:fontFamily="sans-serif-medium"
                                        />
                                </FrameLayout>

                                <com.bacon.corey.audiotimeshift.FloatingActionButton
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    app:fab_colorNormal="@color/a1"
                                    app:fab_colorPressed="@color/a1"
                                    app:fab_size="mini"
                                    />
                            </LinearLayout>
                            <LinearLayout
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal"
                                android:gravity="center_vertical"
                                >
                                <FrameLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:background="@drawable/textview_rounded_corner_background_fam"
                                    android:layout_marginRight="14dp"

                                    >
                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Option One"
                                        android:textAlignment="center"
                                        android:padding="6dp"
                                        android:fontFamily="sans-serif-medium"
                                        />
                                </FrameLayout>

                                <com.bacon.corey.audiotimeshift.FloatingActionButton
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    app:fab_colorNormal="@color/a2"
                                    app:fab_colorPressed="@color/a2"
                                    app:fab_size="mini"
                                    />
                            </LinearLayout>
                        </com.bacon.corey.audiotimeshift.FloatingActionsMenu>
                    </RelativeLayout>
                </RelativeLayout>
            <!-- The navigation drawer -->
            <ListView android:id="@+id/left_drawer"
                android:layout_width="240dp"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:choiceMode="singleChoice"
                android:divider="@android:color/transparent"
                android:dividerHeight="0dp"
                android:background="#FFFFFF"/>
        </android.support.v4.widget.DrawerLayout>

        <!-- Sliding Panel Layout -->
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center|top"
                android:textSize="16sp"
                android:id="@+id/slideUpPanel"
                >

            </FrameLayout>

    </com.bacon.corey.audiotimeshift.SlidingUpPanelLayout>
</LinearLayout>

Thanks in advance for any help.

Corey B :)

like image 727
Fishingfon Avatar asked Nov 26 '14 14:11

Fishingfon


People also ask

How do I change the text color on my toolbar?

In method 1 Just go to the activity_main. xml file and add a TextView in the toolbar widget with the text color attribute.

How do you change the color of your toolbar on Android?

Just go to res/values/styles.edit the xml file to change the color of action bar.


3 Answers

Here is complete style for your toolbar. Explanation is given inline.

<style name="MyToolbar" parent="@style/ThemeOverlay.AppCompat">
    <!-- Title text -->
    <item name="android:textColorPrimary">@android:color/white</item>

    <!-- Title color in AppCompat.Light  -->
    <item name="android:textColorPrimaryInverse">@android:color/white</item>

    <!-- Menu text-->
    <item name="actionMenuTextColor">@android:color/white</item>
    <!-- Overflow -->
    <item name="android:textColorSecondary">@android:color/white</item>
    <!-- This will change drawer icon -->
    <item name="drawerArrowStyle">@style/WhiteDrawerIconStyle</item>
    <!-- background of the  -->
    <!-- <item name="android:background">@color/color_primary</item> -->
</style>


<style name="WhiteDrawerIconStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>

On subtitle note: You can use mToolbar.setSubtitle(sutitle);

like image 127
Nikola Despotoski Avatar answered Nov 11 '22 09:11

Nikola Despotoski


Put app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" to your Toolbar xml. And arrow turns white.

   <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/toolbar_height"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
like image 38
Johnny Five Avatar answered Nov 11 '22 10:11

Johnny Five


In your app bar, add this property.

app:theme = "@style/Base.V7.Theme.AppCompat"

That should take care of all the whiting. The referenced theme consists of a toolbar with white items, so the toolbar takes the part of the theme that is relevant to it.

Call mToolbar.setSubtitle as discussed above.

like image 21
rogerodipo Avatar answered Nov 11 '22 10:11

rogerodipo