I'm trying to add AppCompat toolbar in my application but I am unable to display it in correct way. I followed steps from this tutorial: http://www.android4devs.com/2014/12/how-to-make-material-design-app.html but the toolbar overlaps ListView and parts of it are separated. I don't know how to describe it well, so here is the screen of my app:
Below I am attaching codes of toolbar and my view. Could you please help to fix the toolbar?
Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/toolbar_primary"
>
</android.support.v7.widget.Toolbar>
Activity view:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
tools:context="bak.grzegorz.pl.smm.Activities.MessageList">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
Remove default old actionbar by using NoActionBar theme
style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
AndroidMainifest.xml
<application
android:theme="#style/AppTheme"
... >
Remove padding on your RelativeLayout and add layout_below flag on ListView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="bak.grzegorz.pl.smm.Activities.MessageList">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<ListView
android:layout_below="#+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
in your MainActivity set toolbar as default actionbar
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
}
It overlaps because you are using a RelativeLayout, either use "layout_below" tag in your list view or use a LinearLayout. Also you have added padding in your main RelativeLayout so it will modify your toolbar's position.
Related
I'm trying to add a border that would look like this:
https://imgur.com/a/r8rHGQl
My toolbar.xml:
<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_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"
>
</android.support.v7.widget.Toolbar>
In my java code I do :
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
and inflating the menu.
If I try to nest the toolbar in relative/linear/constrains layout and add a View at the bottom I get the "android.widget.LinearLayout cannot be cast to android.support.v7.widget.Toolbar" error
Also tried to <include a layout with a View inside of it, but then the line appears in the middle of my toolbar and my title disappears.
Also including my menu.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/item1"
android:icon="#drawable/main_btn_info"
android:title="Item 1"
app:showAsAction="always"/>
</menu>
Create toolbar inside Linear Layout with a view
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"/>
<View
android:background="your border color"
android:layout_width="match_parent"
android:layout_height="2dp" />
</LinearLayout>
Include this in all your layouts.
Then find toolbar in activity using toolbar id instead of xml name
toolbar = findViewById(R.id.toolbar_main);
setSupportActionBar(toolbar);
I used this method:
<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:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Setting"
app:titleTextColor="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:background="#DDD" />
</LinearLayout>
Made another layout with the border and included it in every activity, I know it's not the best way to do it, but result is the same for now.
Try using the elevation parameter
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
app:title="Log In"
android:elevation="5dp"
app:titleTextColor="#000000" />
android:elevation="5dp"
This gives you out an basic elevation border bottom shadow for Toolbar
Hello why this bar in my activity is hidden?
This is my screenshot
How can I display it? and add icons and title in the toolbar
this is my activity users.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/scrollView"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/toolbar"
android:id="#+id/tb">
</include>
<android.support.v7.widget.CardView
android:id="#+id/cardview1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#android:color/white"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center_vertical"
android:background="#color/lignt_blue"
android:paddingLeft="25dp">
....
This is my activity users.java
public class Users extends AppCompatActivity {
private TextView editName;
private ImageView imageView1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.users);
Intent intent = getIntent();
String ref2 = intent.getStringExtra("ref");
Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
editName = (TextView) findViewById(R.id.editName);
imageView1= (ImageView)findViewById(R.id.imageView1);
}
this is my toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" />
From what i have researched, you have to go completely full-screen in order to alter it.
android:theme="#android:style/Theme.NoTitleBar.Fullscreen"
Use the below code to either remove or add the status/power bar thing(Its name escapes me):
To Hide the bar:
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
Or this to show the bar:
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
If that isn't the problem then by the looks of the comments your status bar is taking the colour of the colorPrimaryDark.
To fix this i would try to use this in your styles.xml:
<item name="android:colorPrimaryDark">#color/brand_color_dark</item>
OR:
Add this to the styles.xml
<item name="colorPrimary">#color/yourColor</item>
<item name="colorPrimaryDark">#color/yourColor</item>
And then remove this code from your XML file:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:fitsSystemWindows">true</item>
Give all of those methods a try and let me know if they resolve your problem.
I've never used the toolbar before, but starting with this new project I wanted to give it a try. However I'm already having troubles.
For all I know, I used appcompact toolbar to define the toolbar in my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!--toolbar-->
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/toolBar"
android:layout_width="match_parent"
android:layout_height="64dp">
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/toolbar"
android:id="#+id/container"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>
</RelativeLayout>
Also, in my activity I set it with getSupportActionBar()
protected void setupActionBar() {
// Set a toolbar to replace the action bar.
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("My custom toolbar!");
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
logger.debug("Toolbar Setted");
}
}
However result shows only an empty box with no title or functionality at all.
I don't understand what I'm missing out, the process should be pretty straight forward.
The style file I use is the following:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="toolbarStyle">#style/Widget.AppCompat.Toolbar</item>
</style>
Create a toolbar.xml file in your layout folder and place this code in it
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="56dp"
android:background="#color/colorPrimary"
android:id="#+id/toolBar" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Place what ever you want in your layout -->
</FrameLayout>
</android.support.v7.widget.Toolbar>
add this toolbar in your activity layout like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/white"
tools:context=".MainActivity">
<include layout="#layout/toolbar"></include>
<!-- Create your main layout here -->
</LinearLayout>
In your activity you can set your toolbar like this
Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
setSupportActionBar(toolbar);
I have following menu_main.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"
tools:context="Test">
<item
android:id="#+id/action_chat"
android:orderInCategory="200"
android:title="Search"
android:icon="#drawable/ic_chat"
app:showAsAction="ifTest"
></item>
<item
android:id="#+id/action_user"
android:orderInCategory="300"
android:title="User"
android:icon="#drawable/ic_drawer"
app:showAsAction="ifTest"></item>
</menu>
I can see two icon in App-bar (right aligned). Now I want to add an Icon on the left most place. How can i do that?
try it like this.
<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=".HomeActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="..."
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<TextView
android:id="#+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="..."
android:textColor="..."
android:textSize="..." />
<ImageView
android:id="#+id/..."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/..."
android:padding="15dp"
android:layout_gravity="start"
android:src="#drawable/..." />
<ImageView
android:id="#+id/..."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:padding="15dp"
android:src="#drawable/..." />
</android.support.v7.widget.Toolbar>
....
....
..all other layout files
</RelativeLayout>
now in your mainactivity
...
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
// Set a toolbar to replace the action bar.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
....
this will be your layout file for mainactivity
1st imageview will be at start
To add custom views for ActionBar, use setCustomView and provide it your own layout file or view. This will take over the space where the title of the actionbar would normally go.
Actually i want to put Action Bar menu into my layout given below, i am no getting how to put the Action bar menu into it. Can anyone help me in fixing this problem...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:id="#id/action_bar"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable Pin"
android:id="#+id/button"
android:layout_marginBottom="140dp"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/button2"
android:layout_alignStart="#+id/button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable Pattern"
android:id="#+id/button2"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="51dp" />
</RelativeLayout>
first you must use tool bar because action bar is deprecated
and for that add below code to your layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/back">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
/>
<!-- add your other layout component here -->
</LinearLayout>
and in your activity you must extend form appcompactActivity like below:
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.yourlayout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
and in the style.xml add this code: specially this parent="Theme.AppCompat.Light.NoActionBar"
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
You should use Toolbar, since ActionBar is deprecated. Add this in your layout file:
<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” />
Depending on your other project files, you may need to modify the styles.xml and your activity. Check out this link for more info.