问题
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!
回答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
来源：https://stackoverflow.com/questions/41580441/how-can-i-theme-my-action-bar-to-match-this-image