Develop Reference

Toolbar menu item text doesn't align with icon

How can I align text with the icon? It is working fine if I remove parent property but it is being used by some other activity so I cannot remove it. I think I might have messed up somewhere in layout xml file but couldn't find it out.
styles.xml
<style name="DarkToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/whateever</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
<item name="colorControlNormal">#android:color/white</item>
</style>
<style name="LightPopupMenu">
<item name="android:background">#android:color/white</item>
<item name="android:textColor">#android:color/black</item>
<item name="overlapAnchor">false</item>
</style>
layout.xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/c_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/window_background_dark">
<androidx.appcompat.widget.Toolbar
android:id="#+id/move_pick_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/DarkToolbar"
app:popupTheme="#style/LightPopupMenu"
android:elevation="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/move_wf_pick_toolbar_title"
android:textSize="24sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:gravity="center"
tools:text="Token: 123" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
<FrameLayout />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Current behaviour:
is there a way to achieve this without removing parent attribute?

Toolbar Background Image Size

I am working in android application. Actually there I have to set an image in place of toolbar. But I don't know what the exact sizes of that image.
I am not asking about actionbar size. I googled it a lot but unable to find the solution.
here is my requirement

You can create a custom toolbar and add it to your activity
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/AppTheme.AppBarOverlay"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/ivUser"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/ic_profile"
android:layout_centerVertical="true"
/>
<ImageView
android:id="#+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_logo_light"
android:layout_centerInParent="true"
android:padding="15dp"
/>
<ImageView
android:id="#+id/ivLogout"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/ic_logout"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:visibility="gone"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
You can add this toolbar xml to your activity
<include
layout="#layout/toolbar.xml">
Use this toolbar in activity using below code in your activity
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TextView tvTitle = (TextView) toolbar.findViewById(R.id.tvTitle);
ImageView ivUser = (ImageView) toolbar.findViewById(R.id.ivUser);
ImageView ivLogout = (ImageView) toolbar.findViewById(R.id.ivLogout);
getSupportActionBar().setDisplayShowTitleEnabled(false);
Note: Use NoActionBar theme for the activity. To disable the default toolbar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>

please try this code in your xml file;
<android.support.constraint.ConstraintLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.kolektif_merta.testapp.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/layout_home_appBarLayout_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="56dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
And in your java class inside onCreate method(assuming you are in activity);
toolbar = findViewById(R.id.toolbar);
toolbar.setBackground(ContextCompat.getDrawable(this,R.drawable.test));
Here is the test drawable is 1200x640 as you asked.
Also don't forget the update styles.xml file with:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
Here is the result :
custom toolbar background witm image

The color of back arrow in Actionbar does not change

