Adding linear layout messes up the layout in preview (Android Studio) - android

After positioning everything in the layout. When I add a LinearLayout all the positions of the components get messed up. And I can't even position them back. If I move them they move back to the messed up position.
How do I get them back into the positions I had given earlier? Thank You
Here are before and after:
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:text="#string/title" />
<TextView
android:id="#+id/dateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="88dp"
android:text="#string/date" />
<TextView
android:id="#+id/DescriptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="104dp"
android:gravity="center_horizontal"
android:text="#string/description"
android:textAlignment="center" />
<ImageView
android:id="#+id/NasaImageView"
android:layout_width="345dp"
android:layout_height="345dp"
android:contentDescription="#string/title"
android:src="#drawable/test_image" />
</LinearLayout>


I believe, you could do
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="36dp"
android:text="#string/title" />
<TextView
android:id="#+id/dateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="88dp"
android:text="#string/date" />
<TextView
android:id="#+id/DescriptionTextView"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_marginBottom="104dp"
android:gravity="center_horizontal"
android:text="#string/description"
android:textAlignment="center" />
<ImageView
android:id="#+id/NasaImageView"
android:layout_width="345dp"
android:layout_gravity="center_horizontal"
android:layout_height="345dp"
android:contentDescription="#string/title"
android:src="#drawable/test_image" />
</LinearLayout>


set android:gravity to center in linerLayout and add margin to the child.

Related

How to make the child of a view fill the space (match_parent) but keep growing if necessary?

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

How do I convert this Layout to ConstraintLayout?

I am trying to convert this layout to ConstrainLayout ,relativeLayout1 layout_height must be 60dp,how do I convert this layout to ConstraintLayout?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/imageView1"
android:orientation="vertical">
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/imageView2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

<?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="wrap_content"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView1"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintVertical_bias="0.3" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView1"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintVertical_bias="0.74" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textview2"
app:layout_constraintTop_toTopOf="parent">
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Here is one possible conversion. Here are a few notes about this conversion:
Setting the size of the ImageView to 60dp then constraining things to that effectively sets the height of the "row" to 60dp. If the text in the text views is long (or large font) it can still overflow the row. That was true with the relative layout too.
Setting the vertical chain style for text views 2 and 3 to "packed" mimics what the internal linear layout does. If you just want them to be aligned to the top of the image then the chain is not necessary.
<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="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher"
app:layout_constraintTop_toBottomOf="#id/textView1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="1"
/>
<TextView
android:id="#+id/textview2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="#id/imageView1"
app:layout_constraintBottom_toTopOf="#id/textView3"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintEnd_toStartOf="#id/imageView2"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toBottomOf="#id/textview2"
app:layout_constraintBottom_toBottomOf="#id/imageView1"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintEnd_toStartOf="#id/imageView2"
app:layout_constraintHorizontal_bias="0.0"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher"
app:layout_constraintTop_toBottomOf="#id/textView1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="1"
/>
<TextView
android:id="#+id/textview4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="#id/imageView2"
app:layout_constraintBottom_toTopOf="#id/textView5"
app:layout_constraintStart_toEndOf="#id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toBottomOf="#id/textview4"
app:layout_constraintBottom_toBottomOf="#id/imageView2"
app:layout_constraintStart_toEndOf="#id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Center vertically ConstraintLayout with expandable textViews inside ScrollView (scroll/center problem)

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>

Problems with the TextView position

I need to avoid textview touching each other, I tried many ways but I cant make it work.... What I should do? Thanks! Please view my screenshot
screenshot
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:padding="15dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_weight="0.11" />
<TextView
android:id="#+id/tvnombre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/imageView"
android:layout_toLeftOf="#+id/tvultvalor"
android:paddingLeft="15dp"
android:textColor="#333"
android:textSize="16dp"
android:layout_weight="1"
android:textStyle="bold" />
<TextView
android:id="#+id/tvdescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvnombre"
android:layout_toEndOf="#+id/imageView"
android:layout_toRightOf="#+id/imageView"
android:layout_weight="1"
android:paddingLeft="15dp"
android:textColor="#333" />
<TextView
android:id="#+id/tvultvalor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="0dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:gravity="right"
android:paddingLeft="15dp"
android:textAlignment="gravity"
android:textColor="#333"
android:textStyle="bold" />
</RelativeLayout>
tvnombre is the id of the lef TextView, tvultvalor is the id of the right TextView
Thank you!

