Creating Custom Action bars for each activity - java

I need to create custom title bars for each and every Screen in my android application. For an example, in GMail, Yahoo Mail android applications, have you noticed that their title bar differs from activity to activity? This is what I need.
I went through number of tutorials, unfortunatly, they are to replace the title bar of the entire application with one custom title bar.
Following is what I have tried
Cuatom_title.xml
<?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" >
<TextView
android:id="#+id/bileeta_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="#string/_title"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#579bef"
android:textSize="50sp" />
<EditText
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="right"
android:layout_marginRight="30dp"
android:ems="10"
android:hint="#string/search_hint"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
MainActivity.java
//Setting custom title bar
this.requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.activity_home);
//Set the custom title bar
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title);
But this just generated errors.
How can I create custom title bars for each and every activity?

in your onCreate()
ActionBar actionBar = getActionBar(); //for higher version
actionBar.setDisplayShowCustomEnabled(true);
View customView=getLayoutInflater().inflate(R.layout.yourlayout, null);
actionBar.setCustomView(customView);
OR
ActionBar actionBar = getSupportActionBar(); //to support lower version too
actionBar.setDisplayShowCustomEnabled(true);
View customView=getLayoutInflater().inflate(R.layout.yourlayout, null);
actionBar.setCustomView(customView);

In your manifest file, while declaring activity you can add this line android:label="#string/your_title_string"
Example:
<activity
android:name=".MyActivity"
android:label="#string/your_title_string" >
</activity>

Related

Bottom AppBar with custom shaped FloatingActionButton in Android Java

This is My Floating Action Button
How to set fabmargin using custom fab. I was creating an android app based on an UI design But this bottom appbar with custom fab is difficult.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
app:borderWidth="0dp"
app:layout_anchor="#id/bottom_app_bar" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabAlignmentMode="end"
app:fabCradleMargin="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Themes.xml
#style/FabShapeStyle1
<style name="FabShapeStyle1" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerSize">20%</item>
</style>
enter code here
enter code here
if you are using latest material design dependency which supports material 3 then apply this property in fab button
currently this is latest dependency of material
implementation 'com.google.android.material:material:1.7.0'
app:shapeAppearanceOverlay="#style/Widget.Material3.FloatingActionButton.Primary"
now your Fab button code look like this
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
app:shapeAppearanceOverlay="#style/Widget.Material3.FloatingActionButton.Primary"
app:borderWidth="0dp"
app:layout_anchor="#id/bottom_app_bar" />

ToolBar problem using Outlined text fields

I'm trying to use an AppBar for my android studio project. In build gradle(module app) it implements :
com.google.android.material:material:1.1.0-alpha07 [I use this because i want
to use com.google.android.material.textfield.TextInputLayout on my xml/layout
files],
com.android.support.constraint:constraint-layout:1.1.3,
com.android.support.constraint:constraint-layout:1.1.3,
testImplementation 'junit:junit:4.12'.
In MainActivity.Java:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar1 = findViewById(R.id.toolbar);
}
If I use 'toolbar.inflateMenu(R.menu.menu_bar);' or 'setActionBar();'[setActionBar(Toolbar toolbar)] when I ran my app it crashs immediately.
I've looked for solution but always in the build gradle(module app) was implemented 'com.android.support:appcompat-v7:28.0.0'.
And if I implement both of them my app crashs immediately
Can anyone help me to set my toolbar1 as an ActionBar?
This is my xml file:
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="com.example.MainActivity"
<Button
android:id="#+id/B_Back"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#android:color/black"
android:onClick="startsSecondActivity"
android:text="#string/B_Back_name"
android:textColor="#android:color/white"/>
<LinearLayout
android:id="#+id/ll1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:hint="#string/hint">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="#string/app_name" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</LinearLayout>
Thanks,
Sbert.
Toolbar toolbar1 = findViewById(R.id.toolbar);
Works only when you have added a toolbar in your xml files with id toolbar. If you want to retrieve the default toolbar use
getSupportActionBar();
I personally prefer to create my own toolbar if you want a code example of this just ask me or check this link https://developer.android.com/training/appbar/setting-up

Android Application - Center Title

