Add activity background image in full screen behind transaparent Actionbar - java

I have created a Transparent ActionBar and i want to show the full image that will cover the action bar also but my image comes down below the action bar.
I want my image to look like this
But instead my image look like this My Activity.
My style for transparent Actionbar
Styles.xml
<style name="AppTheme" parent="AppTheme.Base">
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="colorPrimary">#android:color/transparent</item>
<item name="windowActionBarOverlay">true</item>
</style>
My Activity where i want to show the full size image
Activity
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/containerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
android:weightSum="1">
<include
android:id="#+id/app_bar" /*This is the action bar*/
layout="#layout/appbartransparent"></include>
<ImageView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/imageView"
android:src="#drawable/views"
android:scaleType="fitXY" />
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation1"
android:name="com.example.asad.homebuyerproject.NavigationBar"
android:layout_width="#dimen/navigationdrawerwidth"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation"
tools:layout="#layout/fragment_navigation" />
</android.support.v4.widget.DrawerLayout>

Related

How to change font,size of text and set text position center ToolBar Android?

I need to change the font size, the font itself, and center the text in the ToolBar.
I took a template from Bottom Navigation Activity studio.
I was trying setting the text size in themes.xml (I was able to change the background color and text color there)
<style name="CustomToolBarStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="titleTextColor">#color/black</item>
<item name="android:background">#color/white</item>
I was trying to use this option in themes.xml:
<item name="android:gravity">center</item>
It didnt help. I tried to follow this instruction:
https: //stackoverflow.com/questions/26533510/android-toolbar-center-title-and-custom-font Throws android.support.v7.widget.Toolbar into an error and get a crash.
ToolBar
NavbarTemplate

For API level 21+ you can use app:titleTextAppearance property of toolbar
<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="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/yourstyle" />
and override the default title size in a custom style:
<style name="yourstyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
<item name="android:fontFamily">yourFont</item>
</style>
For centering, you should follow this answer and if this and none of the other answer works for you from the same post https://stackoverflow.com/a/38175403/9917400, than just use a linear layout inside Toolbar.

You can set constraint-layout inside the toolbar
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:textColor="#color/blue"
android:textSize="16sp"
app:fontPath="fonts/xxx" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>

If you're using androidx don't use android.support.v7.widget.Toolbar.
You have to use androidx.appcompat.widget.Toolbar.
Create toolbar.xml in res/layout.
Put this code:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="yourToolBarBackgroundColor"
>
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TestToolBar"
android:fontFamily="yourFont"
android:textSize="yourSizeOfText"
android:textColor="yourTextColor" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/activity_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Disable ActionBar in themes.xml:
<style name="Theme.YourProject" parent="Theme.MaterialComponents.DayNight.NoActionBar">
For night theme you have to do same thing in themes.xml(night)
Then in MainActivity.java in onCreate:
setContentView(R.layout.toolbar);

Android pre Lollipop toolbar don't work

I have a drawer menu in devices post LOLIPOP work fine in change colors on title and icon navigation but in devices PRE LOLLIPOP don't work and only display white bar but dont show icon
my toolbar
<FrameLayout 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=".Users.MenuDrawer">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<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="#color/WHITE"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/CustomToolbar" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
and my styles
<style name="CustomToolbar" parent="AppTheme">
<item name="android:textColorSecondary">#color/BLACK</item>
<item name="colorPrimary">#color/BLACK</item>
<item name="actionMenuTextColor">#color/BLACK</item>
<item name="android:textColor">#color/BLACK</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" >
<item name="android:textColorSecondary">#color/BLACK</item>
<item name="colorPrimary">#color/BLACK</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

My error is in used frame layouts in z index position to mi toolbar in pre lolipop dont work i added this change and work fine
<FrameLayout 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=".Users.MenuDrawer">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<include layout="#layout/content_main" />
<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="#color/WHITE"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/CustomToolbar" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>

Issue between android:windowLightStatusBar and Navigation Drawer

