Develop Reference

Bottom item cut in reyclerview in android

Hey I am working in constraint layout with recylerview. My bottom item is cut in the screen. I read this stack overflow post. I don't want to use relative layout or linear layout. Can someone guide me how to fix this in constraint layout.
abc.xml
<?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">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="16dp"
app:closeIcon="#drawable/ic_cancel"
app:layout_constraintBottom_toTopOf="#+id/exploreScroll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.0" />
<HorizontalScrollView
android:id="#+id/exploreScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:scrollbars="none"
app:layout_constraintBottom_toTopOf="#+id/exploreList"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchView">
<com.google.android.material.chip.ChipGroup
android:id="#+id/exploreChips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipSpacingHorizontal="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:singleLine="true"
app:singleSelection="true" />
</HorizontalScrollView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/exploreList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:paddingTop="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/exploreScroll" />
</androidx.constraintlayout.widget.ConstraintLayout>
My view cut from
UPDATE
#Zain after your suggestion i tried in my xml any my HorizontalScrollView is going behind my RV. I am adding my blueprint and you can see clearly that, HorizontalScrollView is going behind. After removing app:layout_constraintBottom_toTopOf="#+id/exploreList" from the HorizontalScrollView.
2nd suggestion try

Disclaimer Using a wrap_content height with vertical RecyclerView
can have impact on performance in terms of recycling views; specially
if the height is going to change frequently. Check this article
for more illustration.
So, the first step is to designate the RecyclerView height or to constraint it; from the constraints you want it to expand to the bottom; so use 0dp for that. But in order to make the minimum height to wrap content of the RecyclerView (in case that the items don't exceed the screen height); you can set the default height constraint to wrap with app:layout_constraintHeight_default="wrap" constraint.
Then remove app:layout_constraintBottom_toTopOf="#+id/exploreList" from the HorizontalScrollView, this actually made the bottom item of the RV hide (your main issue); because it is an over-constraint; the HorizontalScrollView tends to push the RV to the bottom while the RV tends to push the HorizontalScrollView to the top.
This will solve the main issue; but when the items are fully accommodated by the screen (no scrolling in the RV), then it will be biased in the middle; to fix this use the bias with app:layout_constraintVertical_bias="0.0" to be biased to the top.
Adding this in place into the layout:
<?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">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="16dp"
app:closeIcon="#drawable/ic_cancel"
app:layout_constraintBottom_toTopOf="#+id/exploreScroll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed" />
<HorizontalScrollView
android:id="#+id/exploreScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchView">
<com.google.android.material.chip.ChipGroup
android:id="#+id/exploreChips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipSpacingHorizontal="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:singleLine="true"
app:singleSelection="true" />
</HorizontalScrollView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/exploreList"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:paddingTop="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/exploreScroll" />
</androidx.constraintlayout.widget.ConstraintLayout>

View not taking full width - ConstraintLayout - RecyclerView - Android

I have a simple layout for the items in RecyclerView, which contains a TextView and a RadioButton. Here is the layout xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tv_thali_name"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center_vertical"
android:hint="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/materialRadioButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="#+id/materialRadioButton"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now when I run the app, the RecyclerView looks like this -
If I set a fixed width (which I don't want to) for the TextView, then it is showing the TextView content.
I also tested the xml code in a separate layout,
As you can see it is showing the view as it should. But when using it as an item in RecyclerView, then only the TextView is not showing.
Am I missing something?

Try this edit:
<?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="50dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tv_thali_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="#+id/materialRadioButton"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I removed some extra constraint app:layout_constraintEnd_toStartOf="#+id/materialRadioButton" and added minor changes. This got to work.

Okay I fixed it. All I had to do is setting the RecyclerView width as match_parent. Previously it was 0dp.

Android - Constraint Layout - Alignment of Text and Icon

first of all I am new to Android-Development.
My question is regards alignment of different views in Android Studio/Development.
Specifically the properly height-alignment of an icon and text.
Icon-Text-Alignment
As you can see, I tried to align the text with the icon. However the result looks slightly different in the emulator.
Here is my .xml-file:
<?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=".DashboardActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="352dp"
android:fontFamily="#font/poppins_medium"
android:text="Dashboard"
android:textAlignment="viewStart"
android:textColor="#color/colorText"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.04" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="32dp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3"
app:srcCompat="#drawable/ic_settings_black_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
My questions are:
1. How can i fix the alignment of these two views?
2. Why is the result in the emulator different?
3. Is there a best-practice to align views properly?

<?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=".DashboardActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="352dp"
android:fontFamily="#font/poppins_medium"
android:text="Dashboard"
android:textAlignment="viewStart"
android:textColor="#color/colorText"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView10" />
<ImageView
android:id="#id/imageView10"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="32dp"
app:srcCompat="#drawable/ic_settings_black_24dp"
app:layout_constraintTop_toTopOf="#id/textView3"
app:layout_constraintBottom_toBottomOf="#id/textView3"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can do this simply by using a custom toolbar and adding a menu to it.

Try using Custom toolbar :
<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"
tools:context=".terminalShortActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#4EACE2"
app:popupTheme="#style/ThemeOverlay.AppCompat">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Terminal Shortcuts"
android:textColor="#FFFFFF" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</LinearLayout>

So I dig into the alignment issue a little further and came up with a few "solutions". Generally speaking and to answer my questions the "Custom Toolbar" is not the right solution to align the views.
The problem lies in the padding of fonts. Android take the whole view to align views and not as assumed the "text" only. Therefore the alignment looks off.
Different paddings/fonts
Poppinsmedium: without padding
Poppinsmedium: with padding; normal state
Android-Font: with padding; normal state
The bottom-padding can be eliminated with the following code:
android:includeFontPadding="false"
Or check this thread for more in-depth knowledge of the issues of font-padding.
To align views, now I am using Chain-Constraints and do it without padding. It looks like the best-way to align views, especially Text-Views. However, I have to say that despite the deleting of the bottom padding it is necessary to adjust the alignment a littlebit with the vertical-bias.
For reference:
constraintlayout.com
Android-Doc: constrain-chain

ConstraintLayout Bumping TextView Off Screen

I have an XML file with an ImageView and a TextView. Everytime that the TextView is populated, the text goes off of the screen. I looked at other people who have had the same problem and the common solution seems to be to set the Textview's width to 0dp. This hasn't worked for me. Wondering if anyone knows why?
Here is my constraintLayout XML file:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintRight_toLeftOf="#id/weather_data"
android:layout_width="50dp"
android:layout_height="match_parent" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE"
android:textStyle="bold"
android:paddingRight="16dp"
style="#style/TextAppearance.AppCompat.Large"
app:layout_constraintLeft_toRightOf="#id/weather_icon"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Here is what it looks like, text is clearly getting cut off:

I got the solution of your problem just use it:
<?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">
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/weather_data"
android:layout_width="50dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE "
android:textStyle="bold"
android:paddingRight="16dp"
style="#style/TextAppearance.AppCompat.Large"
app:layout_constraintLeft_toRightOf="#id/weather_icon"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>

You should set the width of your TextView to match_constraint which, in the XML, will be 0dp.
And I see you're using both left/right and start/end notations. Stick to only one of them.
I encourage you to use the start/end notation because there might be devices using your app that their language is one that reads from right to left, i.e.: Arabic, so using the start/end you don't have to worry about these devices.

Thanks to Sandeep and Martin. I combined their suggestions and this works well in the layout:
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintEnd_toStartOf="#id/weather_data"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="50dp"
android:layout_height="wrapcontent" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE"
android:textStyle="bold"
android:paddingRight="16dp"
app:layout_constraintStart_toEndOf="#id/weather_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/TextAppearance.AppCompat.Large"
android:layout_width="0dp"
android:layout_height="wrap_content" />

Put a button over an ImageView

I'm newbie in Android.
I would like to know if it's possible to put a button or another component over an ImageView. I've tried setting the image as a background image of a LinearLayout, but when I change between landscape and portrait mode, the image porportions are changed.
Thanks a lot.

Don't put the image as a background, you don't have any control on how the image is scaled. Instead, create a RelativeLayout, and put an ImageView as one of the child, and you can place anything (buttons etc) as other RelativeLayout children.
<RelativeLayout ...>
<ImageView (your image) ...>
<Button (the button you want) ... />
</RelativeLayout>

Try this code... it's Help you....
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/imageviewMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="Path "
/>
<Button android:id="#+id/but2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
Try this Code .....
In that give paramater in button to set your Button Position....
android:layout_margin or android:layout_alignParent
And also give Path of Image....

There is another way to do it,http://www.curious-creature.org/2009/03/01/android-layout-tricks-3-optimize-part-1/
Thank you.

The simpliest way to do it is to use a FrameLayout.

This is easy using the ConstraintLayout.
Set the constraints of the Button to the ImageView.
Drag the Button anywhere you want over the ImageView to position it.
XML code will be autogenerated.

For those using Constraint Layout: Just use an ImageView and add its constraints from all the four side to Parent and than add the other views as well.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:cardPreventCornerOverlap="true"
app:contentPadding="5dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/food"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imagebtn_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_share_24"
app:layout_constraintTop_toTopOf="parent"
android:padding="15dp"
app:layout_constraintStart_toStartOf="parent" />
<ImageButton
android:id="#+id/imagebtn_call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_call_24"
android:padding="15dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/expdate_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test_date"
android:background="#E2E3E4"
android:layout_marginBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/imagebtn_address"
android:layout_marginEnd="30dp"
android:padding="5dp"/>
<TextView
android:id="#+id/title_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginBottom="5dp"
android:background="#E2E3E4"
android:padding="5dp"
android:textSize="18sp"
android:text="#string/test_foodname"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imagebtn_address"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<ImageButton
android:id="#+id/imagebtn_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_location_on_24"
android:padding="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Note: Replace the drawables added with your own.