As you may know if one tag come after another tag in xml the last one can overlap the first one.
as you can see in this example:
<?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"
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:text="Button ONE"
android:textSize="70sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
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:layout_marginTop="8dp"
android:text="Button TWO"
android:textSize="70sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
but this rule wouldn't apply if the first view have elevation (however I just tested it by TabLayout).
here is example of not overlapping first view because of elevation attribute:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#09A536"
android:elevation="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499" />
<ImageView
android:id="#+id/imageView"
android:layout_width="453dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#D0021B"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
However I don't now what is the reason behind this.
You can find the answer in Material Design docs:
Elevation is the relative distance between two surfaces along the z-axis.
So when you are thinking about that you should imagine a 3D space like that:
When you are applying elevation you are basically pushing one View up over another, or elevating it.
Related
I am developing news app and I have implemented constraint layout with card view but title description not showing and title and description goes of the screen in real device but in layout inspector in android studio it is showing fine
below my view
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="article"
type="com.example.newsworldwide.model.Article" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_marginHorizontal="16dp"
android:layout_marginVertical="8dp"
app:cardCornerRadius="12dp"
app:cardElevation="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/articleImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="4dp"
android:elevation="16dp"
android:src="#drawable/img"
app:civ_border_width="2dp"
app:imageUrl="#{article.urlToImage}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="24dp"
android:ellipsize="end"
android:maxLines="2"
android:text="Mini olive pies by Vaggelio"
android:textColor="#000"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toEndOf="#+id/articleImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:ellipsize="end"
android:maxLines="6"
android:text="This is the most information savory snack that I have ever seen!!!"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="#+id/articleTitle"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<TextView
android:id="#+id/articleDate"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_marginEnd="48dp"
android:layout_marginBottom="8dp"
android:text="01.02.2022"
android:textColor="#FF9935"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
below my recyclerview 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="491dp"
android:layout_height="826dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:listitem="#layout/news_item" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginBottom="260dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
following screenshot from layout inspector in android studio
following screenshot of the app from real device
I want to know where exactly I am making mistake what I have to do in order to show title description and date so that it can fit screen perfectly
I've made some tweaks to your xml files
RecyclerView layout should look like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:listitem="#layout/news_item" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginBottom="260dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Your mistake was right here:
android:layout_width="491dp"
android:layout_height="826dp"
putting exact values for layout_width and layout_height is almost never a good idea when trying to build a responsive UI. Instead try using match_parent (matches the screen width) or wrap_content (takes as much space as it needs) in your layout_width/height.
Also I found one more thing wrong with news_item.xml
articleDescription TextView should have this parameter:
app:layout_constraintEnd_toEndOf="#+id/articleTitle"
this parameter will make sure, that your textView end where the parent view ends, means not going out of screen.
I think the tour item not the problem. Check the size of the RecyclerView.
I'm now practicing creating a fragment with RecycleView
Everything looks fine besides one thing: there is a strange block on the top of the screen
My fragment.xml is as follows:
<?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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CDF6CF"
tools:context=".ui.start_trip.fragment_start_trip">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/create_a_trip_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_start_trip"
app:layout_constraintVertical_bias="1.0">
</androidx.recyclerview.widget.RecyclerView>
<Button
android:id="#+id/create_a_trip_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Button"
app:backgroundTint="#ED7F7F"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.884" />
<TextView
android:id="#+id/top_start_trip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="#string/top_start_trip"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
Is there any solution to help me get rid of this block?
Thanks, #anonymous!
set your recyclerView to
android:layout_above="#id/create_a_trip_button"
And i think using a Relative layout to enclose everything will be better
So like the picture below, I want view B be twice the length of view A.
What I exactly need is view A sticks to the left edge, view B sticks to the right edge and they stick to each other in between. And in the length, the B is going to be twice the length of A. I tried a lot, but no luck! in the end, something is not what I want. Either there is unwanted space between a view and its according edge or between the two views.
Here is my last try:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
tools:context=".MainActivity">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:ems="10"
android:text="B"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:gravity="center"
android:text="A"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
You can use app:layout_constraintWidth_percent ti tell your view how to spread on the screen.
For your wanted look you can use it like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintWidth_percent=".33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintWidth_percent=".66"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button" />
</android.support.constraint.ConstraintLayout>
It will look like this
To use layout_constraintHorizontal_weight, you have to put your Views in a chain first. That means you have to constraint both Views to each other and the parent horizontally. What you are missing in your case is the app:layout_constraintEnd_toStartOf="#id/editText" on the TextView. You also need to change the android:layout_width of both Views to 0dp so that the weight is enforced:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
tools:context=".MainActivity">
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:ems="10"
android:text="B"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:gravity="center"
android:text="A"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/editText"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I want my textView to be center align to screen and also don't want it to overlap the image. Can you please help me achieve this using constraint.
<android.support.constraint.ConstraintLayout
android:id="#+id/merge"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/paa_action_bar_back_margin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/vc_nav_bar_back" />
<TextView
android:id="#+id/tv_actionbar_page_title"
style="#style/db_title_4.semibold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#{title}"
android:textColor="#color/shade_grease"
android:textSize="16sp"
android:visibility="#{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_close"
tools:text="#tools:sample/lorem"
tools:visibility="visible" />
</android.support.constraint.ConstraintLayout>
You need to set margins, as for marginTop, marginBottom, marginLeft, marginRight.
For example:
<TextView
android:id="#+id/tv_actionbar_page_title"
style="#style/db_title_4.semibold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#{title}"
android:textColor="#color/shade_grease"
android:textSize="16sp"
android:visibility="#{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_close"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
tools:text="#tools:sample/lorem"
tools:visibility="visible" />
You can configure the different margin values and make it fit your requirements. Or you can even remove some margins. In the end, it depends on you and your design.
Edit: As a reminder constraint layout works in a relative kind of manner. One object depends on the other, so make sure that your lines/guidelines are correct (in the .xml labeled as constraint_toStartOf, etc.)
This should work. Text will never overlap with the Image and Image will be aligned to the start.
<android.support.constraint.ConstraintLayout android:id="#+id/merge"
android:layout_width="match_parent"
android:layout_height="match_parent"
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">
<ImageView
android:id="#+id/iv_close"
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
android:layout_height="wrap_content"
android:layout_margin="#dimen/paa_action_bar_back_margin"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/tv_actionbar_page_title"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/vc_nav_bar_back" />
<TextView
android:id="#+id/tv_actionbar_page_title"
style="#style/db_title_4.semibold"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#{title}"
android:textColor="#color/shade_grease"
android:textSize="16sp"
android:visibility="#{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iv_close"
app:layout_constraintTop_toTopOf="#+id/iv_close"
tools:text="#tools:sample/lorem"
tools:visibility="visible" />
</android.support.constraint.ConstraintLayout>
Try to constrain your text view to your image and give it android:layout_width="0dp" so it will only expand according to the space available.
Because his new width is not wrap_content your text view will not overlap the image and that's why he will only expand according to his constraints.
So you need to do something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_actionbar_page_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:gravity="center"
android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/iv_close"
app:layout_constraintTop_toTopOf="#+id/iv_close" />
</android.support.constraint.ConstraintLayout>
If you want your text view to be exactly the same height as the image view add android:layout_height="0dp", now when you will have a long text it will get scrollable and will not expand vertically.
It will look like this:
Edit according to comment:
You can use your layout like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_actionbar_page_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_close"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
In order to get this look:
Or you can use this layout:
<?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">
<TextView
android:id="#+id/tv_actionbar_page_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
In order to get this look:
I'm working on an Android activity in which I want to have a header, and the content below the header. I want to have background image that is streched just on the content, but not on the header.
From the picture you can see that my image is streched also on the logo part of the screen, which I don't want.
Here is the xml of my current layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_11"
tools:context=".login.LoginActivity"
>
<ImageView
android:id="#+id/logo"
android:layout_width="381dp"
android:layout_height="156dp"
android:src="#drawable/logo"
tools:ignore="ContentDescription"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="-480dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintHorizontal_bias="0.47" />
<ImageView
android:id="#+id/emptyImage"
android:layout_width="384dp"
android:layout_height="445dp"
android:layout_marginBottom="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:background="#color/TICK_BACKGROUND"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/empty" />
<EditText
android:id="#+id/login_usernameTextField"
android:layout_width="291dp"
android:layout_height="63dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="80dp"
android:background="#drawable/rounded_text_edit_shape"
android:ems="10"
android:hint="Username"
android:inputType="textPersonName"
android:textColor="#color/INPUT_TEXT_COLOR"
android:textColorHint="#color/iron"
android:textCursorDrawable="#null"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<EditText
android:id="#+id/login_passwordTextField"
android:layout_width="291dp"
android:layout_height="63dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="-38dp"
android:background="#drawable/rounded_text_edit_shape"
android:ems="10"
android:hint="Password"
android:textCursorDrawable="#null"
android:inputType="textPassword"
android:textColor="#color/INPUT_TEXT_COLOR"
android:textColorHint="#color/iron"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_usernameTextField"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<Button
android:id="#+id/login_loginButton"
android:onClick="loginButtonClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:background="#drawable/rounded_button_shape"
android:text="Log In"
android:textColor="#color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_passwordTextField"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.28"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
I thought about making a parent Layout and inside that Layout add a header and another layout that contains the content. And then set the background inside the content layout like like this: android:background="#drawable/background_11"
Here is the code I tried:
<?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/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/logo_2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="-1dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
app:layout_constraintTop_toBottomOf="#id/logo"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent">
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
However, my background is not showing up. Here are the reuslts:
You can use a ConstraintLayout in an other ConstraintLayout but you need to respect some rules. All direct childs of a ConstraintLayout should have constraint on left,top, right and bottom.
I think that without the constraint left and right of your inner ConstraintLayout, he have a width and height equals to 0dp , he is not displayed.
Have you try to add constraint left and rigth to your inner ConstraintLayout ?
<?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/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/logo_2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="-1dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
app:layout_constraintTop_toBottomOf="#id/logo"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Hope this helps.
I made it work by making a constraint layout inside the Linear Layout:
<?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">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="146dp"
app:srcCompat="#drawable/netset_logo_2" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/background_11">
</android.support.constraint.ConstraintLayout>
</LinearLayout>
Still I don't understand why doesn't my first solution work. Why can't you add a constraint layout inside the constraint layout?
There is no problem adding a constraint layout inside of another constraint layout if you satisfy all constraints.
This would work:
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
android:layout_marginLeft="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
</android.support.constraint.ConstraintLayout>
But also:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#drawable/background_11"
android:layout_marginLeft="8dp"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintBottom_toBottomOf="parent">
</android.support.constraint.ConstraintLayout>
If it is the right approach using a ConstraintLayout for the purpose of setting a background image is another question.
Since you are only using the ConstraintLayout to use the background property, you can skip that layout completely and use a View directly.
Since all views inherit from View, but just add a lot of logic on top of it, in this use case a View is enough to satisfy the needs.
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
android:layout_marginLeft="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
</View>
Well naturally, you made the constraint layout take the entire screen, and the Logo take a smaller subset of it.
so you have the logo on your screen, and beneath it the background.
you might want to set the "background" on a different sub layout inside the main constraint layout.
something like this
<constraintlayout
width:match_parent
height:match_parent>
<logo here/>
<constraintlayout
background_here>
<constraintlayout/>
<constraintlayout/>
hope it makes sense.