I have set android:windowLightStatusBar to true to display black icons and text on status bar inside my app as picture below.
However, the Navigation Drawer no longer fit to the screen, see the picture below. This is because to ensure android:windowLightStatusBar works, android:windowTranslucentStatus must be set to false. Any workaround? App like Google Calendar seem to work fine with this feature.
Here's my main activity's XML
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorToolbarBackground"
android:fitsSystemWindows="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/app_bar" />
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:background="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/navigation_view_items" />
</android.support.v4.widget.DrawerLayout>

Remove this line from layout.xml
android:fitsSystemWindows="true"
And add this to styles-v21.xml
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
in styles.xml
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
in Manifest.xml add this in your Activity Main
android:theme="#style/AppTheme.NoActionBar"
And wrap AppBarLayout tag into this:
<android.support.design.widget.CoordinatorLayout 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"
tools:context=".MainActivity">
<!-- Here AppBarLayout ecc -->
</android.support.design.widget.CoordinatorLayout>
<!-- Here NavigationView ecc -->
AppBarLayout must have
android:theme="#style/AppTheme.AppBarOverlay"

Toolbar does not display (briefly shows up before disappearing)

I am trying to make an action bar (through toolbar) with a navigation drawer, however I only manage to get the navigation drawer part working. When the app loads in the emulator, it does seem that the toolbar shows up on the screen for a fraction of a second before it disappears, showing a screen without a toolbar. How do i get the toolbar to show up/not disappear on load?
This is how it looks like:
styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
styles.xml (v21)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- API 14 theme customizations can go here. -->
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
</resources>
MainActivity.java (trimmed away excess codes)
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity implements OnMarkerClickListener {
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
...
}
main_layout.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:layout_height="wrap_content"
android:layout_width="match_parent"
layout="#layout/toolbar_layout"
/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navigation_view"
android:layout_gravity="start"
app:menu="#menu/drawer_menu"
>
</android.support.design.widget.NavigationView>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainfrag"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/main_layout" />
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
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:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:background="?attr/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
</android.support.v7.widget.Toolbar>
AndroidManifest.xml
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
...

As Ajay mentioned that DrawerLayout should only contain two layouts so I am editing some of your codes to fulfill the requirements and I think this would work just give it a try
main_layout.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:layout_height="wrap_content"
android:layout_width="match_parent"
layout="#layout/other_layout"/>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navigation_view"
android:layout_gravity="start"
app:menu="#menu/drawer_menu"/>
</android.support.v4.widget.DrawerLayout>
Now add your other layouts to another layout file
other_layout.xml
<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.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:background="?attr/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<FrameLayout
android:id="#+id/mainfrag"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/main_layout" />
</FrameLayout>
</LinearLayout>

main_layout.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:layout_height="wrap_content"
android:layout_width="match_parent"
layout="#layout/toolbar_layout"
/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainfrag"
android:layout_width="match_parent"
android:layout_height="0dp" //Changed Value
android:layout_weight="1"> //Added
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/main_layout" />
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navigation_view"
android:layout_gravity="start"
app:menu="#menu/drawer_menu"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
DrawerLayout Should only contain two child Views, first the main content and then the drawer view.
Creating a Navigation Drawer

transparent toolbar for Navigational Drawer theme of Android Studio with image overlapping toolbar

I am a fresher to Android Design. I Have Android Studio's Navigational DrawerLayout, when my app loads I'm loading Initial Fragment for the app.
I want to make the toolbar transparent
I want to have an image that is overlapping the DrawerLayout's toolbar
and for other Fragments I want the same toolbar to be opaque.
First Screen when app Loads
When any other fragment is called

For No :1.
All you need to is to define theme which hide action bar, define action bar style with transparent background and set this style to the toolbar widget. Please note that toolbar should be drawen as last view (over all view tree)
<style name="Theme.Custom" parent="#android:style/Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="CustomActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Toolbar should be above content-->
<include layout="#layout/toolbar" />
</RelativeLayout>
Toolbar layout:
<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"
app:theme="#style/CustomActionBar"/>
For No : 2
Put ImageView in relative layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Toolbar should be above content-->
<include layout="#layout/toolbar" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:transitionName="photo_hero"
android:id="#+id/image"
/>
</RelativeLayout>
Toolbar layout:
<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"
app:theme="#style/CustomActionBar"/>

Categories