In my application I started to set the UI to meet Material Design use the Toolbar.
I want to add the back arrow on the action bar. It looks ok but somehow, when I change my phone locality to Hebrew which is a rtl language, the arrow change it's direction and instead of pointing "out", it is now pointing "in".
Please refer to image to see how arrow looks in Hebrew and English.
Is there a way to control the arrow direction (I want it will point "out" always of course)?
I tried to add the android:layoutDirection="ltr" and android:textDirection="ltr" but it didn't helped.
Thanks for who can answer on this.
Here is the code of the Toolbar layout:
<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="?android:attr/actionBarSize"
android:background="#color/primaryColor"
app:theme="#style/MyCustomToolBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
android:textDirection="ltr"
android:layoutDirection="ltr">
Finally I succeeded to change the arrow direction.
Well, actually I followed this post:
First, I have found some action bar icons and placed a drawable back icons in the project.
Then I used this code to set the arrow programmatically:
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_action_back);
The "back" icon is provided by a drawable specified in the homeAsUpIndicator attribute of the theme. You can try to override it and put your own marker (arrow out) it would be something like this:
<style name="Theme.MyTheme" parent="android:Theme.Holo">
<item name="android:homeAsUpIndicator">#drawable/out_arrow</item>
</style>
Below code adjust back arrow direction automatically (Write in your activity):
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
just set android:autoMirrored="true" in your vector drawble's xml.
If you are using Toolbar then this can be a solution:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// getting the back arrow view
View toolbarBack = null;
for (int i = 0; i < toolbar.getChildCount(); i++)
if (toolbar.getChildAt(i) instanceof ImageButton)
toolbarBack = toolbar.getChildAt(i);
if (toolbarBack != null) {
// change arrow direction
toolbarBack.setRotationY(180);
}
Related
i want to change menu icon below of toolbar. Is this possible to change the icon position.
Thanks in advance
[
You can use app:buttonGravity attribute to change the gravity of the buttons in the Toolbar and use a custom height.
Something like:
<com.google.android.material.appbar.MaterialToolbar
android:layout_height="...dp"
app:buttonGravity="center_vertical"
../>
It can work also with the androidx.appcompat.widget.Toolbar.
I want to change Floating Action button shadow colour from black/grey to colorprimary/custom color of shadow ** shadow example like below image with **center blue FAB button with light blue shadow not grey shadow. But we can change the FAB button background color. But as you can see in image there is blue shadow of FAB button.I want to achive that thing.
try this :: app:backgroundTint="#color/colorAccentGrey"
where colorAccentGrey = YourColor
and put xmlns:app="http://schemas.android.com/apk/res-auto" at the beginning of the XML if you forggt,
and for Remove shadow :: app:elevation="0dp"
Hope this will help you.. :)
I think you have 2 options:
as #Uttam said, change the elevation of the FAB widget
to make a custom design and embed it as an image in your layout as shown here http://androidgifts.com/android-material-design-floating-action-button-tutorial/
None of the answer worked for me. So i worked this. anyhow it will give shadow like effect that enough for me
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_black"
app:elevation="0dp" // disable outside shawdow
app:borderWidth="30dp" // make borderwidth to 25dp or height of fab
app:backgroundTint="#00E5FF" // now you will see only this color with shawdow
android:backgroundTint="#00E5FF" // since border is 30dp u ll not see this color and if you want to check reduce border width to 25dp then ull see this color in center as a small dot.
/>
A simple solution is to remove the stroke(border-width), the default value is 0.5dp change it to 0dp, that is
app:borderWidth="0dp"
Refer Regular and mini FAB key properties in Material Design documentation!
Link - https://material.io/components/buttons-floating-action-button/android
I don’t know what the real name of this is, but I want to change the top menu for an image or button. Someone can tell me what the name is and how do that in my android aplication?.
something like it!!!
in your menu xml add this in the item tag android:icon="#drawable/youricon"
app:showAsAction="always"
If you mean the custom text, you can add custom vews in your toolbar. The toolbar is just a viewgroup where you can add views inside. See this as an example.
If you mean to add a custom image instead of the back arrow, you can switch it with the toolbar.setNavigationIcon(Drawable drawable) method.
If you want to display the default arrow, then try with this (after setting the toolbar).
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}
I asked this question before (here) but nobody answered so I ask It a little bit simpler.
The problem is when I change the layout direction to RTL
(in
xml file : android:layoutDirection="rtl"
or programmatically :
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1){
getWindows().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
}
doesn't matter) the navigation icon remain LTR
How can I fix this issue?
To be more specific the arrow should point at right!
In the Activity Class -->
Add these lines :
onCreate(){
ActionBar ab = getSupportActionBar();
// Enable the Up button
ab.setDisplayHomeAsUpEnabled(true);
ab.setBackgroundDrawable(getResources().getDrawable(R.drawable.ic_arrow_back_black_24dp, getApplicationContext().getTheme()));
}
#Override
public void onBackPressed() {
super.onBackPressed();
Intent login = new Intent(LoginActivity.this, MainActivity.class);
login.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK);
startActivity(login);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
onBackPressed();
return true;
} else {
return super.onOptionsItemSelected(item);
}
}
Write a custom drawable using File--> New--> VectorAsset
https://developer.android.com/studio/write/vector-asset-studio.html
Choose the arrow accordingly and Enable the field -->(Enable the auto mirroring for RTL Layout)
Auto-Mirror Property checked
I have changed the color of Arrow to be White, You can choose your own color
FileName: ic_arrow_back_black_24dp.xml in drawable folder
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#00000000"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
</vector>
After changing the Locale to Arabic - which changes the entire Layout from RTL to LTR
I just added a drawable icon that rotated 180 degree and set the icon in onCreate() but the problem is we should do this in every activity that It's layout is RTL. So if our application supports both directions we should check if layout direction is RTL then change the up indicator:
if(config.getLayoutDirection() == View.LAYOUT_DIRECTION_RTL) {
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_arrow_up_rtl);
}
There is property called auto mirror which itself rotate the icon on the basis of locale .
If you are using Toolbar and added the icon as navigation icon , then use the below line to rotate the icon
toolbar.navigationIcon?.isAutoMirrored = true
If you are using image view , then just add a style to the image view to rotate icon . Do create a different style for arabic .
In your style file add the following code :
<style name="ImageMirror">
<item name="android:scaleX">-1</item>
</style>
Go for the vector drawables as they default have this auto mirror property .
u can use :
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_arrow_forward_24dp);
and Add RTL arrow to drawable
The problem is because the arrow is not following the RTL situation of the app
I had the same problem and I ended up creating a custom toolbar
use a NoActionBar theme and create an empty with only android.support.v7.widget.Toolbar in it
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
then include it in all activities needing a toolbar
<include layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent" />
and in activity do this
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if(toolbar != null) {
setSupportActionBar(toolbar);
toolbar.inflateMenu(R.menu.whatever);
}
the custom one will follow the RTL direction of the app
I had same problem with Animation, and I resolved it! As I noticed, it is bug for versions below KitKat(and for sure above 4.2, include).
What you need to do, as was said here, it is rotate for 180 in right place.
You have to create your own ActionBarDrawerToggle based on the given code by Google. Inside you will find class DrawerArrowDrawableToggle - it is custom Drawable, that draw Arrow/Humberger "animation". Like before you have to create your own class, based on the code of DrawerArrowDrawableToggle, and inside you will find variable "flipToPointRight" and take care that it will be "RIGHT" and you have take care that rotation won't work on versions >= Kitkat, otherwise will have the problem there. It is all.
This bug happens on Android 4.2 (API 17) only, when using the AppCompat support library version 24 or above.
In previous support library versions like:
compile 'com.android.support:appcompat-v7:23.0.1'
... It was handled automatically, because this older library contained the drawable images of the arrow facing both left and right:
R.drawable.abc_ic_ab_back_mtrl_am_alpha (This is inside the AppCompat v23 library, and multiple versions were available in drawable and drawable-ldrtl, ...)
You can see these images in Android Studio -> View -> Tool Windows -> Project -> Select "Project" in the drop-down menu -> appcompat-v7-23.0.1 -> res -> drawable -> ...
In newer versions of AppCompat, such as
compile 'com.android.support:appcompat-v7:24.0.0' // or anything above 23
The arrow image now only exists as a single vector drawable pointing towards the left:
R.drawable.abc_ic_ab_back_material (Vector XML file inside AppCompat v24 library)
And Android 4.2 does not seem to be able to mirror it in the opposite direction for RTL mode. And the library does not contain a fallback image.
So a potential way to fix it, without creating your own custom image, is to use the older AppCompat support library version 23 or below. But this may not be compatible with newer tools/libraries.
As far as I know this happens in all android studio versions. Luckily, the solution is easier than you think. You just need to disable RTL support. Just go to your Manifest file and change the value in this line to False: android:supportsRtl="true". Another good thing is that this solution will solve most of the problems that occur in RTL languages like Arabic. Hope this helps (:
I have a nearly full screen dialog fragment in my app, containing a toolbar on top. I want to style this toolbar like in the Material design guidelines:
Toolbar XML:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:layout_width="match_parent"
android:title="#string/new_folder"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#color/primary_dark"/>
menu XML:
<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">
<item
android:id="#+id/action_done"
android:title="#string/action_save"
android:icon="#drawable/ic_done_white_48dp"
android:orderInCategory="100"
app:showAsAction="always|withText" />
</menu>
In my Dialog Fragment, code relevant to the toolbar:
private Toolbar.OnMenuItemClickListener mMenuItemListener = new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
switch (menuItem.getItemId()) {
case android.R.id.home:
dismiss();
return true;
case R.id.action_done:
dismiss();
return true;
}
return false;
}
...
mToolbar.setNavigationIcon(R.drawable.ic_close_white_48dp);
mToolbar.inflateMenu(R.menu.menu_folder);
mToolbar.setOnMenuItemClickListener(mMenuItemListener);
My toolbar looks like this:
I have four problems:
The 'Save' text is not displayed next to the checkmark, even though there is ample room for it
The X icon is too large (maybe use the 36dip version?)
The X icon is not clickable
The toolbar does not display the title ('New Folder')
What am I doing wrong?
Note that my toolbar is not set as the action bar! It's just a toolbar in a fragment.
The 'Save' text is not displayed next to the checkmark, even though
there is ample room for it
This is not possible. You can show only text or only icon.
The X icon is too large (maybe use the 36dip version?)
You should use 24dp version.
The toolbar does not display the title ('New Folder')
Because you are in Fragment so you need to set title explicitly into Toolbar and from you code i don't see source code that doing this. You need to do it programatically (via xml it seems it's broken) and i prefer to you use support library.
The X icon is not clickable
You need to use OnNavigationClickListener and not OnMenuClickListener, your X icon is navigation icon not menu icon.
I don't think that you should but texts in the menu side (right of the toolbar). Looking at the guidelines, you can see that is not a good practice, and all the examples show menus only with icons
From the guidelines, I think you should use 24dp (http://www.google.com/design/spec/style/icons.html#icons-system-icons in the section 'Clearance')
Use
toolbar.setNavigationOnClickListener();
you need to set the title like
toolbar.setTitle("'New Folder")