The title and back arrow in some activities shown white in some shown black.
I read and applied all the solutions in Stackoverflow but none of them worked.
In some activities code work fine but in some of them no!
My style:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">#drawable/launch_screen</item>
</style>
<style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
In this does not work :
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
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:orientation="vertical"
tools:context="de.h_da.pizzaorder.Activities.NewUserActivity"><android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/NewUserActivity_Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.AppBarLayout>
<ScrollView
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:gravity="top"
android:scrollbars="vertical"
>
<TextView
style="#style/TextView"
android:text="#string/NewUserActivity_Username_TextView" />
<EditText
android:id="#+id/NewUserActivity_Username_EditText"
style="#style/EditText"
android:hint="#string/NewUserActivity_HintUsername_EditText"
android:maxLength="40"/>
<TextView
android:id="#+id/NewUserActivity_Password_TextView"
style="#style/TextView"
android:text="#string/NewUserActivity_Password_TextView" />
<EditText
android:id="#+id/NewUserActivity_Password_EditText"
style="#style/EditText"
android:hint="#string/NewUserActivity_HintPassword_EditText"
android:inputType="textPassword"
android:maxLength="45"/>
<TextView
android:id="#+id/NewUserActivity_RePassword_TextView"
style="#style/TextView"
android:text="#string/NewUserActivity_RePassword_TextView" />
<EditText
android:id="#+id/NewUserActivity_RePassword_EditText"
style="#style/EditText"
android:hint="#string/NewUserActivity_HintRePassword_EditText"
android:inputType="textPassword"
android:maxLength="45"/>
<TextView
style="#style/TextView"
android:text="#string/NewUserActivity_Name_TextView" />
<EditText
android:id="#+id/NewUserActivity_Name_EditText"
style="#style/EditText"
android:hint="#string/NewUserActivity_HintName_EditText"
android:maxLength="40"/>
<TextView
style="#style/TextView"
android:text="#string/NewUserActivity_Family_TextView" />
<EditText
android:id="#+id/NewUserActivity_Family_EditText"
style="#style/EditText"
android:hint="#string/NewUserActivity_HintFamily_EditText"
android:maxLength="40"/>
<TextView
style="#style/TextView"
android:text="#string/NewUserActivity_Email_TextView" />
<EditText
android:id="#+id/NewUserActivity_Email_EditText"
style="#style/EditText"
android:hint="#string/NewUserActivity_HintEmail_EditText"
android:inputType="textEmailAddress"
android:maxLength="40"/>
<TextView
style="#style/TextView"
android:text="#string/NewUserActivity_Telephone_TextView" />
<EditText
android:id="#+id/NewUserActivity_Telephone_EditText"
style="#style/EditText"
android:hint="#string/NewUserActivity_HintTelephone_EditText"
android:inputType="phone"
android:maxLength="13"/>
<TextView
style="#style/TextView"
android:text="#string/NewUserActivity_Address_TextView" />
<EditText
android:id="#+id/NewUserActivity_Address_EditText"
style="#style/EditText"
android:maxLength="500"
android:scrollbars="vertical"
android:hint="#string/NewUserActivity_HintAddress_EditText"
android:layout_height="match_parent"
android:imeOptions="actionDone"/>
<Button
android:id="#+id/NewUserActivity_Create_Button"
style="#style/Button"
android:text="#string/NewUserActivity_Create_Button" />
</LinearLayout>
</ScrollView>
</LinearLayout>
in this work:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="de.h_da.pizzaorder.Activities.SettingsActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/SettingsActivity_Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ListView
android:id="#+id/SettingsActivity_ListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#null"/>
</LinearLayout>

To make your toolbar "back" arrow and overflow icon light, while maintaining a light themed popup menu:
Add a toolbar style in your style.xml file(s):
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Set the new style to your Toolbar layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
style="#style/AppTheme.Toolbar"/> <!-- Added style -->
This will give your Toolbar a dark themed (white) arrow and overflow icon, but will keep your popup menu light.
Taken from (original link) here: https://stackoverflow.com/a/33833931/2905354
This works perfectly and has the added benefit of making your app easier to theme.

I faced this problem, I just tried to set my own drawable as back button like this :
final Drawable your_drawable = getResources().getDrawable(R.drawable.back_arrow);
upArrow.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(your_drawable);

Android Material CardView with full screen image on Cardview

i need to do this :
http://developer.android.com/design/material/images/card_travel.png
so i create and add the dependency to the project and here is my activity main code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="6dp">
<ImageView
android:layout_width="100dp"
android:layout_height="50dp"
android:src="#drawable/ic"/>
<TextView
style="#style/TextAppearance.AppCompat.Caption"
android:textColor="#555"
android:layout_margin="3dp"
android:gravity="end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Detail"/>
</android.support.v7.widget.CardView>
</LinearLayout>
so, how we can do this like below picture:?
http://i.stack.imgur.com/Z0lNa.png
Cheers!

What you're looking for is a translucent status bar. When you have this configured you're able achieve this effect. Make also sure to remove the actionbar as I do in my example down below, otherwise you'll have to make it transparent.
Change your v21/themes.xml file to this:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Then add android:fitsSystemWindows="true" to your LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">

Problems getting my ActionModeBar(?) to overlap support toolbar

