Develop Reference

drawableStart not showing drawable

I am learning android, and one of the challenges in the book said to add the previous button on my own. I did, and asked a friend for help putting the arrow on the left side, and he did, but he couldn’t figure out why drawableStart didn’t work. (drawableLeft did work)
Anyone know why drawableStart didn’t work? Or better yet: how to fix it?
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/arrow_left"
android:text="#string/previous_button"
android:drawablePadding="4dp"/>
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/arrow_right"
android:drawablePadding="4dp"
android:text="#string/next_button"/>
</LinearLayout>
The code under themes.xml :
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.GeoQuiz" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- 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/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>

It seems that you're using Material design buttons, so use android:icon instead of android:drawableStart
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/arrow_left"
android:text="#string/previous_button"
android:drawablePadding="4dp" />
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
android:icon="#drawable/arrow_right"
android:drawablePadding="4dp"
android:text="#string/next_button"/>
</LinearLayout>
Update:
Didn't work. Now it doesn't show either arrow. And the program doesn't run in the emulator anymore
Appears to be a compatibility issue with android directive so, change it to app directive instead and added a style of Widget.MaterialComponents.Button.TextButton.Dialog as you use
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="#drawable/arrow_left"
android:text="#string/previous_button"
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog"
android:drawablePadding="4dp" />
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
app:icon="#drawable/arrow_right"
android:drawablePadding="4dp"
android:text="#string/next_button"/>
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog"
</LinearLayout>

After a whole lot of searching I finally figured out how to make it work
android:drawableStart not working seems to be an issue and here is the link to the issue and fix https://github.com/material-components/material-components-android/issues/1174
Here's the fix
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="#drawable/arrow_left"
app:iconGravity="textStart"
app:iconTint="#android:color/white"
android:text="#string/previous_button"
android:drawablePadding="4dp"/>
Instead of using drawableBottom|Top|Left|... use MaterialButton's attributes app:icon, app:iconGravity and app:iconTint
Note drawableStart seems to be the only one with the issue the others work
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
android:drawableEnd="#drawable/your_image"/>
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
android:drawableTop="#drawable/your_image"/>
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
android:drawableBottom="#drawable/your_image"/>
Then for Left
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
app:icon="#drawable/arrow_left"
app:iconGravity="textStart"
app:iconTint="#android:color/white"/>

How to customize the ImageButton style?

I am making a numeric keyboard.
keyboard appearance
I have a problem with the decoration of the return button.
If I use ImageButton, then I get an indent from the top, as in the picture:
button backspace
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<!-- other buttons -->
<com.google.android.material.button.MaterialButton
android:id="#+id/btnPoint"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="0dp"
android:padding="0dp"
android:text="."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnNumber0"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnNumber1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btnNumber0"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="0dp"
android:padding="0dp"
android:text="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnBackspace"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnPoint"
app:layout_constraintTop_toBottomOf="#+id/btnNumber2" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btnBackspace"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="0dp"
android:padding="0dp"
android:scaleType="center"
android:text=""
app:iconGravity="end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnNumber0"
app:layout_constraintTop_toBottomOf="#+id/btnNumber3" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is the style of the buttons
<!-- Keyboard -->
<style name="KeypadButton" parent="Widget.MaterialComponents.TextView">
<item name="android:textSize">#dimen/font_large_30</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/swatch_7</item>
<item name="backgroundTint">#color/key_number</item>
<item name="android:background">#drawable/ripple_bg</item>
<item name="android:textAlignment">center</item>
<item name="android:gravity">center</item>
<item name="elevation">0dp</item>
</style>
If I inherit the ImageButton style, then I get padding around the button, which cannot be removed.
Please tell me how to properly design the backspace button.
Link to the project

Try replace
<style name="KeypadButton" parent="Widget.MaterialComponents.TextView">
to
<style name="KeypadButton" parent="Widget.MaterialComponents.Button">

Android textinputlayout on adding left padding to the layout i get an equal amount of space on the right side and it looks as a margin

