Develop Reference

Translating other views along with Button (on press)

I was looking to create a view like this:
It has the behavior of a button, so I used a ConstraintLayout and placed the image and the TextView ('some text here') on top of the button using constraints (the other text and icon is implemented as button text and icon respectively).
The xml is as follows (inside the constraint layout):
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_plan_change"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingHorizontal="10dp"
android:paddingVertical="30dp"
android:text="start now"
android:textAlignment="viewEnd"
app:icon="#drawable/ic_chevron_right_black_24dp"
app:iconGravity="end"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/iv_plan_change"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginHorizontal="10dp"
android:layout_marginVertical="25dp"
android:background="#drawable/circle_background"
android:backgroundTint="?attr/colorPrimary"
android:elevation="2dp"
android:padding="10dp"
android:src="#drawable/ic_money"
app:layout_constraintBottom_toBottomOf="#id/btn_plan_change"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toStartOf="#id/btn_plan_change"
app:layout_constraintTop_toTopOf="#+id/btn_plan_change" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tv_plan_change"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:elevation="2dp"
android:gravity="center_vertical"
android:lineSpacingExtra="5dp"
android:text="some text here"
app:layout_constraintBottom_toBottomOf="#+id/btn_plan_change"
app:layout_constraintStart_toEndOf="#+id/iv_plan_change"
app:layout_constraintTop_toTopOf="#+id/btn_plan_change" />
As you can see, I have used an elevation of 2dp on both the ImageView and the TextView to keep it on the same elevation as the button, but on pressing the button, both of them go behind the button and can't be seen.
I have experimented with animating translationZ of both both views on button press and release, but it doesn't work so well (sometimes animates later than button, sometimes goes behind it).
I would love to have a working implementation.

How to avoid ad occupying space of view directed by ConstraintLayout guideline in aspect of other view's space directed by other guideline?

