is there a way to add a background to the toolbar icons,
I want to achieve this design
or there is another way to do it. since it has the overflow icon
complete reference code
this is the result
add the following in your app theme or activity style to make it NoActionBar activity
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
add the toolbar in your activity.xml and customize the view as you like
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/AppTheme"
app:layout_collapseMode="parallax"
app:popupTheme="#style/AppTheme">
<RelativeLayout
android:layout_width ="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/back_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/cir_shape"
android:onClick="clickBack"
android:padding="6dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_arrow_back_black_24dp"
tools:ignore="VectorDrawableCompat" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/rect_shape"
android:gravity="center"
android:orientation="horizontal"
android:padding="3dp">
<ImageView
android:id="#+id/app_bar_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:visibility="visible"
android:layout_marginRight="3dp"
app:srcCompat="#drawable/ic_visibility_black_24dp"
android:layout_marginEnd="3dp" />
<TextView
android:id="#+id/app_bar_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="1.3K"
android:textAllCaps="false"
android:textColor="#color/whiteColor"
android:textSize="18sp"
android:textStyle="bold"
android:visibility="visible" />
</LinearLayout>
</RelativeLayout>
3.add the support action bar as the toolbar in the MainActivity.java in OnCreate()
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
4.the circle_shape.xml in the drawable for arrow_back drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#95686566" />
</shape>
5.the rectangle_shape.xml in the drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#95686566" />
</shape>
6.for customizing the 3 dots(overflow icon) add
<item name="actionOverflowButtonStyle">#style/ThreeDotsStyle</item>
the in your style.xml main theme
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="actionOverflowButtonStyle">#style/ThreeDotsStyle</item>
</style>
and create it's theme
<style name="ThreeDotsStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/my_threedots_menu</item>
</style>
7.the my_threedots_menu.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#95686566" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
<item
android:drawable="#drawable/ic_menu_dots"
android:gravity="center" />
</layer-list>
8.inflate your menu
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
return true;
}
Create a custom toolbar and put your custom icons inside of it.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/myCustomAppBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- your custom icons goes here -->
</RelativeLayout>
</android.support.v7.widget.Toolbar>
1) btn_ripple_background
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/ripple_circular_shape"/>
</selector>
2) ripple_circuler_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/btn_state_pressed_text_color"
android:shape="oval">
<solid android:color="#color/btn_state_pressed_text_color" />
</shape>
Finally android:foreground="#drawable/ripple_btn_background"
You could create container with custom background inside Toolbar, put ImageView inside and add some padding to it for example:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/middle_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="#drawable/baseline_arrow_forward_white_24" />
</LinearLayout>
Background middle_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/resandroid"
android:shape="oval">
<solid android:color="#android:color/holo_orange_dark" />
</shape>
Adjust padding, ImageView to get desired look but basically you will have something like this:
Related
I have this main layout. It should display 3 buttons, but I am showing you only 1 button definition in order not to put mostly code in the question.The other buttons have the same definition.
<?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/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="70dp"
android:paddingBottom="70dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="center"
android:orientation="horizontal"
android:padding="50dp">
<Button
android:id="#+id/btnRfid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/main_button_background"
android:padding="20dp"
android:text="#string/button_rfid"
android:textSize="36sp"
android:drawableLeft="#drawable/button_rfid"/>
</LinearLayout>
</LinearLayout>
This is the main_button_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#949597"
android:angle="270" />
<corners android:radius="20dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
This is how I see it in design editor of Android Studio:
However, this is how it is viewed in the emulator:
Why are text rendered that way? Is something missing?
By reading tutorials, I don't see anything special in the button definition.
Regards
Jaime
1) Migrate your project to androidx.
2) Include dependency in your build.gradle:
implementation 'com.google.android.material:material:1.0.0'
3) Use in your layout:
<com.google.android.material.button.MaterialButton
android:id="#+id/material_icon_button"
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/icon_button_label_enabled"
app:icon="#drawable/icon_24px"/>
4) Don't forget to change your applevel theme to Material Component theme.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
I have created a custom gradient drawable file that i want to use as my Toolbar's background but i can't seem to apply it. It just shows up as plain gray (see the image). Am i doing something wrong? I looked at multiple posts but nothing has worked for me so far.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<Toolbar
android:id="#+id/home_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/home_toolbar_gradient"
android:elevation="4dp"
android:minHeight="70dp"
android:theme="#style/customToolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/title_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/Montserrat-Bold"
android:gravity="center"
android:text="#string/home"
android:textAlignment="center"
android:textColor="#android:color/white" />
</Toolbar>
<!-- Using a view with a gradient to create a drop navbar_shadow effect for the navbar -->
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_above="#id/bottom_nav_bar"
android:background="#drawable/navbar_shadow" />
<com.google.android.material.bottomnavigation.BottomNavigationView
app:labelVisibilityMode="labeled"
android:id="#+id/bottom_nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#android:color/white"
app:itemIconTint="#drawable/nav_selected_item_color"
app:itemTextColor="#drawable/nav_selected_item_color"
app:menu="#menu/bottom_nav_bar">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>
home_toolbar_gradient.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#color/toolbar_starting_color"
android:endColor="#color/toolbar_ending_color"
android:angle="75" />
</shape>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:fontFamily">#font/montserrat_medium</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<!-- Custom Rounded Dialog style -->
<style name="RoundedDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowBackground">#drawable/rounded_corners</item>
</style>
<style name="customToolbar" parent="Theme.AppCompat.Light.NoActionBar" />
</resources>
in MainActivity.java:
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar homeToolbar = findViewById(R.id.home_toolbar);
setSupportActionBar(homeToolbar);
and in the manifest:
android:theme="#style/Theme.AppCompat.Light.DarkActionBar"
Try doing it dynamically:
setSupportActionBar(homeToolbar);
ActionBar actionbar = getSupportActionBar();
actionbar.setBackgroundDrawable(getResources().getDrawable(R.drawable.home_toolbar_gradient));
Read this. It says- Angle of the gradient, used only with linear gradient. Must be a multiple of 45 in the range [0, 315].
So, Change home_toolbar_gradient.xml drawable to
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#FF33"
android:endColor="#AFF"
android:angle="45" />
</shape>
Try this:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#555994"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
For anyone interested, i actually found the issue. The angle attribute in a gradient drawable needs to be a multiple of 45 otherwise you'll get a subtle rendering error in the layout preview. Just change it to a multiple of it that suits your needs and the gradient will take effect.
When the user is click on the line in EditText in Huawei device he get another smell line (under the long line) - see image.
I try to do a lot of thing to fix it and I don't find what should I do.enter image description here
The is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/static_relative_layout"
android:background="#color/app_default_background"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="15dp"
android:layout_marginRight="50dp"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/email_text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorTextAppearance="#style/TextInputLayoutHintAppearanceError"
app:hintTextAppearance="#style/TextInputLayoutHintAppearanceValid">
<EditText
android:id="#+id/email_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:singleLine="true"
android:theme="#style/EditTextStyleRedLine"
android:textColor="#color/new_dark_grey"/>
</android.support.design.widget.TextInputLayout>
The style "EditTextStyleRedLine" is as follows:
<style name="EditTextStyleRedLine" parent="#style/Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/grey</item>
<item name="colorControlActivated">#color/red</item>
</style>
Add a background to your edittext, this will solve your issue.
android: background="#null"
You can personalize the background by creating a new drawable resource file, res > right click drawable > new > drawable resource file. Add the following code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<!-- Inner Shape -->
<solid
android:color="#color/colorWhite"/>
<!-- OUTLINE -->
<stroke android:width="0dp"
android:color="#FFFFFF"/>
<!-- CORNERS -->
<corners
android:radius="5dp"/>
</shape>
</item>
</selector>
Then you can set
android:background="#drawable/YOUR_DRAWABLE"
I am trying to add 5 icons on the bottom of the navigation bar. and this is what it came out like pic1. When I click on the bottom, other icons would show up only one at a time, shown in pic2. I need to make it look like the this picture, pic3.
Does anyone have any idea on what's wrong with the code?
These are the libraries that I am using:
implementation 'com.android.support:support-core-utils:27.1.1'
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:design:27.1.1'
Here is my bottom navigation layout view:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomNavViewBar"
android:background="#drawable/white_grey_border_top"
app:menu="#menu/bottom_navigation_menu">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
Here is white_grey_border_top drawable file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp">
<item
android:bottom="-1dp"
android:top="1dp"
android:right="-1dp"
android:left="-1dp">
<shape
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/grey" />
<solid
android:color="#color/white" />
</shape>
</item>
Here is my bottom_navigation_menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/ic_house"
android:icon="#drawable/ic_house"
android:title="">
</item>
<item
android:id="#+id/ic_search"
android:icon="#drawable/ic_search"
android:title="">
</item>
<item
android:id="#+id/ic_circle"
android:icon="#drawable/ic_circle"
android:title="">
</item>
<item
android:id="#+id/ic_alert"
android:icon="#drawable/ic_alert"
android:title="">
</item>
<item
android:id="#+id/ic_android"
android:icon="#drawable/ic_android"
android:title="">
</item>
update:
when I add android:backgroundTint="#1091BF" to my bottom navigation layout view, then it works but the background is blue (pic4). Also, I notice that if I just change the android:color="#color/white" in my white_grey_border_top drawable file to any other color then all the icon would show up.
Try using the following inside your bottom navigation layout view.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:background="#drawable/background"
>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigationView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:backgroundTint="#1091BF"
app:itemIconTint="#fff"
app:itemTextColor="#fff"
app:menu="#menu/navigation"/>
</android.support.constraint.ConstraintLayout>
Make sure to add dependency
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
Description : I am creating customized title bar. The codes for customization is as follow :
styles.xml
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="CustomTheme" parent="android:Theme">
<item name="android:windowTitleSize">50dp</item>
</style>
</resources>
title.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/customtitlecolor" >
<Button
android:id="#+id/about_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="9px"
android:layout_marginTop="6px"
android:background="#drawable/custombuttoncolor"
android:paddingBottom="8px"
android:paddingLeft="8px"
android:paddingRight="8px"
android:paddingTop="8px"
android:text="Back"
android:textColor="#ffffff" />
<TextView
android:id="#+id/about_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
and finally
customizedtitlecolor.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#000000" android:endColor="#777777" android:angle="90"/>
<corners android:radius="7dp"/>
</shape>
code in my main activity
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title);
Question: My customized title is not adopting fill parent width. There are grey spaces at right and left side. how to remove these spaces??
do it this way it will be solved :
your style XML:
<resources>
<style name="CustomWindowTitleBackground" />
<style name="CustomTheme" parent="android:Theme">
<item name="android:windowTitleSize">50dp</item>
<item name="android:windowTitleBackgroundStyle">#style/CustomWindowTitleBackground
</item>
</style> </resources>>
then refer it in manifest as :
android:theme="#style/CustomTheme">
Hope this help .