Custom App bar adding text and icons - Android

Question

i have created a simple custom appbar, I want to add text and icon, and also to change text color.

I tried it Like this, but didnt work.

Manifest - label

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".Login"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".Signup"/>
        <activity
            android:name=".ForgotPassword"
            android:label="@string/forgotpass" />
        <activity
            android:name=".CompanyProfile"
            android:label="@string/your_company_profile" />

App_bar

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorAccent"
    app:theme="@style/myCustomAppBarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark">

</android.support.v7.widget.Toolbar>

Main_menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">


    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:showAsAction="always"
        android:orderInCategory="100"
        />

</menu>

Style

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
    </style>

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimaryDark</item>
        <item name="colorPrimaryDark">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>

    <!--*************************    Custom Theme  *******************************  -->
        <style name="myCustomAppBarTheme" parent="Theme.AppCompat.Light">
            <item name="android:actionBarStyle">@style/AppTheme.ActionBar</item>
            <item name="actionBarStyle">@style/AppTheme.ActionBar</item>
        </style>

        <style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
            <item name="android:titleTextStyle">@style/AppTheme.ActionBar.TitleText</item>
            <item name="titleTextStyle">@style/AppTheme.ActionBar.TitleText</item>
            <item name="android:height">100dp</item>
            <item name="height">100dp</item>
        </style>

        <style name="AppTheme.ActionBar.TitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
            <item name="android:textSize">20sp</item>
            <item name="android:textColor">@color/colorWhite</item>
        </style>
    <!--****************************  Custom Theme  *******************************  -->

</resources>

Activity

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:background="@color/colorWhite">

    <!-- Include Appbar -->
    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar" />

    <!-- include Shadow below appbar -->
    <View android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/toolbar_dropshadow"/>

    <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:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.example.baman.zupportdesk.ForgotPassword"
        android:background="@color/colorWhite">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/pass_forgot"
            android:id="@+id/textView3"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:textColor="@color/colorBlack"
            android:textSize="14dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:inputType="textEmailAddress"
            android:ems="10"
            android:id="@+id/et_FP_email"
            android:drawableLeft="@drawable/icon_person"
            android:background="@color/editText_bg"
            android:textSize="18sp"
            android:hint="Enter email address"
            android:paddingLeft="5dp"
            android:textStyle="bold"
            android:layout_below="@+id/textView3"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="20dp" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/submit"
            android:id="@+id/btn_FP_submit"
            android:textAllCaps="false"
            android:background="@drawable/button_style"
            android:textColor="@color/colorWhite"
            android:textSize="20dp"
            android:textStyle="bold"
            android:layout_below="@+id/et_FP_email"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="20dp" />
    </RelativeLayout>
</LinearLayout>

I want to add icon, Title and also change the tilte color in appbar. can some one help me to do this. tnx.

Solution

Edit your app_bar.xml as below:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/colorAccent"
app:theme="@style/myCustomAppBarTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"><RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageButton
        android:id="@+id/btn_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="@android:color/transparent"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/txt_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_toEndOf="@+id/btn_back"
        android:layout_toRightOf="@+id/btn_back"
        android:text="Title"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold" />

</RelativeLayout>
</android.support.v7.widget.Toolbar>