I have removed the default action bar from my application and added a custom one from scratch by using the ToolBar. I have placed an imageView inside my action bar but i'm facing two issues:
1) The imageView is not responsive so it doesn't work well with all devices. What can i do to achieve this responsiveness?
2) I also have an OptionsMenu in my app and next to the Toggle, is my app's title. Since i want my image to be centered inside the ActionBar i don't want the title there. How can i remove it from just the ActionBar?
Thank you in advance for your help and time!
Issue 1:
If your image is not responsive. You have to put different size of images to support highend devices. Put the desired image to folder drawable/drawable-hdpi/drawable-mdpi....
/drawable-ldpi For low density screens.
/drawable-mdpi For medium density screens.
/drawable-hdpi For high resolution screens.
/drawable-xhdpi For extra high resolution screens.
Issue 2:
To remove the toolbar title
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setTitle("");
Centering the imageview. Edit you customview to centering.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_icon"
android:layout_gravity="center"/>
</LinearLayout>
1) don't use fixed values for ImageView provide weight to imageview in toolbar custom layout.
2) layout_gravity="center" may help you
Related
I'm struggled with this for hours looking for solution on google and stackoverflow. Thought that this is some trivial bug in my app but finally made empty project and can reproduce this too. Just run new project and select "Tabbed Activity" with navigation style "Action Bar Tabs (with ViewPager)
Then try to put any widget at the bottom of the fragment's layout. I did this by modify fragment_main.xml and adding:
android:layout_height="match_parent"
android:gravity="bottom"
android:textAlignment="center"
So the whole layout is:
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity$PlaceholderFragment">
<TextView
android:id="#+id/section_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:gravity="bottom"
android:text="aaaaaaa"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintTop_creator="1" />
</android.support.constraint.ConstraintLayout>
In design mode everything looks fine:
But when you run app:
You will see text only when you swipe action bar to hide it:
So it is impossible to set widget at the bottom of the tab's fragment or even match some list/picture to the height of the parent because bottom edge will be always under navigation bar.
Workaround which I found is here:
ViewPager with Toolbar and TabLayout has wrong height
First one is to put AppBarLayout and ViewPager between LinearLayout but then I lose hidding action bar functionality when scrolling ViewPager's content. Second one is add android:paddingBottom="?attr/actionBarSize" in ViewPager but then there is a gap when I hide action bar. Seriously there is no solution for this?
I think this is an expected behavior since the ActionBar gets hidden when scrolling up. In the design mode the text can be shown because it doesn't display the TabLayout. However, when you launch the app, it will inflate the TabLayout and the fragment will go below it. So it's not like the fragment is getting expanded or giving you wrong height.
Imagine putting an ImageView that has a matching height of the visible field (from below the TabLayout to right above the navigation menu). When you hide action bar from there, it will have a gap on the bottom since there's no content to fill up the space of hidden action bar, unless you stretch the ImageView as you scroll up, which will result in wired stretched image :/
One possible solution I can think of is, if you want to add a view on the bottom of the fragment, I will set the actionbar padding to the view and when I scroll the screen, I will adjust the padding depends on the scroll offset so that I can always be on the bottom.
I tried to remove the left margin of the icon OR the right margin of the text (i dont really sure).
I added layout bounded so you can see the problem easily.
Im not using a Toolbar. So i look for solution for ActionBar.
In my code:
actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setCustomView(R.layout.action_bar_custom_layout);
actionBar.setHomeAsUpIndicator(ContextCompat.getDrawable(activity, R.drawable.ic_top_bar_back));
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_HOME_AS_UP);
}
R.layout.action_bar_custom_layout:
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/action_bar_custom_layout_textview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ellipsize="end"
android:maxLines="1"
andrpod:text="#string/notes"
android:gravity="left|center_vertical"/>
The best way is to make a customize AppBar.As it will be useful for you in future.
This will help you so much.
http://www.android4devs.com/2014/12/how-to-make-material-design-app.html
That's not your fault. This space is by default when you use the default toolbar. That's why making a custom toolbar will be good for you. See the image I also got the same problem as yours. If you see your layout in blue print mode you'll get to know that the place is by default.
I have 4 tabs in an actionBar. I'm using a RelativeLayout with an ImageView and a TextView as a customView for the tabs.
The actionBar overflows the width of the screen and the tabs become horizontally scrollable.
The actual width of my customView is not much, but the Tabs take up extra space (varies on different devices).
How can I restrict the tabs to occupy not more than 1/4th of the screen width.
Tab view width is based on content/yourImage size, so to make tab view width smaller, you have to control the content/Image size. You can use CustomView for your Tab by putting ImageView inside FrameLayout.
For detail please go to the answer for post ActionBar tabs set dynamic width according to screen width.
Instead of Using the ActionBar, you will need to either implement a ToolBar or something similar in your UI which you can control the width of that has Tab's inside it...
ActionBar is meant to take up the full width of the Screen whereas you can specify the width of a Toolbar yourself...
create a tab_layout.xml:
<?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"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:popupTheme="#style/Theme.AppCompat.Light.NoActionBar">
<!-- Add your Tabs here -->
</android.support.v7.widget.Toolbar>
Then just include this layout in your activity:
<include layout="#layout/tab_layout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
I want to display an Action Bar with a custom layout. The custom layout has three ImageViews, one in the centre and the other two on the left & right ends of the action bar. There must be no back button or action items.
Here is what I've used:
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
ActionBar.LayoutParams lp = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT);
View actionBarView = LayoutInflater.from(this).inflate(resource, null);
actionBar.setCustomView(actionBarView, lp);
The custom layout is inflated correctly, but does not occupy the full width of the screen. This happens on Android 4.4.2 (KitKat). On Gingerbread, the above arrangement works properly.
I've tried the recommended solutions in the following discussions:
ActionBar - custom view with centered ImageView, Action Items on sides
RelativeLayout/customview doesn't fill tab's width
However the problem remains. There has to be a way to force the layout to occupy the complete screen width.
I am using the Action Bar from the V7 AppCompat library. Does anyone know a way around this ??
EDIT 1:
Here is the XML layout file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/left_icon"
android:background="#drawable/leftbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:clickable="true"
android:onClick="leftButtonPressed"
android:hapticFeedbackEnabled="true"
/>
<ImageView
android:id="#+id/center_icon"
android:background="#drawable/centertitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>
<ImageView
android:id="#+id/right_icon"
android:background="#drawable/rightbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:clickable="true"
android:onClick="rightButtonPressed"
android:hapticFeedbackEnabled="true"
/>
</RelativeLayout>
Here is what it looks like on Gingerbread (2.3.5):
As you can see, its inflating correctly. And here's how it looks on Kitkat (4.4.2):
You can see that there's a slight gap on the right and the layout is not occupying the complete width.
I dont believe there's a problem with the layout (its inflating correctly on Android 2.3.5), but I could be wrong. Tell me if I'm crazy.
EDIT 2:
Thanks to Doctoror Drive and this post, I was able to get the result I wanted. I know its a bit strange: why use an Action Bar if you are not going to have any navigation or action items, but this is what I need for my particular problem. I have a TabHost with a stack of sliding Fragments in each tab, and the top LinearLayout (i.e. the Action Bar) needs to change its appearance when different Fragments are displayed.
EDIT 3:
Here are some more links for understanding this further:
https://groups.google.com/forum/#!msg/actionbarsherlock/i8JRUkBJjqk/ZzQV9xaM-lkJ
https://groups.google.com/forum/#!topic/android-developers/FGEi72thLzE
In my case I have solved the issue bypassing the invocation of the LayoutInflater.
So one should simply replace this code:
View actionBarView = LayoutInflater.from(this).inflate(R.layout.custom_actionbar, null);
actionBar.setCustomView(actionBarView, lp);
with this code:
actionBar.setCustomView(R.layout.custom_actionbar);
It's not a gap, it's a menu overflow button to the right. If you look closely you can see three dots button.
You've chosen the wrong theme because you can hardly see it.
Use Theme.Compat.Light.DarkActionBar if your ActionBar is dark and you need the light theme.
On devices that don't have physical menu button (mostly new ones) the menu overflow button is shown.
You can't remove it unless you disable menus.
You can use splitActionBarWhenNarrow uiOptions which will split the ActionBar so that the menu part will be at the bottom one, but that will be only for vertical orientation of medium screens and probably not what you need.
Take a look at the ActionBar Patterns doc and Menus UI doc
I'm using actionbarsherlock.
In order to get action modes on bottom(action modes on bottom) I use
android:uiOptions="splitActionBarWhenNarrow"
But I need to add a button to main action bar, so I use custom view.
View customNav = LayoutInflater.from(this).inflate(R.layout.custom_view, null);
getSupportActionBar().setCustomView(customNav, new
ActionBar.LayoutParams(Gravity.RIGHT));
getSupportActionBar().setDisplayShowCustomEnabled(true);
Here is custom_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="horizontal"
>
<ImageButton
android:id="#+id/btnMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_day"
android:onClick="onMoreClick"/>
It doesn't metter if I use ImageButton or ImageView with the same properties, so I'll talk about ImageButton.
If I use the ImageButton, I get what I want except of that background is gray.
If I add a line to previous custom_view.xml, in order to get transperent background(or use ImageView instead)
android:background="#00000000"
The alpha in icon will be "cropped" and size of button will change.
The question is. How to get button with such sizes as on first image(with default gray background) but with transperent background?
One of the ways to solve a problem is to make a color of the button's background the same as a color of actionbar and it will look like transperent, but I don't think it is a good solution.
You can use image with transparent background. It can be done in photoshop.
Have you considered using an ImageView instead of an ImageButton? Just set your required image in the imageview and use an onclicklistener to detect clicks like you would do for an ImageButton.
Additionally, you can also just specify the width of your ImageButton and set the padding as required (this is if you want to use android:background="#00000000").
i think that you can add to the button
android:background="yourimagethere"; or maybe android:background=NULL
and it will solve the problem