I have been trying to get my app to look more material(ized) with the help of app compat v21, I have replaced my regular actionbar with the support toolbar, and changed my theme to Theme.AppCompat.Light.NoActionBar this works great! However, when I longpress an item in my gridview and my actionmode bar (is that what they are called?) shows up for multi select it shows above the toolbar.
I want it to overlap the toolbar, the same way it did with my old regular actionbar. I have tried to find a solution here, and have found multiple sources saying to add true
This does not work for me, i have tried both with the android: prefix and without, but still I get the same result. My activity extends ActionBarActivity and I have put:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
In my onCreate. I feel like I have tried anything but I get the same result regardless.
I guess I better show some code:
My main layout
<android.support.v4.widget.DrawerLayout
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="?window_bg_default"
>
<!-- The main content view -->
<include layout="#layout/toolbar" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
ads:adSize="SMART_BANNER"
android:visibility="gone"
android:background="#color/text_darkgray"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
<TableLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="#+id/main_content"
android:layout_above="#id/adView"
/>
</RelativeLayout>
</LinearLayout>
<!-- The navigation drawer -->
<include layout="#layout/navdrawer" />
My styles
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="colorPrimary">#color/twee_orange_light</item>
<item name="colorPrimaryDark">#color/twee_orange_dark</item>
<item name="colorAccent">#color/twee_blue_light</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:actionBarStyle">#style/AppTheme.Actionbar</item>
<item name="android:actionModeBackground">#color/twee_orange_dark</item>
<item name="android:actionOverflowButtonStyle">#style/AppTheme.Overflow</item>
<item name="android:homeAsUpIndicator">#drawable/ic_action_home</item>
<item name="card_bg_default">#drawable/img_bg_card</item>
<item name="window_bg_default">#drawable/window_background</item>
<item name="card_episode_name">#color/nextepisodegray</item>
<item name="card_episode_number">#color/twee_black</item>
<item name="button_bg">?android:attr/selectableItemBackground</item>
<item name="button_watched">#drawable/ic_watched_inactive</item>
<item name="text_default">#color/text_slightlydarkgray</item>
<item name="text_default_header">#color/text_darkergray</item>
<item name="text_season_separator">#color/black</item>
<item name="drawer_background">#color/drawer_background</item>
<item name="drawer_list_background">#color/drawer_list_background</item>
<item name="card_bg_default_color">#color/drawer_list_background</item>
<item name="twee_divider">#color/divider_default</item>
<item name="card_header_default">#drawable/img_bg_cardtop_header</item>
<item name="checkbox_watched">#drawable/checkbox_watched</item>
<item name="card_middle_bg">#drawable/background_listitem_default</item>
</style>
My toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/twee_orange_light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="8dp" />
My navdrawer:¨
<se.ja1984.twee.Activities.Views.ScrimInsetsScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="fill_parent"
android:layout_gravity="left|start"
android:orientation="vertical"
android:id="#+id/drawer_wrapper"
android:background="?drawer_background"
android:fitsSystemWindows="true"
app:insetForeground="#4000"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="165dp"
android:background="#drawable/img_navdrawer_header"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="#dimen/navbar_top"
android:paddingBottom="8dp"
android:id="#+id/lnrProfileChooser"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/layoutImage"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginRight="#dimen/padding_small"
>
<se.ja1984.twee.utils.RoundedImageView
style="#style/Twee_Cast_Photo"
android:layout_height="64dp"
android:layout_width="64dp"
android:id="#+id/imgUser"
android:scaleType="centerCrop"
android:src="#drawable/ic_no_cast"/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/traktWrapper"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:visibility="gone"
>
<ImageView
android:id="#+id/background"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/trakt_background"
/>
<ImageView
android:layout_gravity="center"
android:id="#+id/imgTraktLogo"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/ic_trakt_logo"
/>
</FrameLayout>
</RelativeLayout>
<it.sephiroth.android.library.widget.HListView
android:id="#+id/profiles"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right|top" />
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_gravity="bottom"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:layout_alignParentBottom="true"
>
<TextView
style="#style/Twee_Profile_Displayname"
android:id="#+id/txtUsername"
android:text="#string/profile_notsignedin_displayname"
android:paddingTop="0dp"
/>
<TextView
android:text="Xxxx hours well spent"
style="#style/Twee_Profile_Timewasted"
android:id="#+id/txtTimeWasted"
android:paddingTop="0dp"
android:layout_below="#+id/txtUsername" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:id="#+id/navdrawer_items_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:orientation="vertical" />
</LinearLayout>
</se.ja1984.twee.Activities.Views.ScrimInsetsScrollView>
The trained eyes might see that I have borrowed the ScrimInsetScrollView from the IOSched app, but I don't think that matters.
And here's an image of the monsterosity!

I managed to solve this issue myself!
The problem is that I ran my super.onCreate() to late in my onCreate method.
I moved it to the top of my method, and now it works great!