I am new in android How achieve custom action bar like given image.
enter image description here
please help me for making this one.
You can simply use a Toolbar for the action bar.
The toolbar is a ViewGroup which you can add any custom view to it.
example:
<LinearLayout
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="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<YourViewHere/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
and in your activity :
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
// Find the toolbar view inside the activity layout
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Sets the Toolbar to act as the ActionBar for this Activity window.
// Make sure the toolbar exists in the activity and is not null
setSupportActionBar(toolbar);
}
Related
I am working on Android project and I've created a new Settings Activity from Android. When I created the activity, and tried running, it the Settings Activity that Android Studio created, didn't include an action bar for some reason. I googled around and found that it seems to be a common thing and add the action bar manually, so I've done the following:
private void setupActionBar()
{
getLayoutInflater().inflate(R.layout.toolbar, (ViewGroup)findViewById(android.R.id.content));
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null)
{
// Show the Up button in the action bar.
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
I found that the first preference header is hidden under the action bar, again Googled around, found you need to add padding to the list view which I did using the following in the onCreate()
getListView().setPadding(0, 180, 0, 0);
Doing the above seems a little odd, and it only works on the initial settings activity screen with the list of preference headers. Once you click on the preference headers to view the settings, the first setting is hidden under the action bar as shown in the screenshot below:
I think I figured it out.
I created a toolbar XML as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/settings_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Then in the SettingsActivity in the setupActionBar method as below:
private void setupActionBar()
{
ViewGroup rootView = (ViewGroup)findViewById(R.id.action_bar_root);
View view = getLayoutInflater().inflate(R.layout.settings_toolbar, rootView, false);
rootView.addView(view, 0);
Toolbar toolbar = (Toolbar)findViewById(R.id.settings_toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
// Show the Up button in the action bar.
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
I suggest to remove your Action Bar and make a custom toolbar which will be described by other layout file and will contain a widget that cancels your current activity.
For example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relLayout1">
<include layout="#layout/snippet_comments_toolbar"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relLayout2"
android:layout_below="#+id/relLayout1"
android:layout_marginBottom="60dp">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listView"></ListView>
</RelativeLayout>
and then snippet_comments_toolbar which is that toolbar I am talking about:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/white_grey_border_bottom"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/profileToolBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="20dp"
android:layout_centerVertical="true"
android:id="#+id/backArrow"
android:src="#drawable/ic_backarrow"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Comments"
android:layout_toRightOf="#+id/backArrow"
android:layout_marginRight="15dp"
android:textSize="20sp"
android:textColor="#color/black"
android:layout_centerVertical="true"
android:id="#+id/tvNext"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</merge>
I know you can add an icon image to the app bar, however I was wondering if there is a way to put a larger logo image in the app bar on Android. The picture attached has it behind the app bar but I'm trying to get it inside the app bar. Is this possible?
1) Use latest Android Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Place your ImageView and Image-->
<!-- mention image size-->
</android.support.v7.widget.Toolbar>
Example code:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<LinearLayout
android:id="#+id/back_menu_ll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_logo"
/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textColor="#color/title_first_textcolor"
android:textSize="#dimen/abc_text_size_title_material"
android:gravity="left"
/>
</android.support.v7.widget.Toolbar>
2) You can set logo programmatically:
Toolbar tool_bar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(tool_bar);
tool_bar.setLogo(R.drawable.image);
For more information about Toolbar, check this link: http://developer.android.com/reference/android/widget/Toolbar.html
For the latest API xml should be,
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
Activity should be,
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
toolbar.setLogo(R.drawable.ic_call_black_24dp);
setSupportActionBar(toolbar);
}
As your image is large and rectangle you can set it in background of your action bar :
final ActionBar actionBar = getActionBar();
BitmapDrawable background = new BitmapDrawable (BitmapFactory.decodeResource(getResources(), R.raw.actionbar_background));
actionBar.setBackgroundDrawable(background);
For this you can create one activity say "BaseActivity" and add snippet in onCreate method of it and extend that activity in your all activity where you want to show your change
Or you can have your different square logo like app icon and set it to your action bar icon.
public BaseActivity extends Activity{
#override
public void onCreate(Bundle bundle){
/// add snippet
}
}
yourActivity/yourActivities extends BaseActivity
You need to add imageview inside the toolbar
I want my button that opens navigation drawer to be displayed on the toolbar first in the left but I am unable to place it before the title. I tryed set android:gravity="left" but that does not seem to help. Can anyone help me with this?
Here is my toolbar xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="2dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:id="#+id/imageView"
android:src="#drawable/ic_menu_white_24dp"
android:gravity="left"
/>
</android.support.v7.widget.Toolbar>
It was mistake to do it manually. I should use ActionBarDrawerToggle.
You can use one of the following two methods:
First, in xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:navigationIcon="#drawable/ic_menu_white_24dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
Second, inside activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_child_swipe);
Toolbar toolbar = (Toobar) findViewById(R.id.toolbar)
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_menu_white_24dp);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//do something here
}
});
Related Questions
CollapsingToolbarLayout | Scrolling and layout issues
Backgroud
I want to use 2 different fragments that will allow me to change the layout based on orientation and screen size
Header Image (Currently just an ImageView)
Scrollable content
Issues
The CollapsingToolbarLayout does not allow me to expand the Toolbar to see the full Header Image
It shows a majority of the image, but not all. Top is cut, but the bottom is visible.
The Toolbar is set to Pin but it is hidden when scrolling
Just the Header Image should disappear, but instead my whole Appbar gets hidden
When scrolling to view the Expanded Toolbar there is an empty view until the Expanded Toolbar reaches its max height.
After both the Expanded Toolbar and the Toolbar itself become hidden
The Up Arrow does not show up in the Toolbar
Code
Layout.xml
<android.support.design.widget.CoordinatorLayout 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="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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:expandedTitleMarginEnd="16dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/download"
android:scaleType="centerCrop" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/anim_toolbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<fragment
android:id="#+id/detail"
android:name="<package>.<fragment_name>"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
OnCreate
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
}
1
2
3
4
5
6
Question 1
Add android:fitsSystemWindows="true" to your AppBarLayout, CollapsingToolbarLayout, and to your ImageView.
I'm guessing a part of your image is below the status bar (due to these lines being missing) which is why you can't see the top of the image.
Question 2
collapseMode="pin" only affects how the Toolbar reacts to collapsing (hence why it is called collapseMode and not scrollFlags).
In almost all cases when using CollapsingToolbarLayout, you should be using scroll|exitUntilCollapsed for your scrollFlags - this keeps the collapsed Toolbar visible even when you scroll downward.
Question 3
This is due to using scroll|enterAlways. Change your flags as per #2
Question 4
As mentioned in the answer to your related question, you need to call getSupportActionBar().setDisplayHomeAsUpEnabled(true); to show the Up button:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
}
Remove app:contentScrim="?attr/colorPrimary" from your layout XML in CollapsingToolBarLayout tag. It will show the back button in toolbar
I have an xml that I use with so many activities with fragments file but my problem is that I can't display the text I want in the toolbar, I use that xml that way because I have a navigation drawer and I needed to handle somethings so I had to do it that way.
my xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".StatusActivity"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material" />
</RelativeLayout>
One of my activities:
public class GroupChatActivity extends ActionBarActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_base_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
ActionBar actionBar = getSupportActionBar();
actionBar.setTitle("Groups history");
Aniways.init(this);
if(savedInstanceState == null)
{
FragmentManager manager = getSupportFragmentManager();
Fragment fragment = GroupChatFragment.newInstance(getIntent().getIntExtra("uid", 0));
manager.beginTransaction().add(R.id.frame_container, fragment).commit();
}
}
}
as you can see I try to set title to the action bar but it doesn't work.
getSupportActionBar().setDisplayShowTitleEnabled(true);
Setting,
app:title="#string/my_title"
within the declaration of the the android.support.v7.widget.Toolbar, hard codes the title in the toolbar.
To set the title programatically,
Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar);
toolbar.setTitle("my title");
setSupportActionBar(toolbar);
in your activity class.
Try this .. this method works for me..!! hope it may help somebody..!!
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:singleLine="true"
android:text="Toolbar Title"
android:textColor="#android:color/white"
android:textSize="18sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
EDIT
You can also use this.
setSupportActionBar(toolbar);
if (getSupportActionBar() != null)
getSupportActionBar().setTitle("Toolbar title");
I spent about a day looking for the cause of the issue. Neither supportActionBar?.title = "SomeTitle" nor supportActionBar?.setDisplayShowTitleEnabled(true) did not work, nor hacks with custom toolbars from answers here looked good.
My activity is using CollapsingToolbarLayout but not displaying any title, nor label from manifest, nor dynamically set one. But the sample ScrollingActivity (New - Activity - ...) displayed the title.
Finally I set up a sample project, copied MyActivity and ScrollingActivity and looked through the diff.
layout_height both of the AppBarLayout and CollapsingToolbarLayout must be set to match_parent or fixed size. Thats all. See working code below.
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#id/toolbar"
app:contentScrim="?attr/colorPrimary"
>
<androidx.appcompat.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"
app:layout_collapseMode="pin"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
Try toolbar.setTitle('Groups history');
getActionBar().setTitle("Groups History");
or if you are using AppCompat libraries;
getSupportActionBar().setTitle("Groups History");
I did a custom action bar.
Layout iguepardos_action_bar.xml with this code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blanco"
android:minHeight="?attr/actionBarSize">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:singleLine="true"
android:text="Toolbar Title"
android:textColor="#color/naranja"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
In my Class extended AppCompatActivity I had this:
protected void onCreate(Bundle savedInstanceState) {
....
....
getSupportActionBar().setDisplayShowCustomEnabled(true); // is for specify use custom bar
getSupportActionBar().setCustomView(R.layout.iguepardos_action_bar); // my custom layout
getSupportActionBar().setDisplayHomeAsUpEnabled(true); // Button for come back
View mCustomView = getSupportActionBar().getCustomView(); // Set the view
TextView TitleToolBar = (TextView) mCustomView.findViewById(R.id.toolbar_title); // find title control
TitleToolBar.setText("The Title Show"); // Set the Title
}
I actually had to get the toolbar_title to set the text into each different activity:
toolbar = findViewById(R.id.toolbar);
toolbarTitle = findViewById(R.id.toolbar_title); //<----- here
toolbarTitle.setText(getString(R.string.my_activity_toolbar_title));
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
if your title color is white and the toolbar is also white, you will not differentiate it. So try to change the toolbar color
Given below code worked me:
Toolbar myToolBar = findViewById(R.id.my_toolbar);
setSupportActionBar(myToolBar);
getSupportActionBar().setTitle(getString(R.string.toolbar_title_note));
First I tried with getSupportActionBar().setDisplayShowTitleEnabled(true); and then without it. It worked for both of the cases.
These are gradle settings for my project:
minSdkVersion 16
targetSdkVersion 30
compileSdkVersion 30
buildToolsVersion "30.0.3"