I created simple layout with 5 expandable textviews inside ConstraintLayout. All it must be scrollable (because there will be a lot of content) so all this is inside ScrollView. All this textViews i want center vertically (should look like on first picture) so I used android:layout_gravity="center" to my Constrait. First of all I noticed that when I use android:fillViewport="true" on ScrollView then center doesn't work. Otherwise when I use android:fillViewport="false" center work but when TextView contains a lot of content it doesn't scroll properly. On second picture you can see that my 1-3 textview just hide (screen is scrolled max to top), on next picture we can see that scrollView doesn't fit properly to content and there is a lot of empty space (that space should be on top where are my missing 1-3 textViews). Why's that ? How to work this out ?
Here some code
<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:background="#color/colorPrimary"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/NavigateTopInfo"
android:layout_marginTop="#dimen/_5sdp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/MapButton"
android:layout_width="#dimen/_30sdp"
android:layout_height="#dimen/_30sdp"
android:layout_alignParentEnd="true"
android:layout_marginEnd="#dimen/_5sdp"
android:background="#drawable/ic_map"
android:backgroundTint="#ffffff"
android:onClick="buttonClicked" />
<ImageButton
android:id="#+id/ExitButton"
android:layout_width="#dimen/_30sdp"
android:layout_height="#dimen/_30sdp"
android:layout_alignParentStart="true"
android:layout_marginStart="#dimen/_5sdp"
android:background="#drawable/ic_exit_to_app"
android:backgroundTint="#ffffff"
android:onClick="buttonClicked" />
</RelativeLayout>
<ScrollView
android:id="#+id/ScrollTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="false"
android:layout_marginTop="#dimen/_8sdp">
<android.support.constraint.ConstraintLayout
android:id="#+id/myLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
tools:context=".InfoActivity">
<TextView
android:id="#+id/textview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView1"
android:textColor="#color/textColor"
android:textSize="18sp" />
<TextView
android:id="#+id/textview1_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textview1" />
<TextView
android:id="#+id/textview2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView2"
android:textColor="#color/textColor"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="#+id/textview1_idcontent" />
<TextView
android:id="#+id/textview2_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textview2" />
<TextView
android:id="#+id/textview3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView3"
android:textColor="#color/textColor"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="#+id/textview2_idcontent" />
<TextView
android:id="#+id/textview3_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textview3_id" />
<TextView
android:id="#+id/textview4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView 4"
android:textColor="#color/textColor"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="#+id/textview3_idcontent" />
<TextView
android:id="#+id/textview4_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textview4" />
<TextView
android:id="#+id/textview5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView5"
android:textColor="#color/textColor"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="#+id/textview4_idcontent" />
<TextView
android:id="#+id/textview5_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>
Don't use android:layout_gravity="center" to ConstraintLayout. It is responsible for 2nd and 3rd problem. To make the view vertically centered place your ScrollView inside RelativeLayout and set centerInParent to true. Besides this to make the view horizontally centered inside ConstraintLayout use left and right Constraint to parent and keeps width as wrap_content.
<?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="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/NavigateTopInfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--Header content -->
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="TextView1" />
<TextView
android:id="#+id/textview1_idcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1 Content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview1" />
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="TextView2"
app:layout_constraintTop_toBottomOf="#+id/textview1_idcontent" />
<TextView
android:id="#+id/textview2_idcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1 Content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview2" />
<!--Other content -->
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</RelativeLayout>
</LinearLayout>
Related
I have a TextView inside a LinearLayout and I want the background of my TextView to always display blue, filling the space horizontally, esto es lo que necesito:
But I don't know how to get it, the contained text can change, if I set android:layout_width="match_parent" it won't show all the text when there are long texts. And if I use android:layout_width="wrap_content" it will look like this:
This is what I have:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#drawable/rp"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout...>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/week"
android:gravity="center"
android:text="Text"
android:textColor="#color/white" />
<TextView...>
</LinearLayout>
I fixed it now, I changed my LinearLayout to a ConstraintLayout and put a view of the same color as my textview, just behind:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#drawable/rp"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout...>
<View
android:id="#+id/view6"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/week"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/week"
android:gravity="center"
android:text="Text"
android:textColor="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"/>
<TextView...>
</androidx.constraintlayout.widget.ConstraintLayout>
If you can set a fixed width for your outer LinearLayout, then your requirement can be achieved by wrapping the TextView in another layout.
Please find sample code below:
<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:layout_gravity="center_horizontal"
android:orientation="vertical"
android:padding="5dp">
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#drawable/blue_border_bg"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:src="#android:color/background_dark" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_text_highlight">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text"
android:textColor="#color/white"
android:textSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:text="2000"
android:textColor="#cc000000" />
</LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/blue_border_bg"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:src="#android:color/background_dark" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_text_highlight">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text. Large text"
android:textColor="#color/white"
android:textSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:text="2000"
android:textColor="#cc000000" />
</LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/blue_border_bg"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:src="#android:color/background_dark" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_text_highlight">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text. Very Large text"
android:textColor="#color/white"
android:textSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:text="2000"
android:textColor="#cc000000" />
</LinearLayout>
</LinearLayout>
The code will generate the following output
I am working on a UI, in which I have to take email and number from user, buttons should must be at bottom, after button, there is a footer too on bottom. I have to make it responsive. I am using scroll view for this purpose. I am stuck on a point.
I am using wrap_content as height for a view, and giving its top to bottom of upper view, and its bottom to top of lower view's top. On small screens, it is working fine, but due to these constraints, on large screens, it is in the centre of screen.
Please have a look on it:
<?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"
android:background="#color/white"
android:orientation="vertical">
<ScrollView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/footer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="6dp"
android:scrollbars="none"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/icon_img"
android:layout_width="wrap_content"
android:layout_height="230dp"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="18dp"
android:src="#drawable/ic_sample"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/loginTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/icon_img"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:fontFamily="#font/exo_light"
android:gravity="start"
android:text="Login"
android:textColor="#color/charcol_blue"
android:textSize="22sp"
app:layout_constraintTop_toBottomOf="#id/icon_img" />
<TextView
android:id="#+id/login_Desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/loginTxt"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/exo_regular"
android:gravity="start"
android:text="Enter your credentials"
android:textColor="#color/charcol_blue"
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="#id/loginTxt" />
<EditText
android:id="#+id/loginEditTextEmail"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/login_Desc"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#drawable/rounded_input_shape"
android:fontFamily="#font/exo_regular"
android:hint="Email"
android:inputType="textEmailAddress"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:textSize="17sp"
app:layout_constraintTop_toBottomOf="#id/login_Desc" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/btnLayout"
app:layout_constraintTop_toBottomOf="#id/loginEditTextEmail">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginHorizontal="20dp"
android:background="#drawable/rounded_input_shape"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="50dp">
<com.hbb20.CountryCodePicker
android:id="#+id/ccp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#F5F5F5"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:ccp_autoDetectCountry="true"
app:ccp_defaultPhoneCode="41" />
<EditText
android:id="#+id/editText_carrierNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint=" Ph Number"
app:layout_constraintLeft_toRightOf="#+id/ccp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/ccp"
app:layout_constraintBottom_toBottomOf="#+id/ccp"
android:fontFamily="#font/exo_regular"
android:inputType="phone"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:textSize="15sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/btnLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="#+id/loginBtnSubmit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/blue_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="#string/login"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/imageView1"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toLeftOf="#id/loginBtnSubmit"
app:layout_constraintRight_toLeftOf="#id/orText"
app:layout_constraintTop_toTopOf="#+id/orText" />
<TextView
android:id="#+id/orText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:fontFamily="#font/exo_regular"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="OR"
android:textColor="#color/black"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/loginBtnSubmit" />
<View
android:id="#+id/imageView2"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toRightOf="#id/orText"
app:layout_constraintRight_toRightOf="#id/loginBtnSubmit"
app:layout_constraintTop_toTopOf="#+id/orText" />
<Button
android:id="#+id/guestContinue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/white_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="Sign Up"
android:textAllCaps="false"
android:textColor="#color/instruction_black_color"
android:textSize="16sp"
app:layout_constraintTop_toBottomOf="#+id/orText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:fontFamily="#font/exo_regular"
android:text="App "
app:layout_constraintTop_toTopOf="#+id/txt2"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintRight_toLeftOf="#+id/txt2"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:fontFamily="#font/exo_regular"
android:gravity="center_vertical"
android:text="Footer"
app:layout_constraintTop_toTopOf="#+id/footerImg"
app:layout_constraintBottom_toBottomOf="#+id/footerImg"
app:layout_constraintRight_toLeftOf="#+id/footerImg"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<ImageView
android:id="#+id/footerImg"
android:layout_width="30dp"
android:layout_height="22dp"
android:layout_marginLeft="2dp"
android:scaleType="fitCenter"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/logout" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am facing issue agains a constraint layout whose id is: "phone_layout"
If I will use its height as 0dp, it will works fine on large screens, but on small screens (when scroll view will be used to scroll screen), this layout will not be shown because of 0dp height.
I want this phone_layout to be below of email layout on every screen(small/large).
I resolved it by using
app:layout_constraintVertical_bias="0"
I am creating a RecyclerView with the data from the database. And for making a row I created a resource file as row_layout.xml and it has two TextView. I want it in a CardView but while creating the TextView created cant be aligned.
<?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="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:layout_gravity="center">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
tools:ignore="MissingConstraints"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="#id/sl"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="9dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
You just have to use the Constraints the right way instead of suppressing the warning by adding tools:ignore="MissingConstraints".
When aligned to Left:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/nameTV"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#id/sl"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
When aligned to both Left and Right of the parent which makes them equally distanced:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/nameTV"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/sl"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
When aligned to both Left and Right of the parent but with horizontal chain style packed, just like this spread inside will spread them at each ends :
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/nameTV"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/sl"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
When aligned to Right of the parent:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/nameTV"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/sl"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Just like these, play with Start/Left and End/Right Margins and layout width and height and create custom layouts as you want. I've used Left and Right instead of Start and End, but if you want to make your application support RTL(Right to Left) layouts, use only Start/End constraints and margins.
Also, if you set both left and right constraints of a view and then set the width as 0dp, it will the available space completely. ConstraintLayout is very advanced, have a look in the official docs.
Try using this
<androidx.cardview.widget.CardView 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:layout_gravity="center"
app:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/s1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/s2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/s2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/s1"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Hope this helps... Feel free to ask for clarifications...
I'm pulling data from firebase into a recyclerview. When I add the recycleView.setHasFixedSize(true); my app doesnt crash but nothing appears. When I get rid of this line my data appears but all the content in touching and the cardview is shrinking to suit the data. Is there any solutions to this?
Edit:
This is the CardView:
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/eventParent"
android:layout_width="240dp"
android:layout_height="300dp"
android:background="#drawable/border_style"
android:layout_marginRight="24dp"
android:paddingRight="24dp"
android:orientation="vertical"
>
<ImageView
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginLeft="70dp"
android:background="#drawable/bgitemcustom"
android:scaleType="centerCrop"
android:src="#drawable/crash" />
<TextView
android:id="#+id/make"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="10dp"
android:lineSpacingExtra="8dp"
android:text="Mercedes"
android:textAlignment="center"
android:textSize="22sp" />
<TextView
android:id="#+id/type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="10dp"
android:lineSpacingExtra="8dp"
android:text="Saloon"
android:textAlignment="center"
android:textSize="22sp" />
<TextView
android:id="#+id/year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="10dp"
android:lineSpacingExtra="8dp"
android:text="2004"
android:textAlignment="center"
android:textSize="22sp" />
<Button
android:id="#+id/connect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Connect"
android:textSize="14sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
This is where i am creating the recylerview. Its the first one i'm using with the id:eventsplace:
<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:orientation="vertical" android:layout_width="match_parent"
android:background="#drawable/blue"
android:layout_height="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="#string/title"
android:textAlignment="center"
android:textColor="#color/yellow"
android:textSize="25sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/eventsplace"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="20dp"
android:clipToPadding="false"
android:paddingRight="250dp"
app:layout_constraintBottom_toTopOf="#id/contacts"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintVertical_bias="0.0">
</androidx.recyclerview.widget.RecyclerView>
<TextView
android:id="#+id/contacts"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_marginBottom="368dp"
android:text="Contacts"
android:textColor="#color/yellow"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#id/contacts"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/eventsplace"
app:layout_constraintVertical_bias="1.0" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/contactsView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingBottom="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/contacts"
app:layout_constraintVertical_bias="0.069">
</androidx.recyclerview.widget.RecyclerView>
</androidx.constraintlayout.widget.ConstraintLayout>```
After trying out different approaches, the issue is because the item layout does not fit within the recycler layout.
Here are a few solutions :
Set the height of your CardView to wrap_content
Set a fixed height for the layout_height of recycler view in constraint layout instead of wrap_content
so I have a recycler view layout that look like the image below. I set the width to match parent and in this layout it is like what I want it to be. So when I call this recycler layout to my home I want the view to be exactly like this.
Recycler Layout
but when I call the recycler view to my home layout and I try to run it why does it becomes like this? its like my width is wrap content. the width isn't full until the right side.
My recycler view when I run the app
here is my recyclerview layout xml code :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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="90dp"
android:layout_margin="5dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_marginLeft="5dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:src="#mipmap/ic_launcher"
/>
<TextView
android:id="#+id/textViewTitle"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="20dp"
android:text="Plastik"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textViewCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
app:layout_constraintTop_toBottomOf="#+id/textViewTitle"
app:layout_constraintLeft_toRightOf="#+id/imageView"
android:text="Non Organik"
android:textSize="16sp"/>
<TextView
android:id="#+id/textViewPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Price"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginRight="5dp"
android:textSize="#dimen/font_medium"
android:textStyle="bold"/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
And this is my Home Layout xml code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical"
android:theme="#style/HomeTheme"
tools:context=".HomeFragment">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logog40w"
android:layout_width="150dp"
android:layout_height="60dp"
android:src="#drawable/logog4w"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/pohong4w"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentRight="true"
android:src="#drawable/pohong4w"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/user_name"
android:layout_width="85dp"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Name"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/pohong4w"
app:layout_constraintTop_toTopOf="#+id/logog40w" />
<TextView
android:id="#+id/jemputrutin_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:text="Status Penjemputan Rutin:"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pohong4w" />
<TextView
android:id="#+id/fragment_home_jemputrutin_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="STATUS"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#+id/jemputrutin_status"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/jemputrutin_status" />
<LinearLayout
android:id="#+id/layoutmainfeature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jemputrutin_status">
<android.support.v7.widget.CardView
android:id="#+id/jemput_rutin"
android:layout_width="105dp"
android:layout_height="135dp"
android:layout_margin="5dp"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="51dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp"
>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:padding="4dp"
android:src="#drawable/g4w_jemputrutin" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Jemput Rutin"
android:textColor="#000000"
android:textSize="12dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/antar_sendiri"
android:layout_width="105dp"
android:layout_height="135dp"
android:layout_margin="5dp"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="51dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp">
<ImageView
android:id="#+id/img_antarsendiri"
android:layout_width="90dp"
android:layout_height="90dp"
android:padding="4dp"
android:src="#drawable/g4w_antarsendiri" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Antar Sendiri"
android:textColor="#000000"
android:textSize="12dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/jemput_sekarang"
android:layout_width="105dp"
android:layout_height="135dp"
android:layout_margin="5dp"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="51dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:padding="4dp"
android:src="#drawable/g4w_jemputsekarang" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Jemput Sekarang"
android:textColor="#000000"
android:textSize="11dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<TextView
android:id="#+id/recyler_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Harga Per Kg"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/layoutmainfeature" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:nestedScrollingEnabled="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/recyler_title" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
remove these two lines from recycler view and try again
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent
which makes your recycler view part like this
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:nestedScrollingEnabled="true"
app:layout_constraintTop_toBottomOf="#+id/recyler_title" />