How to make StatusBar Covered by DrawerLayout - android-studio

this is how my activity_main.xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<!-- the root view must be the DrawerLayout -->
<androidx.drawerlayout.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/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="HardcodedText"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
/>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigation_view"
style="#style/Widget.Custom.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header_navigation_drawer"
app:menu="#menu/drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
This is how my theme looks like:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.CardsXML1" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowTranslucentStatus">true</item>
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/white</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
</style>
</resources>
I want to make drawer cover the status bar. Everything I've treid is in those pieces of code.
I used android:fitsSystemWindows="true" in activity_main.xml
and in theme i placed windowActionBar, windowNoTitle and android:windowTranslucentStatus parameters
but it still doesn't work.
Keep in mind that I want to use MaterialComponents in themes!

Related

Bottom Sheet Dialog - Transparent background header with close button

I am trying to make a transparent background header for close button. The background header is working as expected, however the background layout can see the visible and button is also not clear.
Am trying to build like this below picture
https://ibb.co/CVgrzjq
My code is as follows:
Activity Code
final BottomSheetDialog dialog = new BottomSheetDialog(this, R.style.BottomSheetMainStyle);
`dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
`dialog.show();
Layout Code
<RelativeLayout 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:background="#android:color/transparent"
android:gravity="center|top"
android:orientation="vertical">
<ImageView
android:id="#+id/img_close"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:clickable="true"
android:forceDarkAllowed="false"
android:paddingBottom="#dimen/dimen_8"
android:src="#drawable/bottom_close"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_below="#id/img_close"
android:background="#drawable/rounded_dialog"
app:background="#color/bkgcolor"
android:orientation="vertical">
<!-- All your required widgets here-->
</RelativeLayout>
</RelativeLayout>
Activity code
final BottomSheetDialog dialog = new BottomSheetDialog(this, R.style.trans_bg_dialog);
`dialog.show();
Add this in your style.xml file
<style name="trans_bg_dialog" parent="#style/Theme.AppCompat.Dialog">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
</style>

Adding space between tabs in a TabLayout

I am trying to add spaces between the tabs.
I would like to add gaps between the tabs, I have tried using padding but that changes the entire tab layout padding and not individual tabs. I have also tried other methods e.g. minWidth, while searching for an idea but couldn't figure it out, so i am here. Most of the project is default from when i created the tabbed layout activity, Here is the code i added/changed:
Thanks in Advance.
tab_background
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="18dp"/>
<!-- TabLayout background color -->
<solid
android:color="#color/colorPrimaryDark"/>
</shape>
tab_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- radius should be half of the desired TabLayout height -->
<corners
android:radius="18dp"/>
<!-- color of the selected tab -->
<solid
android:color="#color/colorWhite"/>
</shape>
tab_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- drawable for selected tab -->
<item
android:drawable="#drawable/tab_selected"
android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"
android:state_selected="true"/>
<!-- drawable for unselected tab -->
<item
android:drawable="#drawable/tab_background"
android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"
android:state_selected="false"/>
</selector>
activity_main
<?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"
tools:context=".MainActivity">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="70dp"
android:gravity="top|center_horizontal"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:fontFamily="#font/sofiabold"
android:background="#color/colorPrimary"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="56dp"
app:tabTextColor="#color/colorWhite"
app:tabMode="auto"
app:tabGravity="center"
android:layout_gravity="center"
android:background="#color/colorPrimary"
app:tabBackground="#drawable/tab_selector"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabPaddingStart="16dp"
app:tabPaddingEnd="16dp"
android:paddingBottom="20dp"
app:tabIndicatorHeight="0dp"
app:tabRippleColor="#null"
app:tabTextAppearance="#style/TabTextAppearance"/>
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You should use xml drawable, specially designed for this purposes - Inset Drawable: http://developer.android.com/guide/topics/resources/drawable-resource.html#Inset
For example:
res/drawable/tab_selector_inset.xml:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/tab_selector"
android:insetRight="10dp"
android:insetLeft="10dp" />
And use it in your TabLayout:
app:tabBackground="#drawable/tab_selector_inset"
(Inspired by Vasily Sochinsky)
It is late but it may be useful for other people .if you have custom background for tabs(selector), you just need add layer list to tabs background and set margin for them
selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_selected_tab" android:state_selected="true"/>
<item android:drawable="#drawable/bg_unselected_tab"/>
</selector>
selected tab:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="8dp" android:left="8dp">
<shape>
<stroke android:width="1dp" android:color="#color/Green"/>
<corners android:radius="#dimen/cardCornerRedius"/>
</shape>
</item>
</layer-list>
unselected tab:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="8dp" android:left="8dp">
<shape>
<stroke android:width="1dp" android:color="#color/Gray"/>
<corners android:radius="#dimen/cardCornerRedius"/>
</shape>
</item>
</layer-list>

Android String and Style Resource Not giving desired change

I'm developing an android app and I'm trying to use a string resource to store my table title and a style to store my TextAppearance as below:
string:
<resources>
<string name="app_name">DatabaseApp</string>
<string name="table_title">2019 Staff Database</string>
</resources>
style:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="TextStyle" parent="android:TextAppearance">
<item name="android:textSize">20sp</item>
<item name="android:textColor">20sp</item>
</style>
</resources>
Question: Whenever I introduce the...style="#style/TextStyle"...the table title text changes to TextView, I cant figure out the issue, somebody to help me out. What could be the problem?
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/table_title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:gravity="center"
style="#style/TextStyle"/>
<TableRow>
<!--My other xml codes here-->
</TableRow>
You have declared in your style.xml:
<item name="android:textColor">20sp</item>
I believe android:textColor will not accept a sp or dp value, rather use a color in hex or any resource existing in colors.xml

I have background color in button.How can I set selector for button also?

<Button
android:id="#+id/info_button"
android:layout_width="0dp"
android:layout_weight="1"
android:textColor="#color/white"
android:background="#color/colorPrimary"
android:onClick="getInformation"
android:text="#string/information"
android:layout_height="48dp" />
I have selector below I want to use in button and use background color also.Is there any way?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/btn_preess" android:state_pressed="true"/>
<item android:drawable="#color/btn_preess1" android:state_focused="true"/>
<item android:drawable="#color/btn_preess1"/>
</selector>

Centering the home/homeasup and action menu in an appcompat actionbar

seems like I am the only one on SO with such problem. Why, android, why ?...
have a look at the image. Only the title is centered (phew). The other two items... help!
here is the relevant xml mojo
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dl_base"
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:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
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="false"
tools:context="com.farmdog.farmdog.HelperActivity">
<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:paddingTop="#dimen/appbar_padding_topbottom"
android:paddingBottom="#dimen/appbar_padding_topbottom"/>
</android.support.design.widget.AppBarLayout>
and the styles:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<!-- colorPrimaryDark wont work on API level < 21 -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/mainBkgndHard</item>
<item name="android:textColor">#color/appTextColor</item>
<item name="android:buttonStyle">#style/ButtonTheme</item>
<!-- attempt taking actionbar shadow away -->
<item name="elevation">0dp</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="actionMenuTextColor">#color/appTextColor</item>
<item name="titleTextColor">#color/appTextColor</item>
<item name="colorControlNormal">#color/appTextColor</item>
<item name="android:layout_centerVertical">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorPrimary">#color/colorActionBar</item>
</style>
You have set toolbar paddingTop and paddingBottom. You should remove them. I hope it will help resolve your problem.

Resources