Apply elevation to TextInputLayout - java

I'm trying to create a searchbar with similar styling to the Toolbar in the Google Photos app - that is, rounded with a drop shadow.
We're using a TextInputLayout from the Material library as the sole child of a fragment (which gets inflated at the top of parent fragments).
Below is what I have at the moment (I have a drawable available to use as the background once I can get the elevation to shop up, I've omitted that for clarity)
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.SearchFragment">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/searchTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/searchTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:paddingStart="24dp"
android:paddingEnd="24dp"
android:background="#ffffff"
android:elevation="20dp"
android:drawableStart="#drawable/ic_menu_black_24dp"
android:hint="Search" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<!--android:background="#drawable/searchbar_rounded"-->
Am I missing something obvious here, or is this a limitation of the TextInputLayout?

Put textView inside cardView and it will make shadow for sure
Example of the cardView
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
card_view:cardUseCompatPadding="true"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="3dp">

Related

How to keep the floatingActionButton fixed at is original position when scrolling the recyclerview

I need help to keep the fab shown in pics at a fixed position when scrolling up or down i cant find anything on google as most search results return information on hiding the fab when scrolling
Here is my xml
<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="#color/accent"> <android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/accent"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp"
/>
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/addmorefab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="#dimen/fab_marginBottom"
android:layout_marginRight="#dimen/fab_marginRight"
android:clickable="true"
app:backgroundTint="#color/primary"
app:srcCompat="#drawable/ic_action_new"
app:layout_anchor="#id/listView"
app:layout_anchorGravity="bottom|right|end"
/></android.support.constraint.ConstraintLayout>
I even tried to make two constraint layouts it didnt work
I also tried using recyclerView.setNestedScrollingEnabled(false);
It worked but it was limiting the scrolling of the recyclerview.
On the second picture i want the fab to remain fixed where it is not scrolling
You can use this view if you want your bright button to remain fixed while scrolling through the recycler.
I used Android X libraries and you can use lower version libraries.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/addmorefab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="18dp"
android:layout_marginBottom="18dp"
android:clickable="true"
app:backgroundTint="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#android:drawable/ic_input_add" />
</androidx.constraintlayout.widget.ConstraintLayout>

Any reason why the distance between buttons do not match in design view and on device at Android Studio?

Here is the code I am using at the layout file. I am using Material components as theme style. Here I used both material component button and button, but I think they are both converted to material button due to my theming style:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/createAccountBtn"
android:layout_width="238dp"
android:layout_height="wrap_content"
android:layout_marginStart="86dp"
android:layout_marginTop="35dp"
android:layout_marginEnd="87dp"
android:layout_marginBottom="318dp"
android:text="#string/create_account"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/signInBtn" />
<Button
android:id="#+id/signInBtn"
android:layout_width="237dp"
android:layout_height="wrap_content"
android:layout_marginStart="89dp"
android:layout_marginTop="282dp"
android:layout_marginEnd="85dp"
android:layout_marginBottom="14dp"
android:text="#string/common_signin_button_text"
app:layout_constraintBottom_toTopOf="#+id/createAccountBtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The emmulator model and the model for which you designed the app might be different !
Please check that and revert back .
Apparently I need to use match_parent and wrap_content properties for layout_width and layout_height. One can see this documentation for its use with ConstraintLayout here: https://developer.android.com/training/multiscreen/screensizes
But I would suggest using LinearLayout as ConstraintLayout in my case behaved still badly because I had to define margin properties in exact dps which may not align with a certain screen size. I am adding the LinearLayout solution below which worked as I expected in portrait and landscape mode as well:
<?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:gravity="center"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="#+id/createAccountBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/create_account" />
<Button
android:id="#+id/signInBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/common_signin_button_text"/>
</LinearLayout>

Scaling an ImageView when the soft keyboard opens

I'm creating a tabbed activity. As long as the first tab is selected, the soft keyboard should be visible. I achieved that by adding this line to my manifest file in the activity tag:
android:windowSoftInputMode="stateVisible|adjustResize"
As the keyboard opens, the space for the layout shrinks. The most space is occupated by an ImageView. I want it to shrink with the layout size to allow the other 2 views (which should remain the same size) to fit on the screen. However, although the soft input mode is set to adjustResize, the ImageView keeps its size after the keyboard opens. Here's a comparison of the current layout and the one I want to achieve (the ImageView is the red rectangle):
comparison
My fragment's layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".DataInputFragment"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/image"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<requestFocus/>
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
</LinearLayout>
</RelativeLayout>
My activity:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TabLayout">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
How to force the ImageView to resize according to the screen size to make all of the views fit on the screen?
[EDIT]: My attempt to create a ConstraintLayout, which didn't solve the problem (the ImageView still keeps its original size):
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:orientation="vertical"
tools:context=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="#drawable/image"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text"/>
</android.support.constraint.ConstraintLayout>
I've created an Android Project from scratch on Android Studio 4.0, using the "Tabbed Activity" template and uploaded it to GitHub.
I've had no issues with the resize taking place when the activity is resized.
What Did I change?
In the manifest.xml I added android:windowSoftInputMode="adjustResize"
I modified the default layout for the fragment in the tab to include an ImageView (called imageToShrink) and an EditText (called editLayout).
I left the existing TextView untouched, except that since it's at the top, I made it the HEAD of the vertical Chain, and gave it a 0.0 BIAS to be aligned at the top, rather at the center.
When you tap on the cyan EditText at the bottom, the keyboard pops (I made it number only so it's even taller) and you can see how the image is re-drawn after its new size is recomputed.
This is how it looks when it opens: (beautiful color palette!)
And this is how it looks when I tap the "edit field" to pop the keyboard:
your ImageView should not have wrap_content attributes, because it will always have constant size and wont be able to resize automatically. I would suggest using ConstraintLayout and use app:layout_constraintDimensionRatio. Other option is use LinearLayout weight (not recommending).
Ant third option is to detect when keyboard is visible, when not with ViewTreeObserver.OnGlobalLayoutListener and do stuff programmaticaly.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<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=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="3:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img" />
<EditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</EditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text" />
</android.support.constraint.ConstraintLayout>

How to get a whole screen in an activity to scroll when a scrollable recyclerView imakes up only half of the phone screen

I want my whole screen to scroll but only my recycler will scroll at the moment. This occurs despite all elements being placed in a linear layout inside a Scroll View.
Any ideas where the error is? Here's the relevant code.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NoodleDetailActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/noodleImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_bottom"
android:fontFamily="sans-serif-smallcaps"
android:hapticFeedbackEnabled="false"
android:padding="30dp"
android:text="TextView"
android:textSize="18sp" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/extras_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#F2F2F2"
android:padding="0dp" />
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
This is what it looks visually.
demo appearance
Found out: it seems best practice is to set the recyclerView to be the whole layout and make it contain multiple view types.
I won't be using a nested scroll view.

CardView doesn't display correctly in different screen densities?

I have a ViewPager with Cardviews, cardviews are displays correctly on certaing devices but in most are displays slimly.
The ViewPager is in a Fragment.
I'm using LinearLayout to CardView definition, I tried Relative but I have same problem.
https://ibb.co/kyNF5Yz "Example from differents devices"
Item.xml
https://gist.github.com/Bryan9797/1eda5e7d02d1a12140115a539f164e3e
Fragment_bateria.xml
https://gist.github.com/Bryan9797/b5d7b16a6d0599b7fd7f593226a4523d
activity_main.xml
https://gist.github.com/Bryan9797/632461d73286afa5493167048b8e19c0
I expect display Cardview correctly on different devices.
you can use sdp library for responsive XML for all devices.
https://github.com/intuit/sdp
you can install this dependency in gradle and us this sdp instead of dp.
you can set this sdp and set height to wrap_content in your xml layout as below:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_5sdp"
app:cardCornerRadius="#dimen/_20sdp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="#dimen/_350sdp"
android:scaleType="centerCrop"
android:src="#color/colorAccent" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:layout_marginLeft="#dimen/_15sdp"
android:layout_marginTop="10dp"
android:text="Escritorio ejecutivo"
android:textColor="#262626"
android:textSize="#dimen/_20ssp" />
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginLeft="#dimen/_15sdp"
android:layout_marginTop="#dimen/_3sdp"
android:layout_marginRight="#dimen/_15sdp"
android:drawablePadding="#dimen/_10sdp"
android:ellipsize="end"
android:maxLines="4"
android:text="Escritorio ejecutivo"
android:textSize="#dimen/_15ssp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>

Categories

Resources