I am currently trying to center my Title in a new Android application. This is the basic title (top of the screen) that android has assigned to the app. The application is a very simple cookie-cutter "Tabbed" application created in Android Studio using the "Tabbed" template.
The title is simple text (about 30 characters). The title shows up in the main.xml when I select the "Design" option, but it is impossible for me to edit. Any help is appreciated.
Below is a copy of my 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="com.my.app.MainActivity">
<item
android:id="#+id/action_settings"
android:layout_width="match_parent"
android:orderInCategory="100"
android:layout_gravity="center"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
You can create custom ToolBar as shown below
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
You can set text of the TextView like below
TextView tv = (TextView) findViewById(R.id.toolbar_title);
tv.setText("Your Text");
You can use setTitle("my title") in activity. However there is no method to set it in center as it's not recommendend. But if you still want it then you can just pad with spaces. Like (" my title")
After playing around with the code, I figured out how to center the Toolbar Title & change the Toolbar Title text.
1st you have to edit the "onCreate" for the activity to turn off the default title provide by android. See sample below:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
2nd you have to delete any references in the Toolbar XML (app:title = "your title" )for the app title. A TextView will then need to be added to the Toolbar XML. Below is a sample of the code that is working for me:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#67ccb2"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="22dp"
android:text="MY APP NAME"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
Notice in the TextView above that I have recreated the title, changed its text size, made it bold & centered it in the middle (where it looks awesome).
I hope this helps someone :)

How to remove view that is injected?

I have the following layout, activity_main.xml:
<merge
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">
<com.lorentzos.flingswipe.SwipeFlingAdapterView
android:id="#+id/frame"
android:background="#d1d1d1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rotation_degrees="15.5"
tools:context=".MainActivity"
android:layout_gravity="top"/>
<TextView
android:id="#+id/tv_noJobsLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#474747"
android:textAlignment="center"
tools:text="Nothing Left to Swipe!"
android:layout_gravity="center" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include layout="#layout/buttons" />
</merge>
In my main activity, I have the following code for injection using ButterKnife:
setContentView(R.layout.activity_main);
ButterKnife.inject(this);
I want to remove the <include> part of the layout because I do not need those buttons anymore, however, when I remove the <include> line I get the following error:
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.lorentzos.swipecards.example/com.lorentzos.swipecards.MainActivity}: java.lang.RuntimeException: Unable to inject views for com.lorentzos.swipecards.MainActivity#f356341
What am I doing wrong?
Is there some reason why I cannot remove the <include>?
EDIT:
#InjectView(R.id.frame) SwipeFlingAdapterView flingContainer;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//Remove title bar
//this.requestWindowFeature(Window.FEATURE_NO_TITLE);
//color the notification bar with our company colors
Window window = this.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(this.getResources().getColor(R.color.laborswipe_notificationbar));
//remove title from action bar and add the logo to the top left of the action bar
setUpActionBar();
setContentView(R.layout.activity_main);
ButterKnife.inject(this);
After removing your <include layout=.../> also remove the binded view from the layout in your activity.
Notes:
Binding views with ButterKnife means that you have views in a layout with the binding codes in your main activity. So there should be a code with:
#BindView(R.id.your_view_in_include_button) View yourViewName;
Remove this according with the view in your 'include layout.
Then rebuild your app.
Suggestion:
Upgrade your ButterKnife to current version.

Custom layout in Toolbar

Recently I migrated from the old ActionBar to the new Toolbar.
I have a custom activity (actually a fragment inside my main activity) in which I'm allowing user to click on an icon in the toolbar, and then a search box appears (in the toolbar), using custom layout.
Problem is, it worked fine before the migration, but now once I click the button and switch to the custom action bar layout with the search box, the layout spans on all screen, instead of the normal size of the toolbar.
Here's the code I'm using to replace the toolbar:
LayoutInflater inflator = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View actionBarView = inflator.inflate(R.layout.map_action_layout, null);
actionBar = ((DrawerActivity)getActivity()).getSupportActionBar();
actionBar.setCustomView(actionBarView);
Here's the map action layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<AutoCompleteTextView
android:id="#+id/autoComplete"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ems="10"
android:hint="#string/search_adress_hint"
android:imeOptions="actionSearch"
android:inputType="textAutoComplete|textAutoCorrect"
android:paddingRight="50dp"
android:textColor="#android:color/white"
android:textCursorDrawable="#null" >
<requestFocus />
</AutoCompleteTextView>
<ImageButton
android:id="#+id/clear_address"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="17dp"
android:background="#drawable/ic_action_cancel"
android:gravity="center_horizontal|center_vertical"
android:scaleType="fitCenter" />
</RelativeLayout>
Note: no matter what value I put in the height of the above, whether it's fixed dp value or wrap_content, the layout still spans on whole screen.
Here's my toolbar layout being replaced:
<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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
android:elevation="4dp"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
The toolbar resides inside an AppBarLayout.
Does anyone have an idea what am I doing wrong? How can I achieve the result I'm looking for? Thanks.
It is standard to have the toolbar height set to ?attr/actionBarSize.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />

Categories

Resources