Hi I have an activity with back button enabled at the left side of the activity. Actually my activity is AppCompatActivity so I used toolbar at the top of the activity layout file. Then I changed home indicator icon programmatically. But it is not looking very well. I also used different variant for different density. But I don't know why?
Here is my code
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ll_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
//////
/>
<android.support.constraint.ConstraintLayout>
Here is my activity onCreate
#Override
public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.profileedit);
mTopToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mTopToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(ContextCompat.getDrawable(this, R.drawable.icon_back_to_home));
setTitle("");
}
here is my problem
The home button icon I have set is looking bigger. I also checked the different drawable size folder that also not the issue.
Cereate back button image with different size of icon.
Go to res -> new -> Image Asset.
Select Icon Type -> Actionbar and Tab Icons.
Asset Type -> Image and select your icon from system.
Related
I am writing an AccessibilityService, which opens a fullscreen view via the WindowManager on a certain event. I am currently designing the view to be opened. I'd like to add a navigation bar at the top of this view, as it is automatically added by Android Studio when you create an empty activity, for example. This navigation bar should not contain any buttons or the like. However, it should have exactly the same size as it is given to a default activity by Android or Android Studio. Below is the result I would like to have. I don't know with which xml element I can add this bar/navigation bar.
Just add this code to your activity :
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/HeaderBar"
app:theme="#style/ActionBarThemeOverlay"
app:popupTheme="#style/ActionBarPopupThemeOverlay"
android:elevation="4dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DataCollector"
android:id="#+id/toolbar_title" />
</toolbar>
And then in your activity in onCreate() method add this :
private Toolbar mTopToolbar;
mTopToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(mTopToolbar);
I need to add an image to the navigation drawer toolbar/actionbar. A small round image that appears on the right of the menu icon and left of the activity title.
I also need to change the background of the toolbar/actionbar to my own custom image.
Is this possible and if yes how do I accomplish this in my android app?
For anyone confused, OP is using Android Studio's NavigationView Activity and not an Empty Activity.
Image to the right of the Hamburger menu icon and to the left of the Title is achieved like this:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if (getSupportActionBar() != null) {
getSupportActionBar().setDisplayShowTitleEnabled(false); // hide built-in Title
// Setting background using a drawable
Drawable toolbarBackground = getResources().getDrawable(R.drawable.ic_menu_gallery);
getSupportActionBar().setBackgroundDrawable(toolbarBackground);
}
Now that we've hidden the title, we're going to add our own title TextView and icon ImageView to the toolbar, this would be your app_bar_main.xml layout (res/layout).
<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">
<ImageView
android:id="#+id/my_custom_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_share"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Custom Title"
android:id="#+id/my_custom_title"
android:layout_toRightOf="#id/menu_icon"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Now, you can reference my_custom_title and my_custom_icon and add whatever title and icon you want (you may have to tinker with the layout, I'm just pointing you in the right direction).
TextView myCustomTitleTV = (TextView) findViewById(R.id.my_custom_title);
myCustomTitleTV.setText("My Custom Title");
I want to extend the up button on the actionbar to include the activity name. For example, instead of only being able to click the arrow to go back, I could also click the words next to it. I know some apps allow this but I haven't seen any instructions on how to do it.
Here is an example of what it currently allows:
Here is an example of what I want it to do:
What you can do is create a custom layout in your toolbar. Then when the user clicks on the view containing the title text and the up button, you handle the logic yourself.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:contentInsetStart="72dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!--Contains your up button and title text-->
<SomeCustomLayout
android:id="#+id/customLayout"
android:layout_width="match_parent"
android:layout_width="wrap_content" />
</android.support.v7.widget.Toolbar>
Then get the view in your code with
Toolbar toolbar = findViewById(R.id.toolbar);
SomeCustomLayout customLayout = toolbar.findViewById(R.id.customLayout);
customLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// You'll probably want to fire off
// an intent here to go back to the parent activity
}
});
I am migrating to the new Toolbar feature in appcompat v21 from the previous action bar. I still want to keep the logo on the top left part of the actionbar (toolbar). For doing I added in my layout the support toolbar and I created a new thene for it.
app:theme="#style/NewToolBarStyle"
I am adding the log programmatically as there is some logic in the app for this.
actionBar.setLogo(R.drawable.myicon);
Referring to my new style (empty for the moment):
<style name="NewToolBarStyle" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</style>
However the result is showing an image the is too big for what I am looking for, and I am wondering how to reduce the size of the icon.
Is there any way (style, layout or programming) that I can reduce the logo size?
There is no logo icon in material design : http://www.google.com/design/spec/layout/structure.html#, so I suppose this is not well tested scenerio - or simply (broken) by design. You can add ImageView as a child widget of your toolbar and use it to show any image. It will show on the right of all the other internal widgets - like spinner - but list navigation mode is also deprecated.
If you insist on having logo then my workaround for this is to make sure toolbar is of fixed height - this takes care of wrong icon height. Even after that you will have to set setAdjustViewBounds to true on toolbars internal logo ImageView - otherwise it will create large left and right padding.
This is how my toolbar looks like (height set to ?attr/actionBarSize):
<?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:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
reference it inside your activity layout using:
<include layout="#layout/toolbar_actionbar"/>
dont change layout_height in include.
The second step is to setAdjustViewBounds(true) on logo icon:
Drawable logo = getDrawable(iconRes);
toolbar.setLogo(logo);
for (int i = 0; i < toolbar.getChildCount(); i++) {
View child = toolbar.getChildAt(i);
if (child != null)
if (child.getClass() == ImageView.class) {
ImageView iv2 = (ImageView) child;
if ( iv2.getDrawable() == logo ) {
iv2.setAdjustViewBounds(true);
}
}
}
Following the suggestiong give by #brightstar I would like to develop further the answer.
The best way to control the size and position of the Logo in the new Toolbar is by actually not using it. The concept is completely different, what you need to do is create a toolbar from scratch. So you need to make a decision, either you use the layout given by the actionBar or include everything new including the title.
If you stop using the logo but you keep using the title you finally will see that the logo is over the title creating and ood situation.
So, an example of what to do is the following:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/action_bar_background"
app:theme="#style/NewToolBarStyle"
android:minHeight="?attr/actionBarSize" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="17dp"
android:textSize="20sp"
android:layout_toRightOf="#+id/logo_image"
android:text="#string/app_name"
android:textColor="#color/white" />
<ImageView
android:id="#+id/logo_image"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:scaleType="centerInside" />
</RelativeLayout>
</FrameLayout>
You create this file as my_toolbar.xml. Notice the following details:
I did not include an src of my ImageView because I am changing it dinamically. But works adding it.
I used a relative layout for being able to center the icon and the text.
I need still to include the Home button.
Later on as described by #brightstar you need to include in the top of your layouts by an include, however.... remember to add an id so that you can refere all your other Views to it.
<include layout="#layout/toolbar_sharemup"
android:id="#+id/including" />
I am attempting to create a drop-down menu like the one found in the Google+ app. A screenshot can be found below. I have looked at Spinners and Popup Menus, but neither of these fit exactly for what I am trying to create. The first image shows the closed menu, and the second shows what the drop-down menu looks like when opened.
http://www.droid-life.com/wp-content/uploads/2014/05/google-plus-4.4-1.jpg
The menu should not appear inside the action bar, and when scrolling, the menu displaying the selected option remains at the top of the screen.
Sorry I don't have enough reputation to add comments, So I'll post as an answer, hope it'll help anybody. This is just my alternative solution trying to achieve a ui like google plus app as you've posted.
My current solution is to use a toolbar beneath the actionbar(which is a toolbar also set as actionbar). Then I add onClickListener for the toolbar. When the toolbar is tapped, a recyclerview will be visible. Which the recyclerview can be populate by dynamic data or custom data you put in the layout. Example code :
main_layout.xml
<LinearLayout .... >
// the actionbar toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/action_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/toolbarStyle"/>
// second toolbar act as the spinner
<android.support.v7.widget.Toolbar
android:id="#+id/dropdown_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
style="#style/dropdownToolbar">
..... // add a spinner indicator (imageview)
</android.support.v7.widget.Toolbar>
//separator line
<View
android:id="#+id/separator_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:background="#adacad"/>
// two child overlaps in framelayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
// the visible layout example
<android.support.v7.widget.RecyclerView
android:id="#+id/default_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
// the layout that is visible when toolbar is tapped
// this is spinner content, put anything u want here
<android.support.v7.widget.RecyclerView
android:id="#+id/dropdown_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>
</LinearLayout>
This will give u a full width and length layout. the dropdown_recyclerview content depends on what u want. I added an imageview to indicate if the fake spinner is open or close. Sample code for java :
MainActivity.java
//action toolbar
Toolbar actionToolbar = (Toolbar) findViewById(R.id.action_toolbar);
setSupportActionBar(actionToolbar);
RecyclerView dropdownRecyclerView = (RecyclerView) findViewById(R.id.dropdown_recyclerview);
//second toolbar
Toolbar dropdownToolbar = (Toolbar) findViewById(R.id.dropdown_toolbar);
//Listen for toolbar onClick
dropdownToolbar.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//toggle visibility of dropdown spinner
if (!SHOW_SPINNER_FLAG) {
//set indicator close / open
dropdownRecyclerView.setVisibility(View.VISIBLE);
} else {
//set indicator close / open
dropdownRecyclerView.setVisibility(View.VISIBLE);
}
}
});
Later on you can customized the layout and add some animation to reveal the fake spinner layout. If there's other way, please share. For the moment this is what i use in my app and it works fine for me. Sorry for my poor english.
example app image