Develop Reference

BottomSheetDragHandleView only accessible in material design demo

I'm using the github repository project for testing purposes and I stumbled accross BottomSheetDragHandleView which displays a handle bar in the demo license (see link for the code):
The issue I am having is that using the the similar layout structure or almost the same structure in my demo license, the handle bar is not visible.
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/view_margin_small"
android:paddingBottom="#dimen/view_margin_small">
<com.google.android.material.bottomsheet.BottomSheetDragHandleView
android:id="#+id/handlebar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/setImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/set_image"
app:icon="#drawable/baseline_photo_camera_24"
style="#style/ThemeStyleBottomSheetIconMaterialButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/handlebar"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/deleteImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/delete_image"
app:icon="#drawable/baseline_no_photography_24"
style="#style/ThemeStyleBottomSheetIconMaterialButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setImage"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Is there anything that must be taken care of in order to display the handle bar?

This seems to be happening when using material 2 themes currently and works as expected when switching to material 3 (tested on material lib version 1.8.0 - seems it won't be addressed in the future).
While BottomSheetDragHandleView seem to have default style defined its not picked up - which results in the view not showing up.
Even if thats fixed this style expect material 3 color attributes for tint color so it needs to be overridden anyway with the color of your choice.
Workaround:
define new style:
<style name="Widget.MaterialComponents.BottomSheet.DragHandle" parent="Widget.Material3.BottomSheet.DragHandle">
<item name="tint">?colorOnSurface</item>
<!--Alpha can be added optionally to achieve nice color blend-->
<item name="android:alpha">0.3</item>
</style>
use it in your theme by adding:
<item name="bottomSheetDragHandleStyle">#style/Widget.MaterialComponents.BottomSheet.DragHandle</item>

How I can align icon next to text of MaterialButton with defined padding?

Hello I ran into problem with aligning icon in material button on Android. I have button with match_parent width, text and icon next to text. I want to align icon 8dp left to text and I tried do it by com.google.android.material.button.MaterialButton app:iconGravity. But result was not as expected.
As you can see, with longer text, icon padding is smaller and smaller. I also tried define app:iconPadding (default is 8dp) but with same result.
Is this bug or I'm doing it wrong?
Layout:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<com.google.android.material.button.MaterialButton
style="#style/MaterialButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:icon="#drawable/ic_launcher"
app:iconGravity="textStart"
tools:text="L" />
<com.google.android.material.button.MaterialButton
style="#style/MaterialButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:icon="#drawable/ic_launcher"
app:iconGravity="textStart"
tools:text="Lorem ipsum" />
<com.google.android.material.button.MaterialButton
style="#style/MaterialButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:icon="#drawable/ic_launcher"
app:iconGravity="textStart"
tools:text="Lorem ipsum dolor sit amet" />
</LinearLayout>
Style:
<style name="MaterialButton" parent="Widget.MaterialComponents.Button">
<item name="android:textColor">#color/white</item>
<item name="android:textAppearance">#style/TextTitleAllCapsBold</item>
<item name="android:fontFamily">#font/roboto_condensed_regular</item>
<item name="android:padding">#dimen/padding_medium</item>
<item name="backgroundTint">#color/colorPrimary</item>
<item name="iconSize">32dp</item>
</style>
Using implementation 'com.google.android.material:material:1.0.0'

remove app:iconGravity="textStart"

TL;DR
only use capitalized text and/or monospace fonts for buttons and use textAlignment="center" (the default) when specifying an icon with iconGravity="textStart"
I found reason and workaround how to fix this bug.
It calculates leftPadding of icon badly becouse of attribute android:textAllCaps.
If you have same experience, remove (or set to false) attribute android:textAllCaps and replace it with uppercased text in strings.xml or using .toUpperCase( ) in Java or Kotlin
It is issue that was found on September 2018 and by October is marked as Fixed on Google's issuetracker. But I'm using latest stable version of library and still have the bug. Here is my issue
UPDATE
The bug is now fixed in version 1.1.0-alpha02.

Referencing attributes of theme from within <include tag

I ran into a problem after I updated the targetSdkVersion and support libs versions of my apps to Oreo (27). The problem is that when I run my application on Android 4, API 19, I get runtime error. The problem is that it cannot find the referenced attribute's value. Here's the code:
styles.xml:
<style name="CustomStyle" parent="OtherCustomStyle">
<item name="screenPrimaryColor">#color/primary</item>
<item name="screenPrimaryColorDark">#color/primaryDark</item>
</style>
<attr name="screenPrimaryColor" format="reference" />
<attr name="screenPrimaryColorDark" format="reference" />
activity_test.xml:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/CustomStyle">
<include layout="#layout/inner_test"/>
</FrameLayout>
inner_test.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/instant_sale_bottom_margin">
<!-- HEADER -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="?attr/screenPrimaryColor"
android:baselineAligned="false">
<!-- REST OF MY LAYOUT -->
</LinearLayout>
</LinearLayout>
As you can see the style is applied as a theme in the activity_test.xml. However, with this combination (support lib 27 and Android 4.4) it doesn't work and the app crashes when inflating the layout. It crashes because of android:background="?attr/screenPrimaryColor" in the included view. This was working fine before I updated the support libraries. Also this works well with the new support libs on devices running Android newer that 4.
I think that this may be a bug in the support lib. My question is whether any of you guys encountered this issue as well.
(BTW, I found the "solution", which is to set the same theme within the included view (inner_test.xml in my case). However, this is a dirty solution as inner_test.xml can be reused in different parts of the application.)

change AutoCompleteTextView underline color

I'm having some trouble changing the color of an AutoCompleteTextView's underline, through styles.
We're using appcompat-v7, minimum SDK version is 16 and target and compiled are 21.
This is my toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
style="#style/ToolbarTheme"
android:minHeight="?attr/actionBarSize">
<AutoCompleteTextView
android:id="#+id/shop_chooser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Autocomplete"
android:hint="#string/chooseShop"
android:imeOptions="actionSearch"
android:inputType="textAutoComplete|textAutoCorrect"
android:drawableRight="#drawable/ic_action_cancel"
android:textIsSelectable="true" />
</android.support.v7.widget.Toolbar>
This is how I include it in other layouts:
<include
android:id="#+id/toolbar_inc"
layout="#layout/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
This is my Autocomplete style:
<style name="Autocomplete" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColor">#d9fafafa</item>
<item name="android:textColorHint">#80bdbdbd</item>
<item name="android:background">#drawable/bg_autocomplete</item>
</style>
And this the background's 9 patch image:
My problem is that the AutoCompleteTextView gets positioned way lower than it should:
This is how the app looks if I remove the 'background' attribute from my custom style:
I know that this can be achieved on api 21 using 'accentColor', but I'm talking about pre-21 here.
I want just to change the line's color, any suggestion or alterative solution is appreciated. Thanks!

The problem is with you 9.patch image .. It has way too much space on the top of it.
Either edit it yourself or ask your graphics designer to shave off some space from top.

How to add Holo Style Horizontal ProgressBar when minSdkVersion Less than 11?

I build an android project with targetSdkVersion="15" & minSdkVersion="8", then add a horizontal progressbar in activity, but it not holo style when I run this project with android jelly bean.
What can I do? to edit values-v14 style.xml?
layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/countdown_progressbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#android:style/Widget.ProgressBar.Horizontal"
android:max="30" />
values & values-v14 style.xml
<style name="AppTheme" parent="Theme.Sherlock.Light" />
Thanks a lot.

You will need to get the resources for the progessbar. You can get them from http://android-holo-colors.com/ with the styles.xml file or use the HoloEverywhere library: https://github.com/Prototik/HoloEverywhere

Use ?android:attr/progressBarStyleHorizontal instead of #android:style/Widget.ProgressBar.Horizontal.
As I understand this, ?android:attr/progressBarStyleHorizontal is current theme styled progress bar style whereas #android:style/Widget.ProgressBar.Horizontal is just plain android progress bar style.
The code should look like:
<ProgressBar
android:id="#+id/countdown_progressbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:max="30" />