I want to create a Android ActionBar which looks like the following.
How can I build such a ActionBar. Is it possible to build it with Android material Design?
I would use the new ToolBar from Android Design Support Library
http://android-developers.blogspot.it/2015/05/android-design-support-library.html
Using ToolBar instead of ActionBar will give you more control on the elements themselves.
You can find a good article here:
http://www.android4devs.com/2014/12/how-to-make-material-design-app.html
app_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3F51B5"
android:theme="#style/ThemeOverlay.AppCompat.Dark" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:id="#+id/tabLayout"/>
</FrameLayout>
</android.support.v7.widget.Toolbar>
main_activity_layout.xml
<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="wrap_content"
tools:context=".MainActivity">
<include layout="#layout/app_bar" />
</RelativeLayout>
main_activity_onCreate()
toolBar = (Toolbar) findViewById(R.id.appBar);
toolBar.setTitle("Titolo");
setSupportActionBar(toolBar);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user_group_1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user_group_2));
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
Technically you could stitch together such a layout with multiple elements. For example you have a header layout containing a TabLayout on the left and a Toolbar on the right side, instead of using the standard ActionBar.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<android.support.v7.widget.Toolbar
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
This example uses the AppCompat v7 and the Design Support library.
You may style the Views in a way (e.g. same background color) such that it looks as if its one single UI element.
Related
I tried following a tutorial (https://guides.codepath.com/android/using-the-app-toolbar#custom-title-view) on creating a custom TextView inside a Toolbar. What I want to do is have the ability to dynamically change the text inside the TextView using Java. However, the problem is that I can't and no error messages are being displayed.
Toolbar code in XML:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Test1"
android:textSize="16sp"
android:textColor="#color/textColor" />
</androidx.appcompat.widget.Toolbar>
Toolbar Java code in the Activity Class:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
TextView toolbarTitle = toolbar.findViewById(R.id.toolbarTitle);
toolbarTitle.setText("Test");
Styles.xml:
<!-- 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/colorSecondary</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
A simple toolbarTitle.setText() should do the job but for some unknown reasons it doesn't. Even if I remove the android:text from the XML code and use setText() right after the Java code it still doesn't work.
Does this mean that TextViews inside Toolbars are immutable?
Thanks!
Edit 1:
So I managed to find the problem but haven't particularly found a solution. The problem is caused by the Data Binding in the activity_main.xml file. Once the all code related to Data Binding is removed, I'm able to use setText() the way I want. Why is this causing a problem?
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<layout
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=".activity.MainActivity">
<data>
<variable
name="VM"
type="com.tahmidu.app.view_model.IMainActivityNavViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/textColor" />
</androidx.appcompat.widget.Toolbar>
<FrameLayout
android:id="#+id/audioMainFragment"
android:name="com.tahmidu.app.fragment.AudioFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorSecondary"
app:itemIconTint="#color/bottom_navigation_color"
app:labelVisibilityMode="unlabeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation_main" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
TextViews inside toolbars are definitely not immutable. Maybe the problem is where you are calling the textview.setText() method. It should be after after the view is created, so on onCreate() or onViewCreated()
Solution (Suggested by Nabil): Bind the text. Ensure you set the LifecycleOwner() method otherwise the UI would not update. setText() stops working if you use Data Binding from the looks of it.
I have been having trouble with my action bars, I got it set up on my xml front end like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:label="#string/dadosCadastrais"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme" />
And on the Java activity:
Toolbar toolbar = findViewById(R.id.toolbar4);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
I have already tried changing the theme the app uses, the theme the layout uses and even the activities theme to allow/forbid a toolbar to show up. Even though my java class extends AppCompatActivity it does not show!
PS: Got it working now! The problem was the setup on java code itself, there was an hidden method which was overwritting my setup, thx for the help!
Make sure your activity inflates the correct layout containing your ToolBar.
protected void setContentView() {
setContentView(R.layout.your_activity_layout);
}
Your activity layout should contain your ToolBar. Here is a code example:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
</LinearLayout>
I use the standard Android Toolbar android.support.v7.widget.Toolbar
https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
I want to place this toolbar at the bottom of my screen => I want the shadow at the top and not at the bottom of the toolbar.
How can I do this?
Thanks !
You can define the following gradient in your drawables folder
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#000"
android:angle="90"
/>
</shape>
And then use it in your layout as follows
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom">
</android.support.v7.widget.Toolbar>
<View android:background="#drawable/drop_shadow_tab"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_gravity="bottom"
android:layout_marginBottom="50dp"/>
</FrameLayout>
Probably this is what you wanted. :)
I am stuck on a very interesting problem that I have tried to solve for quite some time.
I have added toolbars to views in Android before, but have never faced the below problem.
When accessing the Toolbar directly, or assigning it by setSupportActionBar(myToolbar) The toolbar itself will not be modifiable in any way. I even tried setting the view to gone, and it would not work. As well, the toolbar has nothing on it. No app name, no hamburger menu or back arrow, nothing.
Relevant code posted below:
BaseActivity.java
#Nullable
#BindView(R.id.app_bar)
protected Toolbar mToolbar;
private Unbinder unbinder;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResource());
unbinder = ButterKnife.bind(this);
if(mToolbar != null) {
Timber.tag("Toolbar").d("Toolbar is not null. Oh glorious day");
setSupportActionBar(mToolbar);
}
}
base_drawer_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical">
<include
android:id="#+id/app_bar"
layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true">
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:clipToPadding="true"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
styles.xml
<resources>
<!-- 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="android:windowBackground">#color/colorDefaultBackground</item>
</style>
</resources>
The application tag in my manifest also has android:theme="#style/AppTheme" set
The toolbar itself is not null in the view (have already checked that)
And it is not the SDK itself, as I opened up a project using the same method of creating a support action bar and it worked fine.
Am I missing something really obvious here?
Solved it!
After looking around a bit, I found that my child class was actually calling setContent, as well as my parent class, overriding any changes to the view I had made.
Just a simple oversight on my part.
Ive got a Layout where I have viewpager with sliding tabs.Now I want to make the upper part of my layout transparent so I get the effect that the activity before it is kinda visible.
It should look like this :
My Layout :
<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"
tools:context=".Main">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
android:layout_marginTop="200dp" //THIS part should make the upper piece transparent
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<com.kas.SlidingTabs.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/colorPrimary"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
></android.support.v4.view.ViewPager>
My Apptheme I used in this Activity :
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
I allready tried #android:color/transparent as background in LinearLayout but its not helping.I also tried this solution https://stackoverflow.com/a/8831226/4035864
But then my logcat says :You need to use a Theme.AppCompat theme (or descendant) with this activity.
EDIT:
ToolbarLayout :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/colorPrimary"
android:elevation="2dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
xmlns:android="http://schemas.android.com/apk/res/android" />