Try this
<LinearLayout
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="10dp"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3">
<TextView
android:id="#+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingStart="16dp"
android:paddingEnd="16dp"
tools:text="Lorem Ipsum is simply dummy text of the " />
<TextView
android:id="#+id/tv_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxLines="1"
android:paddingStart="16dp"
android:paddingEnd="16dp"
tools:text="#string/contact_info" />
</LinearLayout>
<TextView
android:id="#+id/tv_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
tools:text="dummy text" />
</LinearLayout>
</LinearLayout>

The best way to achieve your layout is creating via Constraint Layout. Similar to what you did, I made a example that can fit for you. Hope this helps you! :-)
<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:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:padding="15dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_marginStart="16dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_weight="0.11"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvnombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#333"
android:textSize="16dp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/tvultvalor"
app:layout_constraintRight_toLeftOf="#+id/tvultvalor"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
tools:text="dT/dt" />
<TextView
android:id="#+id/tvdescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#333"
app:layout_constraintLeft_toRightOf="#+id/imageView"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/tvnombre"
tools:text="N TAG" />
<TextView
android:id="#+id/tvultvalor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:textAlignment="gravity"
android:textColor="#333"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView"
tools:text="100 C" />
</android.support.constraint.ConstraintLayout>

LinearLayout can't align properly

Hi I want a layout like bellow
Main amount 120 usd
Extra charge 2 usd
----------------------------
Sub Total 122 usd
Discount 5 usd
----------------------------
Total amount 117 usd
I am totally not familiar with constraint layout I tried to use LinearLayout gravity/layout/alignment gravity right for right part but its not working ,all aligned from left.I will be glad if someone give a example code for this layout plz.
Update: my current code
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:text="Main Amount"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="10 "
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="USD"
android:layout_height="match_parent" />
</LinearLayout>

For this kind of view use LinearLayout with weightSum property to the parent LinearLayout and use layout_weight for the Children LinearLayout
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2">
<TextView
android:layout_width="wrap_content"
android:text="Main Amount"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="10 "
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="USD"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>

LinearLayout is going to be difficult without a lot of hard coding of layout_width on the children. Have you tried TableLayout?
https://developer.android.com/reference/android/widget/TableLayout
TableLayout can be a pain sometimes to get perfect, but it will give you the layout you are looking for.

You can try something like this:
I used LinearLayout as the parent and add RelativeLayout to it to create align the TextViews the way you want to.
You can dupe the Relative layout the create the rest.
not sure if it's the best way... but it works
<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=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Main" />
<TextView
android:id="#+id/amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/main"
android:text="amount" />
<TextView
android:id="#+id/extra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Extra"
android:layout_below="#+id/amount"
/>
<TextView
android:id="#+id/charge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/extra"
android:layout_alignBottom="#+id/extra"
android:text="charge" />
<TextView
android:id="#+id/usd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/main"
android:layout_alignParentRight="true"
android:text="usd"
android:layout_marginRight="30dp"
/>
<TextView
android:id="#+id/num1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/main"
android:layout_toLeftOf="#+id/usd"
android:text="120"
android:layout_marginRight="10dp"
/>
<TextView
android:id="#+id/usd2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/extra"
android:layout_alignParentRight="true"
android:text="usd"
android:layout_marginRight="30dp"
/>
<TextView
android:id="#+id/num2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/extra"
android:layout_toLeftOf="#+id/usd2"
android:text="120"
android:layout_marginRight="10dp"
/>
</RelativeLayout>

I believe that for this layout you better use ConstraintLayout.
It will take you only a few minutes to build this layout, you can add Guidelines to make your life easier.
In addition, your layout will be responsive to all screen sizes so consider using ConstraintLyaout
Here is an example of you wanted layout usingConstraintLyaout:
<?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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button6"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="4dp"
android:text="Button"
android:background="#color/bronze"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="4dp"
android:text="Button"
android:background="#color/bronze"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/button" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button7"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button7" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button2" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button3" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button4"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button4" />
</android.support.constraint.ConstraintLayout>
It will look like this:

Categories

Resources