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>
Related
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.
It took me a long time to figure out how to get rid of the ugly black default and color my custom keyboard.
I worked from this very helpful answer and I can now color my keyboard nicely:
How to change background color of key for android soft keyboard?
Just the popup-keyboards are still in the default colors.
I found another helpful answer, which took me almost to a solution. But the answer is focusing on the creation and preview of the popups:
Creating a SoftKeyboard with Multiple/Alternate characters per key
#Graeme has mentioned
If you want to change the layout/style of the popup (which defaults to #android:layout/ keyboard_popup_keyboard.xml) you can specify a android:popupLayout attribute which points to a layout file
So I have made my own version of keyboard_popup_keyboard.xml and put it next to my main layout file input.xml into /res/layout and made a reference to it, like in the example given.
<org.gasana.android.aniikeyboard.LatinKeyboardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keyBackground="#drawable/samplekeybackground"
android:keyTextColor="#000000"
android:popupLayout="#layout/popup"
/>
Sadly there was no example for the popupLayout file. So I copied the original file all the way up from
C:\Users\martin\AppData\Local\Android\sdk\platforms\android-28\data\res\layout\keyboard_popup_keyboard.xml
and tried to tweak it as popup.xml to use the same background as my main keyboard:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/samplekeybackground"
>
<android.inputmethodservice.KeyboardView
android:id="#android:id/keyboardView"
android:background="#drawable/samplekeybackground"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:popupLayout="#layout/popup"
android:keyTextSize="22sp"
tools:ignore="ResourceCycle" />
<ImageButton android:id="#android:id/closeButton"
android:background="#drawable/samplekeybackground"
android:src="#drawable/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:clickable="true"
/>
My keyboard still builds and creates a working APK. Just the color of the popups is still the ugly default.
Context: I am a linguist, not a developper. I made this custom keyboard for a minority language with a special alphabet and tone-markers and have it free on the Play Store. It works. But people are hesitating, because of the aweful color-design. As soon as I get the popups colored, I will publish a fresh version. Thank you.
Since no answer was coming here for two months, I took time for more poking and guessing. Now I got lucky today and want to be nice to the next linguist, who also needs a custom keyboard and needs to work from examples:
mykeyboard.java is pointing to the layout file for the main keyboard so (third line "input"). I just give a three line quote:
#Override public View onCreateInputView() {
mInputView = (LatinKeyboardView) getLayoutInflater().inflate(
R.layout.input, null);
So inside my \res\layout\input.xml I added the reference to my popup-layout:
<org.my.project.here.LatinKeyboardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keyBackground="#drawable/samplekeybackground"
android:keyTextColor="#000000"
android:popupLayout="#layout/popup" <!-- here it is -->
/>
And my \res\layout\popup.xml looks like this; I believe I copied it from the provided sample project. Today I just changed the two marked lines for light blue background colour and for black text colour and that finally did the trick. Seems I had looped references earlier but no error messages, just the ugly black default layout.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/samplekeybackground">
<android.inputmethodservice.KeyboardView
android:id="#android:id/keyboardView"
android:background="#color/colorPrimary"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keyTextSize="22sp"
android:keyBackground="#drawable/samplekeybackground" <!-- here it is -->
android:keyTextColor="#000000" <!-- and here -->
tools:ignore="ResourceCycle"/>
<ImageButton android:id="#android:id/closeButton"
android:background="#android:color/transparent"
android:src="#drawable/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:clickable="true"/>
The mentioned samplekeybackground.xml is just a very simple definition, pointing to two actual xml-colour-defintions:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item
android:state_focused="false"
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/normal" />
<!-- Pressed state -->
<item
android:state_pressed="true"
android:drawable="#drawable/pressed" /></selector>
And just to be complete, because I appreciate stuff I can just copy and play with for testing, here is the normal.xml; the pressed.xml is the same, just a darker blue:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="#A1B7F7" />
<solid android:color="#C7D4FA"/>
</shape>
All this is from guessing and building many versions until I got lucky. Can probably not answer any follow-up questions, but it does work:
edit:I am new to stackoverflow so it wont let me Upload directly..Please click the link below
Android Studio EMPTY DESIGN
It works perfectly fine in emulator and my Physical device but i can't see anything on the design Layout..
I have tried this following solutions that i got via searching google
Updated SDK
Updated Android Studio
I also tried Build>Clean Project
File>Invalidate Cache/Restart
Tried to change the API to older version like API 25 and API 26..(Currently Installed API 28)..
Still nothing works help me..
XML CODE
<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"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
app:srcCompat="#drawable/ball_100x100"
tools:layout_editor_absoluteX="127dp"
tools:layout_editor_absoluteY="399dp" />
</android.support.constraint.ConstraintLayout>
I found answar to this thank you anyways..Maybe its a bug in Android Studio ..
Solution
Go to Design plane on top side click the themes Icon and select any Light.DarkActionBar
For example
Material Light->Material.Light.DarkActionBar..
In your styles xml-file change this:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
to this:
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
Works for me.
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.
First off, I know that this question has been asked before, but it hasn't been answered before. I hope someone can give me an answer.
In my application, I use the Toolbar from Appcompat_v7 (API 21). This is my code:
<android.support.v7.widget.Toolbar
style="#style/DarkActionbarStyle"
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="#dimen/actionbar_height" />
And this is the ToolBar style I use:
<style name="DarkActionbarStyle" parent="#style/Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="titleTextAppearance">#style/ActionBarTitle</item>
<item name="android:elevation">2dp</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeActionBarDark</item>
</style>
<style name="ThemeActionBarDark" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="actionBarItemBackground">#drawable/btn_dark_orange</item>
<item name="selectableItemBackground">#drawable/btn_dark_orange</item>
</style>
The problem is, that elevation doesn't work pre-lollipop. So my question is: Is it possible to have a shadow under the ToolBar on pre-lollipop devices?
This worked for me very well:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize" />
</android.support.v7.widget.CardView>
Using CardView container for toolbar is a bad idea.
CardView is heavy, especially for low end devices.
The best way is to put a gradient Shadow view below the toolbar. Shadow view must be a direct child to the coordinator layout. ie. The appbar which contains toolbar and shadow View must be siblings.
Add this view component to your layout.
<View
android:id="#+id/gradientShadow"
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_shadow"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_collapseMode="pin"/>
The drawable toolbar_shadow.xml
<?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:endColor="#33333333"
android:startColor="#android:color/transparent"/>
</shape>
This will solve the problems in pre-lollipop devices. But we don't want this shadow in lollipop and above devices so make visibility to gone in devices with lollipop and above.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
findViewById(R.id.gradientShadow).setVisibility(View.GONE);
}
Done.
You can add the shadow (elevation) back by using a FrameLayout with foreground="?android:windowContentOverlay". The elevation attribute is not supported pre-Lollipop. So if you are using FrameLayout like fragment container just add foreground attribute to it.
As I've had issues with the CardView widget method, I've used the FrameLayout method as mentioned by #Sniper; it is working perfectly!
I just wanted to share the code snippet you'll have to use.
Just put this directly under the toolbar where your main content starts:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:windowContentOverlay">
And don't forget to close with:
</FrameLayout>
It's possible to have real shadows - animated and generated. The method used by Lollipop is available since Froyo. Hardware acceleration used for shadow generation is available since Honeycomb I guess. Here's how it works:
draw your view to an off-screen bitmap with LightingColorFilter set to 0,0
blur the black shape (the off-screen bitmap) using the ScriptIntrinsicBlur class and elevation value as radius
draw the bitmap beneath the view
It requires adding custom elevation attributes, custom views capable of rendering shadows, and using render script and the compatibility library (for older devices). I'm not going to dive into the details, because there's a lot of them including issues with compilation and minor performance optimisations. But it's possible.
Why there's no shadows in the official support library?
it would require changes in the UI framework as it's impossible to freely draw outside view bounds
smooth animation requires a quite good GPU
See:
https://www.youtube.com/watch?v=jbU4SXblO5s
https://androidreclib.wordpress.com/2014/11/25/lollipops-shadows-on-gingerbread/
https://github.com/ZieIony/Carbon
I'm using this answer:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:titleTextAppearance="#color/White"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_shadow" />
</LinearLayout>
toolbar_shadow.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#3f3f3f"
android:endColor="#android:color/transparent"
android:angle="270" />
</shape>
You can't use the elevation attribute before API 21 (Android Lollipop).
You can however add the shadow programmatically, for example using a custom view placed below the Toolbar.
For example:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#drawable/shadow"/>
Where the shadow is a drawable with a black gradient.
To show shadow under your toolbar please use AppBarLayout available in Google Android Design Support Library. Here is an example of how it should be used.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
To use Google Android Design Support Library enter following into your build.gradle file:
compile 'com.android.support:design:22.2.0'
The solution with a view to add a shadow manually would work as long as there are no action bar menus. If so, the shadow view would stop before the action bar icons.
i think it is easier to have a vertical linear layout with appbar on the top and a view for shadow below it as the next linear layout item or in my case, it is
<LinearLayout Vertical>
<v7 toolbar/>
<RelativeLayout>
<View for shadow with alignParent_top= true/>
....
</RelativeLayout>
</LinearLayout>
I really hope the near future appCompat would fix this.