Develop Reference

How to fix "Cancel & Voice button on left" in RTL Search Bar

I developed an RTL android app. I implemented an Actionbar that contains a Search bar. but the Cancel and Voice button are on the right of the text.
As you know, the cancel and voice button must be on the left of the text in RTL.
Notice:
I've added the layoutDirection & textDirection for all of
AppBarLayout, Toolbar & SearchView.
I've added the android:supportsRtl="true" at Manifest too.
I've set Gravity to End.
Layouts:
app_bar_home.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:layoutDirection="rtl"
tools:context=".home.Home">
<android.support.design.widget.AppBarLayout
android:layoutDirection="rtl"
android:textDirection="rtl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:layoutDirection="rtl"
android:textDirection="rtl"
android:id="#+id/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>
<include layout="#layout/content_home" />
</android.support.design.widget.CoordinatorLayout>
menu_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_search"
android:icon="#android:drawable/ic_menu_search"
android:title="#string/search_hint"
app:showAsAction="always|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView"/>
</menu>
searchable.xml:
<?xml version="1.0" encoding="utf-8"?>
<searchable
xmlns:android="http://schemas.android.com/apk/res/android"
android:label="#string/app_name"
android:hint="#string/search_hint"/>
Manifest:
<activity
android:name=".home.Home"
android:label="#string/app_name"
android:theme="#style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.SEARCH" />
</intent-filter>
<meta-data
android:name="android.app.searchable"
android:resource="#xml/searchable" />
</activity>
So, How can I change the position of SearchBar Buttons to the left?

you can set rtl diration just for toolbar .
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layoutDirection="rtl"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
and customize your toolbar .

how to remove double Tool/Actionbar?

i don´t know why this second Toolbar appears...
I have attached my xml files for the Activit "ListActivity".
After deleting one line in the XML the doublebar were gone in the Deign Preview in Android Studio, but when i run the App the second bar appears still...
how to remove it?
activity_list.xml
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context="ibas.locatixteamviewer.ListActivity">
<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/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>
<include layout="#layout/content_list" />
content_list.xml
<RelativeLayout 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:id="#+id/content_list"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="#+id/itemRecyclerView" />
</android.support.v4.widget.SwipeRefreshLayout>
Thanks for Help!

You have to disable ActionBar. Follow below procedures.
Add a theme to the style.xml :
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Apply theme to Manifest in your activity tag:
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:theme="#style/AppTheme.NoActionBar">
Finally, set Toolbar as support ActionBar in onCreate:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Hope this helps.

You should remove the theme ActionBar. Use this theme in your activity:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<!--<item name="windowActionModeOverlay">true</item>-->
</style>
on manifest:
<application
android:allowBackup="true"
android:label="#string/app_name"
android:theme="#style/AppTheme"
...

How the top bar hidden in android lollipop?

I need to put the top bar outside the " Drawer navigation" .
In my kitkat device , it looks good . but when tested at lollipop that bar appears .
Do not know how to remove it , I tried to change the subject of the activity to " NoActionBar " and similar themas . but it does not work .
Thank you.
I'm doing this design . the kitkat looks good .
lolipop but if you see that bar.
This is my main activity :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.like.mail.network.aupa.maillike.TestActivity">
<include
layout="#layout/top_toolbar" />
<include layout="#layout/content_test" />
</LinearLayout>
This is my content_test:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:fitsSystemWindows="true">
<ExpandableListView
android:id="#+id/navigationmenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#222"
android:groupIndicator="#null"
android:listSelector="#D84B20">
</ExpandableListView>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
This is my manifest:
<activity
android:name=".TestActivity"
android:label="#string/title_activity_test"
android:theme="#style/AppThemeWithoutActionBarTitle">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
This is my style:
<style name="AppThemeWithoutActionBarTitle" parent="AppTheme">
<item name="android:actionBarStyle" tools:targetApi="honeycomb">
#style/ActionBarWithoutTitle
</item>
</style>
<style name="ActionBarWithoutTitle" parent="#style/ActionBar">
<item name="android:displayOptions" tools:targetApi="honeycomb">useLogo</item>
</style>

Try it in manifest
<activity
android:name=".TestActivity"
android:label="#string/title_activity_test"
android:theme="#style/AppThemeWithoutActionBarTitle">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
In res/values-v21/style.xml
<resources>
<style name="AppThemeWithoutActionBarTitle" parent="Base.MyTheme"></style>
<style name="Base.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">false</item>
<item name="android:windowFullscreen">true</item>
<item name="windowNoTitle">true</item>
</style>
</resources>

Accomplish move the bar with the following code:
super.onCreate(savedInstanceState);
getWindow().requestFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_test);
Also remove the attribute: android: fitsSystemWindows = "true" of all the "layout including" and place it in the main.

Android Studio designer preview different to phone

I'm new to android studio and developing on the android platform. I'm having a problem where the Android Studio designer preview doesn't show exactly what is on my phone. It shows an extra Toolbar widget at the top of the screen. I've had a look in the XML file for the activity and cannot find where it is coming from. It would be much appreciated if one of you could help.
Designer: http://imgur.com/A4TZFWb
Phone: http://imgur.com/kxP4CFn
This is a snippet from the XML file:
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context="com.tomnulty.helloworld.SecondActivity">
<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/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>
And this is a snippet from the AndroidManifest file:
<activity
android:name=".SecondActivity"
android:label="#string/hello_world"
android:theme="#style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.SECOND" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>

As Pztar said, "Go into your styles.xml and under the AppTheme style set the parent as Theme.AppCompat.Light.NoActionBar"
Although my theme was set when I declared the activity in AndroidManifest.xml, this did not change the preview. This had to be done by changing the theme in the UI of Android Studio or the styles.xml file.
Styles.xml:
<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>
</style>

Using Android Studio 3.0 stable, you can change to your custom theme in the preview panel. To remind, the design time is not the same to the runtime if your activity in the AndroidManifest.xml does not implement the same one.

activity becomes fullscreen when toolbar is transparent

I am trying to use a transparent toolbar in my app. However, when I set my toolbar as transparent the activity expands to fullscreen height and some content overlaps with my toolbar.
Here is the layout code for the activity:
app_bar_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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=".MainActivity">
<include layout="#layout/content_main" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00FFFFFF"/>
</RelativeLayout>
content_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#color/colorPrimary"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
manifest :
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.aaaaa.www.aaaaaaaaa" >
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:supportsRtl="true"
android:theme="#style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:theme="#style/AppTheme.NoActionBar" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
styles.xml :
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

Try adding this to your relative layout xml
android:paddingTop="?android:attr/actionBarSize"

You can try with this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00FFFFFF">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.v7.widget.Toolbar>

You are using a RelativeLayout as parent container in app_bar_main.xml where all children will occupy the entire view if set to match parent. You can change it to LinearLayout with vertical mode where Android will arrange the children one by one in vertical direction without overlap.

Try adding this:
<include layout="#layout/content_main" android:layout_below="#+id/toolbar" />