Develop Reference

Applying a gradient background on a toolbar

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.

Circular background for toolbar icons

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:

How can I remove the smell line under the EditText?

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"

What is the correct way to create full width forms in Android

I'm having trouble figuring out how one goes about creating a full width form in the style of a normal compose window, say for an email or forum topic. The screenshot below from material design guidelines should give an idea of what I'm trying to achieve. If you need anymore details about the layout let me know, but its basically as of this moment, just two EditText views in a LinearLayout.
[Edit]
I should clarify that I do understand how layouts works. I can get full width EditText fields, but the actual look of the example is quite different. I am not sure if this is a custom styling for the EditText or if the EditText are wrapped in a specific layout to make them look as if they are in a table or list.
[Edit with My Solution]
drawable/full_width_edit_text
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#FFE0E0E0" />
</shape>
</item>
</layer-list>
values/styles
<resources>
<style name="EditTextLightFullWidth" parent="AppTheme">
<item name="android:textColorHint">#FF989898</item>
<item name="android:textSize">16sp</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:paddingTop">20dp</item>
<item name="android:paddingBottom">20dp</item>
<item name="android:background">#drawable/full_width_edit_text_bg</item>
</style>
<style name="EditTextLightFullWidth.NoBorder" parent="EditTextLightFullWidth">
<item name="android:background">#null</item>
</style>
</resources>
layout/compose_activity
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<EditText
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Title"
android:theme="#style/EditTextLightFullWidth"
style="#style/EditTextLightFullWidth"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<EditText
android:id="#+id/bodyText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:gravity="top|left"
android:hint="Body"
android:theme="#style/EditTextLightFullWidth.NoBorder"
style="#style/EditTextLightFullWidth.NoBorder"
/>
</ScrollView>
</LinearLayout>

This is actually a custom styling for EditText. They simply set the EditText background to transparent or null.
How to change style of a default EditText
android : how to change the style of edit text?

Add a width attribute in your layout.xml that has the value "match_parent" or "fill_parent" for each of your editText items and they should expand as wide as their parent container. As long as your parent also fills the width of the screen it should work.
Eg
<LinearLayout>
<!-- This will make your parent container fill the screen-->
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<EditText
android:id="#+id/edit_message"
android:layout_height="40dp"
<!--Here is where we stretch editText item as wide as parent -->
android:layout_width="match_parent">
</LinearLayout>

Android Button with No Padding

I am trying to use the open source antennapod application as a reference for building my android application. I am using ActionBarSherlock and want to create a button at the bottom of my layout that extends from side to side with no padding. It should look like this:
My Styles.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.Application.Light" parent="#style/Theme.Sherlock.Light">
<item name="attr/non_transparent_background">#color/white</item>
<item name="attr/borderless_button">#drawable/borderless_button</item>
</style>
</resources>
borderless_button.xml looks like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape android:shape="rectangle">
<solid android:color="#color/selection_background_color_light" />
</shape></item>
<item android:state_focused="true"><shape android:shape="rectangle">
<solid android:color="#color/selection_background_color_light" />
</shape></item>
<item><shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape></item>
</selector>
attrs.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="borderless_button" format="reference" />
<!-- Used in itemdescription -->
<attr name="non_transparent_background" format="reference" />
</resources>
My Manifest has this:
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/Theme.Application.Light" >...</>
My layout is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/footer"
style="#android:style/ButtonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/butConfirm"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Search" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/queryString"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_margin="8dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:text="What would you like to search for?" />
<EditText
android:id="#+id/etxtQueryString"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/queryString"
android:layout_margin="8dp"
android:hint="Enter Query"
android:inputType="textUri" />
</RelativeLayout>
</RelativeLayout>
What it ends up looking like:
I just need one button but still want it to cover the whole width of the screen.
Here is the link to the source code I am using as a guide.
https://github.com/danieloeh/AntennaPod
Any help would be awesome!
Thanks

<Button
android:id="#+id/butConfirm"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Search"
android:background="#null"/>
This should do the trick!