When that ad at the bottom appears, it reduces space of TextView1 but the space of green (#4CAF50) TextView2 remains the same. I want both textviews' space to be percentally the same even after the ad showing up. I mean, guidelines should lift a bit after the banner shows up. I even tried to make editor count from the top to the banner by adding app:layout_constraintBottom_toTopOf="#+id/adView"to the guidelines but it still counts percents from the top to the bottom of ConstraintLayout. How can I prevent that from happening?
<androidx.constraintlayout.widget.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">
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
app:adSize="BANNER"
app:layout_constraintBottom_toBottomOf="parent"
app:adUnitId="ca-app-pub-3940256099942544/6300978111"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/topGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/adView"
app:layout_constraintGuide_percent="0.67"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/TextView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/black"
app:layout_constraintBottom_toTopOf="#+id/adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bottomGuideline" />
<TextView
android:id="#+id/TextView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#4CAF50"
app:layout_constraintBottom_toTopOf="#+id/bottomGuideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/bottomGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/adView"
app:layout_constraintGuide_percent="0.85"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Edit: my main goal is to solve this problem with piano keyboard.

The problem is caused by android:layout_height="0dp" while using Guidelines: in this way the black TextView will never up when banner is visible.
Take always the black textview: app:layout_constraintTop_toTopOf="#id/bottomGuideline" and app:layout_constraintBottom_toTopOf="#+id/adView": you are saying to set the top to the top of a guideline ,which never change its position, while the bottom to the bottom of the banner. Plus you set 0dp as height, so if the banner has Visibility GONE the black textView will have the bottom to the bottom of the parent (screen). If the banner is VISIBLE, instead, the textview will get the available space between banner and guideline.
You should give wrap_content instead of 0dp, but you should think to something else instead of guidelines. If TextView content is too low for what you want to achieve, you can always use this attribute android:minHeight="your_value_in_dp" to set a minimum height your TextView will have.

Material buttons steal clicks from a view that is declared after them in layout hierarchy

I want to hide some part of the content under a scrim (like in drawer layout).
The MaterialComponents buttons that are under this scrim view are receiving clicks to the scrim view, and that is a major problem.
content scrim view:
<FrameLayout
android:id="#+id/scrim"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="gone"
android:background="#color/transparent"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
button that steals clicks:
<com.google.android.material.button.MaterialButton
android:id="#+id/add_at_start"
android:theme="#style/ButtonArrowShapedLeft"
style="#style/ButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="Add"
android:visibility="gone"
tools:visibility="visible"
app:icon="#drawable/ic_add_black_24dp"
app:layout_constraintStart_toStartOf="#+id/container"
app:layout_constraintTop_toBottomOf="#+id/container" />
I already established that the problem lies within the button being elevated.
If I set the elevation of the scrim even to 2dp, the button receives no clicks, despite the fact it has probably more dp of elevation than the scrim view.
But this does not solve my problem, it actually makes it worse, because the scrim view now covers everything on the screen, even the content that is way later in layout hierarchy.
I know I can just disable the buttons when the content scrim is visible, but this just doesn't seem right and the buttons feeling entitled to stealing clicks just because of some ludicrous elevation actually angries me enough to seek help.

try this :
<com.google.android.material.button.MaterialButton
android:id="#+id/add_at_start"
android:theme="#style/ButtonArrowShapedLeft"
style="#style/ButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="Add"
android:visibility="gone"
android:clickable="true"
tools:visibility="visible"
app:icon="#drawable/ic_add_black_24dp"
app:layout_constraintStart_toStartOf="#+id/container"
app:layout_constraintTop_toBottomOf="#+id/container" />

Button overlapping EditText when keyboard is open

I have the following ConstraintLayout in my Android application:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<ImageView
android:id="#+id/image_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<TextView
android:id="#+id/instructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_large"
android:text="#string/instruction"
app:layout_constraintTop_toBottomOf="#id/support_ic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<Button
android:id="#+id/call_button"
android:layout_marginTop="#dimen/spacing_large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:text="#string/phone"
android:textSize="18sp"
android:textColor="#drawable/button"
app:layout_constraintTop_toBottomOf="#+id/instructions"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<EditText
android:id="#+id/message_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lines="8"
android:hint="#string/support_message_hint"
android:textColorHint="#color/text_hint"
android:inputType="textCapSentences|textMultiLine"
android:background="#color/background_gray"
android:padding="#dimen/spacing_small"
android:textColor="#color/black"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="top|left"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintVertical_weight="1"
/>
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/support_send"
android:background="#color/button_blue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
When I open the keyboard, the view adjusts and the bottom two widgets (the button and the editText) move with the keyboard. My problem however, is that whenever this happens, the #id/call_button Button lays on top of the editText. I do not want this. I want the editText to overlay the button when the keyboard is open.
Is there any way to make the editText take precedent when overlapping other widgets in this scenario? I tried adding editText.bringToFront() in my onCreate method, but that didn't do anything.
Also, I am trying to avoid nesting the bottom two widgets (the button and the editText) inside of their own layout. I want them all to remain in the same ConstraintLayout. Thank you for the help ahead of time.

I added android:elevation="4dp" to the editText's xml and it worked.

Material Design guidelines specify that Buttons use elevation in both their pressed (8dp elevation) and upressed (2dp elevation) states. https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
Which view you see when two are stacked on top of each other at the same elevation is dependent on the ordering of those views in your layout (e.g. why you expected the views written later to overlay the views written earlier), but elevation takes precedence over this.
As you've found, you can add elevation to your other views to make them "higher" than your button, but this is a bit ugly and might have some unwanted side-effects. I think a better choice would be to set the manifest attribute android:windowSoftInputMode="adjustPan" on your activity. This will cause your activity's view to slide up when the keyboard opens, rather than resizing.

Android Scrollview in RelativeLayout with ButtonBar

I'm trying to implement a login view where several EditTexts and a logo are displayed on the screen with a ButtonBar at the bottom, something like this:
alt text http://russellhaering.com/media/addAccount.png
The problem is that on very small screens, especially when they are rotated sideways, the entire main view doesn't fit onto the screen.
I currently have
<?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:background="#234C59" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="5dip"
android:paddingLeft="15dip"
android:paddingRight="15dip"
android:orientation="vertical" >
<ImageView
android:id="#+id/logo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:layout_centerHorizontal="true"
android:src="#drawable/logo" />
<EditText
android:id="#+id/input_email"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:inputType="textEmailAddress"
android:singleLine="true"
android:hint="Username or email" />
<EditText
android:id="#+id/input_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop=""
android:inputType="textPassword"
android:singleLine="true"
android:hint="Password" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttonbar_login"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
style="#android:style/ButtonBar" >
<Button
android:id="#+id/button_signup"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Sign Up" />
<Button
android:id="#+id/button_login"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Log In" />
</LinearLayout>
</RelativeLayout>
I've tried encapsulating the first LinnearLayout in a ScrollView that looks like this:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Linear Layout Here -->
</ScrollView>
But that introduces two problems:
The ScrollView doesn't scroll, even on screens where the data doesn't all fit
The ButtonBar floats on top of the onscreen keyboard, obscuring even more of the screen when the keyboard comes up.
Everything worked great when I had the buttons inside the ScrollView, but now that I have them in the ButtonBar I'm having a lot of trouble figuring this out.

It turned out that the solution required two steps:
The inability to scroll was a result of the ScrollView being behind the Button Bar. To fix this, I defined the ScrollView below the Button Bar, then used android:layout_above="#id/buttonbar_login" to force the ScrollView to reside entirely above the Button Bar.
Apparently when the onscreen keyboard is opened, if you have a ScrollView it will be resized allowing the Button Bar to float up with the keyboard. To fix this I modified the manifest and added android:windowSoftInputMode="adjustPan" to prevent the ScrollView from resizing.

If your use case supports hiding of the button bar in landscape orientation you can check Resources.getSystem().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE and set the button bar to View.GONE.
You also probably need to set android:windowSoftInputMode="adjustResize" on the <activity> in your manifest file. Android will only put it in adjustResize automatically when the root layout is a ScrollView (iirc).