android - How can I theme my action bar to match this image?

Question

I'm working on an app's UI and I want to get the action bar to look like this:

This is what it looks like right now:

This is my styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/sunshine_blue</item>
        <item name="colorPrimaryDark">@color/sunshine_dark_blue</item>
    </style>

    <!-- Main activity theme -->
    <style name="ForecastTheme" parent="AppTheme">
        <item name="actionBarStyle">@style/ActionBar.Solid.Sunshine.NoTitle</item>
    </style>

    <!-- Detail activity theme -->
    <style name="DetailTheme" parent="AppTheme">
        <item name="actionBarStyle">@style/ActionBar.Solid.Sunshine.Title</item>
    </style>

    <!-- Settings activity theme -->
    <style name="SettingsTheme" parent="AppTheme">
    </style>

    <!-- Main activity action bar styles -->
    <style name="ActionBar.Solid.Sunshine.NoTitle" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="displayOptions">useLogo|showHome</item>
        <item name="logo">@drawable/ic_logo</item>
    </style>

    <!-- Detail activity action bar styles -->
    <style name="ActionBar.Solid.Sunshine.Title" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="displayOptions">useLogo|showHome</item>
        <item name="logo">@drawable/art_clear</item>
    </style>

    <!-- style for item selected on phone -->
    <style name="ForecastListStyle">
        <item name="android:choiceMode">none</item>
    </style>

</resources>

This is the layout file for my detail activity:

<!-- Master layout -->
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-condensed"
            android:textSize="24sp"
            android:id="@+id/detail_day_textview" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-condensed"
            android:textSize="16sp"
            android:textColor="@color/fragment_detail_grey"
            android:id="@+id/detail_date_textview" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="16dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif-light"
                    android:textSize="96sp"
                    android:paddingStart="32dp"
                    android:paddingLeft="32dp"
                    android:id="@+id/detail_high_textview" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif-light"
                    android:textSize="48sp"
                    android:textColor="@color/fragment_detail_grey"
                    android:paddingStart="64dp"
                    android:paddingLeft="64dp"
                    android:id="@+id/detail_low_textview" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/detail_icon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textSize="22sp"
                    android:textColor="@color/fragment_detail_grey"
                    android:id="@+id/detail_forecast_textview" />

            </LinearLayout>
        </LinearLayout>

        <!-- Humidity, wind, pressure -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-light"
            android:textSize="22sp"
            android:layout_margin="2dp"
            android:id="@+id/detail_humidity_textview" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-light"
            android:textSize="22sp"
            android:layout_margin="2dp"
            android:id="@+id/detail_pressure_textview" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-light"
            android:textSize="22sp"
            android:layout_margin="2dp"
            android:id="@+id/detail_wind_textview" />

    </LinearLayout>

</ScrollView>

And this is my AndroidManifest.xml file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.android.sunshine.app" >

    <!-- This permission is necessary in order for Sunshine to perform network access. -->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:theme="@style/ForecastTheme"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".DetailActivity"
            android:theme="@style/DetailTheme"
            android:label="@string/title_activity_detail"
            android:parentActivityName=".MainActivity">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.example.android.sunshine.app.MainActivity" />
        </activity>
        <activity
            android:name=".SettingsActivity"
            android:label="@string/title_activity_settings"
            android:theme="@style/SettingsTheme"
            android:parentActivityName=".MainActivity" >
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.example.android.sunshine.app.MainActivity" />
        </activity>
        <provider
            android:authorities="com.example.android.sunshine.app"
            android:name=".data.WeatherProvider" >
        </provider>
    </application>

</manifest>

I've tried a couple different things in the displayOptions but can't seem to get the logo and "Details" text to display at the same time. Also, is there any way to get the arrow to match? Or does this just depend on the API level?

Thanks for any help!

Answer 1

It's better to use menu item in toolbar/app bar. in this way there will be no additional space or any dislocate item in action bar .

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_action_search"
        android:orderInCategory="100"
        android:title="@string/action_share"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_share"
        android:icon="@drawable/ic_action_share"
        android:orderInCategory="101"
        android:title="@string/action_search"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="102"
        android:title="@string/action_settings"
        app:showAsAction="never" /> </menu>

And just remember using toolbar is much more easier for your purpose

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/ColorPrimary"
        android:minHeight="?attr/actionBarSize">

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

Here's complete tutorial