I've created application with menu and toolbar.
<?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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
android:id="#+id/app_bar_menu_coord_layout_included"
layout="#layout/app_bar_menu"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header_menu"
app:menu="#menu/activity_menu_drawer" />
</android.support.v4.widget.DrawerLayout>
The toolbar (the app_bar_menu_coord_layout_included above):
<?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:id="#+id/app_bar_menu_coord_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true"
android:tag="app_bar_menu_coord_layout"
tools:context="com.magnifi.pennantrace.MenuActivity">
<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="#drawable/mybutton"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--first-->
<TextView
android:id="#+id/toolbar_div_rank"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="4th Place"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/guidelineToolbarV1"
app:layout_constraintEnd_toStartOf="#+id/guidelineToolbarH1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
...
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/content_frame"/>
</LinearLayout>
Now I wanted to adjust text sizes of toolbar elements depending on screen size. What I do is take toolbar width as 100% and set the rest of textview's text sizes to fit the desired rectangle (for example 6% of width and 100% of height).
But it seems like its not working properly.
I've tested on screen size 320 height and 480 width:
As you see on the picture, first of all the width of it is 480, and as I noticed the text adjustment doesn't work, take a look on the last text 37M, it should have fitted into one line. What I think is that the menu button (the red rectangle in image) is taking some place. What would be the best way to identify actual width of toolbar without the menu button?
EDIT 1:
I've tried adding to the app_bar_menu_coord_layout_included this:
android:layout_marginLeft="-64dp"
And here is the result of correct text size adjustment. But I don't want to get rid of the menu button. Instead I want to get correct size of toolbar without menu button.
Android gave us components to make ease implementing components. Not for giving hours to customise it. Why don't you make an custom toolbar instead of wasting hours in managing default toolbar.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
style="#style/styleToolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_back"
style="#style/styleToolbarIcon"
android:src="#drawable/ic_back" />
<TextView
android:id="#+id/headerTitle"
style="#style/styleToolbarText"
android:text="#string/app_name" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
some styles to be put in res>values>styles.xml.
<style name="styleToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:layout_width">match_parent</item>
<item name="android:background">#color/colorWhite</item>
<item name="android:layout_height">?attr/actionBarSize</item>
<item name="colorControlNormal">#color/colorWhite</item>
<item name="android:textColorPrimary">#color/colorWhite</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
<item name="contentInsetEnd">0dp</item>
<item name="contentInsetLeft">0dp</item>
<item name="contentInsetRight">0dp</item>
<item name="contentInsetStart">0dp</item>
<item name="contentInsetStartWithNavigation">0dp</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
<style name="styleToolbarIcon">
<item name="android:layout_width">?attr/actionBarSize</item>
<item name="android:layout_height">match_parent</item>
<item name="android:contentDescription">#string/app_name</item>
<item name="android:padding">#dimen/toolbar_icon_padding</item>
<item name="android:gravity">center</item>
</style>
<style name="styleToolbarText">
<item name="android:layout_width">0dp</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">match_parent</item>
<item name="android:gravity">left|center_vertical</item>
<item name="android:singleLine">true</item>
<item name="android:textColor">#252525</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:scrollHorizontally">true</item>
</style>
You should customize the toolbar layout as per your need. So you will have all controls on its size.
Related
I am trying to create an activity that will match the parent height. When I am testing the application on Pixel XL the application is fine, but when install on Xiaomi Redmi Note 9 Pro I have one part of the screen that it's not covered. This is the part above the camera, and it might be that my question is not only for this phone but I guess for all the others with the same design.
This is how it looks on pixel and it's ok:
And this is how it looks on Xiaomi Redmi Note 9 Pro:
This is my activity code:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:background="#color/main_screen_background"
tools:context=".activty.WelcomeActivity">
<include layout="#layout/toolbar" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/main_menu_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:layout_marginTop="20dp"
android:layout_marginBottom="60dp" />
</RelativeLayout>
And this is my Toolbar if needed:
<androidx.appcompat.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/main_screen_background"
android:theme="#style/AppFullScreenTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:id="#+id/test_menu_language_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp">
<ImageView
android:id="#+id/about_dropdown_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_ikonki_potrosuvaci_02" />
<TextView
android:id="#+id/language_dropdown_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="MK"
android:textColor="#color/white"
android:textSize="20dp" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
What I want to achieve is to have covered also that black part and have the color from the activity, probably an easy thing but I am little rusty with android. I checked the other applications and they are covering that part.
So actually there are only two lines of code needed to be added in your v27/styles.xml:
<item name="android:windowLayoutInDisplayCutoutMode">
shortEdges <!-- default, shortEdges, never -->
</item>
<item name="android:windowTranslucentStatus">true</item>
The first will cover that area and the second will set the color of the activity to that area. This is how my styles.xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppFullScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowLayoutInDisplayCutoutMode">
shortEdges <!-- default, shortEdges, never -->
</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:textAppearanceLargePopupMenu">#style/myPopupMenuTextAppearanceLarge
</item>
<item name="android:textAppearanceSmallPopupMenu">#style/myPopupMenuTextAppearanceSmall
</item>
</style>
</resources>
Finally I have applied this style to every activity that I have.
In my v27\style.xml I have the following code to set a white navbar:
<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>
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:windowLightNavigationBar">true</item>
</style>
It works, but the white navbar "joins" with the white background. I would to add an horizontal line on the navbar, in each activity. How can I do?
This is what I would (from Youtube), I highlighted it with red rectangle:
I think for cases like these you may need to have a custom toolbar layout so that you can optimise the layout whichever way you like.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.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="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvToolBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18sp"
android:text="Toobar"
android:fontFamily="#font/filson_pro_book"
android:textColor="#color/white"
android:visibility="visible"/>
<FrameLayout
android:layout_gravity="center_horizontal"
android:background="#color/white"
android:layout_width="100dp"
android:layout_height="1dp"/>
</LinearLayout>
You would probably want to add an horizontal line each time you open the nav drawer:
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#FF0000FF"
android:layout_gravity = "bottom/>
If you want the line to be on half of the screen (only on the nav)- add it inside the nav.
If you want the line to be on the whole screen (as you marked in the picture)- add it after adding the nav.
Since API 27 there is an attribute in the style called navigationBarDividerColor that allows to do that. You can complement it with the navigationBarColor to make it look like the one in your screenshot.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
...
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:navigationBarDividerColor">#DBDBDB</item>
</style>
</resources>
i am trying to reduce the height of toolbar but when i have declared particular height items inside toolbar doesn't formatted centered.how to arrange them centered in my case.Below are my complete details
Toolbar.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="center"
android:gravity="center"
android:background="#414e5b"
/>
</LinearLayout>
Themes.xml
<style name="Orange" parent="Theme.AppCompat.Light.NoActionBar">
----------------
<item name="actionButtonStyle">#style/ActionButtonStyle</item>
------------------
</style>
<style name="ActionButtonStyle" parent="Widget.AppCompat.ActionButton">
<item name="android:minWidth">0dip</item>
<item name="android:maxWidth">40dip</item>
<item name="android:paddingLeft">0dip</item>
</style>
Try below xml code to create your Toolbar. Which gives you to get your Toolbar at centre position :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_centerInParent="true"
android:background="#414e5b"
/>
</RelativeLayout>
I'm working with android.support.design.widget.TabLayout and I'm having a REAL hardtime trying to make the applied theme to work. Here's the XML I'm trying to use:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/viewPagerLayout_tabView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TabLayout.Theme"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerLayout_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:visibility="gone" />
</FrameLayout>
</LinearLayout>
Here's the style that is being applied:
<style name="TabLayout.Theme" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/rowHeaderColor</item>
<item name="tabIndicatorHeight">5dp</item>
<item name="tabTextAppearance">#style/TextAppearance.Jacksonville.Tab</item>
<item name="tabSelectedTextColor">#000</item>
</style>
<style name="TextAppearance.Jacksonville.Tab" parent="TextAppearance.Design.Tab">
<item name="android:textSize">12sp</item>
<item name="android:textColor">#4C4D4F</item>
<item name="textAllCaps">true</item>
</style>
When applied to the theme, the TextColor doesn't appear as the one I selected. I thought it was a problem with my sight so I changed it to Selected: Black and not selected: white but the same colors appeared. Is there something I would be needing to besides that in order for the theme to be applied? The problem is only with the text colors. The textAllCaps, textSize and other attributes are being applied with no major problems.
Thanks!
How can I remove this extra space between the icon in action bar?
See the picture please.
Tried everything, nothing seems to work:
<style name="Widget.Toolbar" parent="#style/Widget.AppCompat.Toolbar">
<item name="android:paddingRight">0dip</item>
<item name="android:paddingLeft">0dip</item>
<item name="android:background">#color/actionBarBackgroundColor</item> <!-- v11 -->
<item name="background">#color/actionBarBackgroundColor</item>
<item name="android:width">48dip</item>
</style>
You can achieve this through style , Try this
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:actionButtonStyle">#style/ActionButtonStyle</item>
</style>
<style name="ActionButtonStyle" parent="#android:style/Widget.Holo.ActionButton">
<item name="android:minWidth">0dip</item>
<item name="android:paddingLeft">0dip</item>
<item name="android:paddingRight">0dip</item>
</style>
Update your manifest as
android:theme="#style/AppTheme" >
You can do this my updating actionbar theme like I did, i was using appcomp theme. You need to play with Widget.Toolbar style, like I added padding on both side of actionbar.
<style name="AppTheme" parent="AppTheme.Base">
<item name="toolbarStyle">#style/Widget.Toolbar</item>
</style>
<style name="Widget.Toolbar" parent="#style/Widget.AppCompat.Toolbar">
<!-- 16dp padding on both sides of actionbar -->
<item name="android:paddingRight">16dp</item>
<item name="android:paddingLeft">16dp</item>
</style>
Update:
The padding on left will not work because Android set size for icon (if i am not wrong) to ~56dp, and actual image is scaled to fit centerInside, which leaves padding within image. So try reducing icon size (width) in style
This is how I solved using Toolbar from appcompat:
Style:
<style name="Theme.ProTaxi.Passageiro" parent="Theme.AppCompat.Light.NoActionBar"></style>
On the activity:
Toolbar actionBar = (Toolbar) findViewById(R.id.actionBar);
actionBar.setTitle("Title");
actionBar.setSubtitle("Subtitle");
actionBar.setTitleTextColor(Color.parseColor("#846A1A"));
Create a xml file in /layout folder with toolbar and included in each of activity xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:id="#+id/toolbarLayout"
android:layout_height="wrap_content"
android:orientation="vertical" >
<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/actionBar"
android:layout_width="fill_parent"
android:background="#color/actionBarBackgroundColor"
android:layout_height="?attr/actionBarSize"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp" >
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#A0A09F" />
</LinearLayout>
Including toolbar.xml in activity layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_telas" >
<LinearLayout
android:id="#+id/layoutTopToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include layout="#layout/toolbar" />
</LinearLayout>
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listaTaxisLivres"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/layoutTopToolbar"
android:fastScrollEnabled="true" >
</ListView>
</RelativeLayout>