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 .
Related
Spacing on AppBarLayout and incomplete app bar title
on geny motion virtual mobile is ok
on all my mobiles problem
problem screenshot:
on virtual mobile ok screenshot:
activity_main.xml
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
app:tabMode="fixed"
android:layoutDirection="rtl"
app:tabGravity="fill"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
Try changing the style of the main activity (the one causing the issues) in the manifest, that should do it. You can check the default values when you create a new project using the "Basic Activity" template.
In this case since your layout contains a toolbar you should use the default theme (or a custom one to the same effect): android:theme="#style/AppTheme.NoActionBar". Notice that I´m using the default values of the template. The style you need should be something like this:
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
This would be the manifest entry:
<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>
BTW, just in case you havent done it, consider testing with the same API level in all devices (virtual and physical) to get consistent test results.
Hope it helps!
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"
...
A button with a given image shall appear in the action bar. The Image below illustrates what I need:
In order to isolate the problem, I used the template from Android Studio which has an action bar and added an item to the menu list pointing to my png file in the drawable resource folder.
Here the Code:
MainActivity:
package com.pm.pmactionbaricon;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}
The menu Definition:
<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="com.pm.pmactionbaricon.MainActivity">
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
<item
android:id="#+id/distance_button"
android:icon="#drawable/distance_waiting"
android:title="#string/Distance"
android:orderInCategory="100"
android:showAsAction="ifRoom"/>
</menu>
The main layout file:
<?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:fitsSystemWindows="true"
tools:context="com.pm.pmactionbaricon.MainActivity">
<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_main" />
</android.support.design.widget.CoordinatorLayout>
The manifest file:
<?xml version="1.0" encoding="utf-8"?>
<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>
What I get from this is an Action bar without icon even though there is sufficient room:
The relevant menu item instead appears in the overflow menu:
Perhaps I have a fundamental misunderstanding about this. Any explanation would be welcome. Is it not possible to achieve this trivial task in Android? Which method do I have to apply to make a custom image visable as button and to control ist appearance and size in the action bar?
Make a custom_toolbar.xml and include it in your layout.()
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_collapseMode="pin"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:padding="0dp"
android:layout_width="match_parent"
android:background="#android:color/transparent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left">
//define your own layout here ,whatever you want to include
</RelativeLayout>
</android.support.v7.widget.Toolbar>
I have a collapsing toolbar, but I cannot for the love of god figure out why its not changing to the color i want it to as it collapses...Here is my xml code the collapsing toolbar.
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/FrontierTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="#drawable/background"
android:id="#+id/profileView_imageView"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/toolbarProfileViewID"
android:minHeight="?attr/actionBarSize"
app:theme="#style/FrontierTheme"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/mainColor"
app:tabMode="scrollable"
app:tabTextColor="#color/white"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Here is my styles.v21 (i dont have have anything in the regular styles.xml file)
<style name="FrontierTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#5F021F</item>
<item name="android:colorPrimaryDark">#5E152C</item>
<item name="android:colorAccent">#BCBCBC</item>
<item name="android:textColor">#FFFFFF</item>
</style>
And here is my android manifest.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.daprlabs.swipedeck" >
<uses-sdk
android:minSdkVersion="7"
android:targetSdkVersion="23" />
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:largeHeap="true"
android:supportsRtl="true"
android:theme="#style/FrontierTheme"
android:name=".ApplicationEnvironment">
<activity
android:name=".ActivityCenter"> <!--android:theme="#style/TestTheme" -->
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".ProfileView.ProfileView"
android:label="Frontier" />
</application>
</manifest>
Currently, when it collapses, the color is white...But i want it to be this hexidecimal: #5F021F
add a addOnOffsetChangedListener listener in the AppBarLayout to know if it's collapse or not, and change the color using setBackgroundColor. Like this:
//Set a listener to know the current visible state of CollapseLayout
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
int scrollRange = -1;
#Override
public void onOffsetChanged(final AppBarLayout appBarLayout, int verticalOffset) {
//Initialize the size of the scroll
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
//Check if the view is collapsed
if (scrollRange + verticalOffset == 0) {
toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.YOUR_COLLAPSED_COLOR));
}else{
toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.OTHER_COLOR));
}
}
});
The selected answer doesn´t work for me, looks terrible in my case when the color changes when verticalOffset == 0, so I tried this:
collapsingToolbarLayout.setContentScrimColor(Color.parseColor("#000000")); // #000000 is black color hex (for example)
And now changing color when collapsed looks smooth and clean,
Hope it helps somebody,
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" />