On adding paddingleft to textinputlayout an equal number of spacing is applied to right hand side as if a margin is applied.
fragment_add_task.xml with left padding:
<com.google.android.material.textfield.TextInputLayout
style="#style/TextInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/fifteen_dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText"
style="#style/RR_12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Hiiiii"
android:inputType="text"
android:textColorHint="#color/lightGrayColor" />
</com.google.android.material.textfield.TextInputLayout>
Result screen :
With padding
But when i remove that leftpadding it comes back to normal.
fragment_add_task.xml with left padding:
<com.google.android.material.textfield.TextInputLayout
style="#style/TextInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText"
style="#style/RR_12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Hiiiii"
android:inputType="text"
android:textColorHint="#color/lightGrayColor" />
</com.google.android.material.textfield.TextInputLayout>
Result screen :
Without padding
So anyone can help or guide me what is causing this issue.
Update :
My style(TextInputLayout) which is assign to textinputlayout view
<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/darkWhiteColor</item>
<item name="boxStrokeWidth">#dimen/one_dp</item>
<item name="boxBackgroundColor">#color/textColorPrimary</item>
<item name="boxCornerRadiusBottomStart">#dimen/ten_dp</item>
<item name="boxCornerRadiusBottomEnd">#dimen/ten_dp</item>
<item name="boxCornerRadiusTopEnd">#dimen/ten_dp</item>
<item name="boxCornerRadiusTopStart">#dimen/ten_dp</item>
<item name="hintTextAppearance">#style/TextInputLayoutHintStyle</item>
</style>

Dialog full screen layout issue

The layout in a full screen dialog is not rendered properly.
This is my dialog code:
val mDialogView = LayoutInflater.from(this).inflate(R.layout.alertdialog_info, null)
val mBuilder = AlertDialog.Builder(this, R.style.FullScreenDialog)
.setView(mDialogView)
val mAlertDialog = mBuilder.show()
mDialogView.titleTv.text = getString(R.string.title)
mDialogView.descriptionTv.text = getString(R.string.description)
mAlertDialog.show()
in style.xml this is my FullScreenDialog:
<style name="FullScreenDialog" parent="android:Theme.Dialog">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:windowBackground">#color/md_white_1000</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsFloating">false</item>
</style>
And this is my layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:paddingTop="16dp"
android:gravity="bottom"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/md_white_1000">
<ImageView
android:id="#+id/iconIv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:src="#drawable/ic_success"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/titleTv" />
<TextView
android:id="#+id/titleTv"
style="#style/FontLocalizedBold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="#string/payment_success"
android:textColor="#color/colorTextPrimary"
android:textSize="24sp"
android:layout_marginStart="24dp"
android:gravity="center"
android:layout_marginEnd="24dp"
android:maxLines="2"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="#+id/descriptionTv"
style="#style/FontLocalizedMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="24dp"
android:gravity="center"
tools:text="#string/payment_success_description"
android:textSize="17sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/titleTv" />
<TextView
android:id="#+id/okTv"
style="#style/ButtonTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:paddingBottom="16dp"
android:background="#drawable/save_button_active"
android:text="#string/done"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have tried with LinearLayout instead of ConstraintLayout, but same result.
I have attached pictures with how my xml file look, and how it looks rendered on emulator, ignore please different string values.
emulator:
xml:
Any idea what can cause the difference in rendering?

Sounds like you need to update the preview style in the xml viewer. I highlighted the drop down box to use in the current release of AndroidStudio.

Cannot set EditText's style

I created my own style for EditText, but it doesn't work
Style:
<style name="InputTextBox" parent="#android:style/Widget.EditText">
<item name="background">#drawable/text_area_box</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:gravity">top</item>
</style>
EditText in XML:
<EditText
app:theme="#style/InputTextBox"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/spinner_to"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/spinner_from"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/spinner_to"
app:layout_constraintHorizontal_bias="0.0"
android:hint="#string/translate_text_input_hint"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintVertical_bias="0.0"
android:id="#+id/et_input_text" />
I tried to change parent in styles to Widget.AppCompat.EditText, Base.Widget.AppCompat.EditText and others but still have no result

For setting style on EditText you need to set android:theme.
<EditText
android:theme="#style/InputTextBox"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/spinner_to"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/spinner_from"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/spinner_to"
app:layout_constraintHorizontal_bias="0.0"
android:hint="#string/translate_text_input_hint"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintVertical_bias="0.0"
android:id="#+id/et_input_text" />