Currently, I'm developing an app but I'm a beginner. I have added some activity layouts but every time I start the app a default toolbar appears. How do I customize this toolbar without "destroying" the implemented layouts?
toolbar.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:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="4dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_logo"
android:padding="20dp"
android:foregroundGravity="center"/>
</android.support.v7.widget.Toolbar>
MainActivity.java (extends RxAppCompatActivity)
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
Toolbar toolbar = findViewById(R.id.my_toolbar);
setSupportActionBar(toolbar);
}
The toolbar variable is always null - why?
Add the XML code in your activity XML file. Since the tag is not included in your activity_main.xml, you will always get a NullPointerException when you try to find it by id.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.screens.MainActivity">
<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="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="4dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_logo"
android:padding="20dp"
android:foregroundGravity="center"/>
</android.support.v7.widget.Toolbar>
<!--Rest of your XML-->
</androidx.constraintlayout.widget.ConstraintLayout>
Note: I used ConstraintLayout just for example, you can use any layout you like (although ConstraintLayout is pretty awesome!)
By the way, since you are using ButterKnife, you can easily bind the view with #BindView(R.id.my_toolbar), instead of using findViewById().
Related
I know this question has been asked before, but the solutions offered have not helped me thus far.
I have a basic layout:
activity_main.xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/my_toolbar"
layout="#layout/test_toolbar"/>
<android.support.design.widget.TabLayout
android:id="#+id/maths_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/maths_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
the include layout:
test_toolbar.xml
<?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="match_parent">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Hello workd"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
I want to find the TextView inside my include layout.
Code I've tried so far but hasn't worked:
Toolbar toolbar= findViewById(R.id.test_toolbar);
TextView toolbarTitle= toolbar.findViewById(R.id.tv_title);
toolbarTitle.setTextColor(getResources().getColor(R.color.red));
How can I find the views inside the include layout?
Very simple mistake:
In your code, you do findViewById with the wrong ID. The id needs to be the id of the include layout.
Change this:
Toolbar toolbar = findViewById(R.id.test_toolbar);
To this:
Toolbar toolbar = findViewById(R.id.my_toolbar);
First of all , I know that There are too many answer here.But I have tried probably all of them.
Here is links :
How to display custom view in ActionBar?
How to make a Custom View(EditText) on the actionbar automatically selected?
Some others web-sites :
http://wptrafficanalyzer.in/blog/adding-custom-action-view-to-action-bar-in-android/
http://www.sanfoundry.com/java-android-program-add-custom-view-actionbar/
I want to make a custom action bar which has a Edittext. Here is my code.
But all my tried is fail. Emuletor or real phone crushing all my running.How can I fix it ?
My main_activty :
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayList<String> data = new ArrayList<>();
data.add("hi");
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
actionBarCustomView = findViewById(R.id.actionbar_in_toolbar); //wrapper because layout is included
autocompleteTextView = actionBarCustomView.findViewById(R.id.actionbar_search);
autocompleteTextView.clearFocus();
autocompleteTextView.setAdapter(new AutocompleteListViewAdapter(this, R.layout.activity_main, data, this));
}
}
my layout_part_of_design : Missing classes
The following classes could not be found:
- android.support.design.widget.AppBarLayout (Fix Build Path, Edit XML, Create Class)
- android.support.design.widget.CoordinatorLayout (Fix Build Path, Edit XML, Create Class)
Tip: Try to build the project. Tip: Try to refresh the layout.
There is not any code or different something.I am using 21 API.
and Render problem :
Couldn't resolve resource #color/primary Tip: Try to refresh the layout.
Activity_main xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="#color/primary"
android:focusable="true"
android:focusableInTouchMode="true"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp">
<AutoCompleteTextView
android:id="#+id/actionbar_search"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:hint="Some Hint"
android:background="#color/primary_dark"
android:drawableLeft="#drawable/ic_search_white_24dp"
android:drawableStart="#drawable/ic_search_white_24dp"
android:gravity="center_vertical"
android:padding="5dp"
android:singleLine="true"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:textSize="#dimen/bigger_text_size_14sp" />
</RelativeLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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">
<include
android:id="#+id/actionbar_in_toolbar"
layout="#layout/toolbar.xml" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:background="#android:color/white"
tools:ignore="MergeRootFrame" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
You need a custom toolbar for sure.
First, let's create custom xml for toolbar.
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="#color/primary"
android:focusable="true"
android:focusableInTouchMode="true"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp">
<AutoCompleteTextView
android:id="#+id/actionbar_search"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:hint="Some Hint"
android:background="#color/primary_dark"
android:drawableLeft="#drawable/ic_search_white_24dp"
android:drawableStart="#drawable/ic_search_white_24dp"
android:gravity="center_vertical"
android:padding="5dp"
android:singleLine="true"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:textSize="#dimen/bigger_text_size_14sp" />
</RelativeLayout>
then place this toolbar in your activity layout (includes fragment)
activity_something.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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">
<include
android:id="#+id/actionbar_in_toolbar"
layout="#layout/toolbar.xml" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:background="#android:color/white"
tools:ignore="MergeRootFrame" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
then in activity (written in Java), set as a custom toolbar, find views by Id and do all the stuff you need
MyActivity.java
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
actionBarCustomView = findViewById(R.id.actionbar_in_toolbar); //wrapper because layout is included
autocompleteTextView = actionBarCustomView.findViewById(R.id.actionbar_search);
autocompleteTextView.clearFocus();
autocompleteTextView.setAdapter(new AutocompleteListViewAdapter(this, R.layout.item_some_layout, data, this));
set this in your style themes.
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
app.gradle
minSdkVersion 16
targetSdkVersion 22
compileSdkVersion 27
buildToolsVersion '27.0.3'
...
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
implementation com.android.support:design:25.3.1
...
this should work.
I have a Toolbar with a TextView inside with match_parent to center the text but every time I do so it gets bigger than the screen and hides the text.
Here you have a capture of it running
How this looks like in the preview
And finally how I implement it:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ToolBarStyle" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/title_activity_anuncios" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.constraint.ConstraintLayout>
</LinearLayout>
check your theme on style or set activity theme from the manifest
android:theme="#android:style/Theme.Translucent.NoTitleBar"
If activity theme is correct then you can check your activity >> onCreate method.
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setTitle("Your Title");
}
Put this in your toolbar
app:contentInsetStart="0dp"
Right now, I have a normal looking Toolbar. What I want to do is add a custom layout between the Toolbar and the TabLayout, as shown in the picture below:
On the left is what my Toolbar looks like now, and on the right is what I want it to look like.
As you can see, I want to add an ImageView and two TextViews to the layout.
How can I achieve this?
Here is my current layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
AppBarLayout extends LinearLayout, so you can add any number of views to your AppBarLayout: there's no reason to add the views specifically to your Toolbar.
You'll want to make sure you use the same layout_scrollFlags as your Toolbar if you want them to scroll the same.
Toolbar is just a ViewGroup, you can customize is as much as you want.
Try this :
<android.support.v7.widget.Toolbar
style="#style/ToolBarStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material">
<ImageView
android:layout_width="wrap_content"
android:contentDescription="#string/logo"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"/>
This should bring your imageView in center of toolbar.
Hello so I want to achieve this with the toolbar and I have seen many tutorials which explain how to do it with all the layout in one XML file.
However, I do not know how to solve this problem in the following use case
I have an XML file which defines my toolbar
<?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="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:paddingTop="#dimen/app_bar_top_padding"
app:theme="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Then I include this toolbar in an activity layout (linear layout root) which contains a frame layout as a container for a fragment
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
Now this fragment is inflated dynamically and the fragment is a recycler view.
Can someone point me into how I link CoordinatorLayout with this common arrangement?
Thanks !
EDIT Have solved this issue but let me know if there is a mistake
My Activity Layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>
My Toolbar layout which has the scroll flags
<?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_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle">
</android.support.v7.widget.Toolbar>
That shouldn't be a problem as long as the Toolbar is added to a CoordinatorLayout, wrapped in an AppBarLayout. If you've tried it and still have problems, show the code you've tried and we can work through that.