I have a FoodCardFragment that has a CardView at the bottom. I want the CardView to have a height of at least 120dp and fill the rest of the space (so I set its layout_weight to 1).
The FoodCardFragment is put in the RandomFragment (the first tab of MainAcitivity), and also has its layout_weight set to 1 as I want it to fill the rest of the space.
However, as you can tell from the image I posted below, the yellow CardView I mentioned above doesn't fill the rest of the space. How can I achieve my goal?
In case the links won't work:
Code for FoodCardFragment:
<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"
android:padding="20dp"
android:background="#android:color/white">
<android.support.v7.widget.CardView
android:id="#+id/food_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:elevation="2dp">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/food_image"
android:layout_width="320dp"
android:layout_height="320dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/food_image_place_holder" />
<ImageView
android:id="#+id/liked_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_undo_like" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/food_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="24sp"
android:textStyle="bold"
android:layout_weight="1"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginEnd="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/food_card" />
<ImageButton
android:id="#+id/more_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/ic_dropdown" />
</LinearLayout>
<FrameLayout
android:id="#+id/tags_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="10dp" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:minHeight="120dp">
<TextView
android:id="#+id/food_note_back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/food_note_background"
android:scrollbars="vertical"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingHorizontal="8dp" />
<TextView
android:id="#+id/food_note_front"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/food_note_background"
android:scrollbars="vertical"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingHorizontal="8dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
Code for RandomFragment:
<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"
android:background="#color/whiteSmoke">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/colorBackgroundFloating"
android:elevation="2dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/random"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/filter_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/menu_button"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_filter" />
<ImageButton
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_menu" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:id="#+id/food_card_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="30dp"
android:background="#android:color/white"
app:cardCornerRadius="4dp"
app:cardElevation="4dp">
<FrameLayout
android:id="#+id/food_card_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:padding="10dp">
<ImageButton
android:id="#+id/check_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:padding="8dp"
app:srcCompat="#drawable/ic_check" />
<ImageButton
android:id="#+id/cross_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:padding="8dp"
app:srcCompat="#drawable/ic_cross" />
<ImageButton
android:id="#+id/refresh_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:padding="8dp"
app:srcCompat="#drawable/ic_refresh" />
</LinearLayout>
</LinearLayout>
Related
In my .XML layout file, how can I evenly distribute a cardview so that there are 3 parts and each of them has 2vertical textviews in it ? I wrote the following code but all the texts are under each other. the picture below is what I want it to look like :
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="83dp"
android:layout_margin="5dp"
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="false">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
You could use ConstraintLayout to easily make the view evenly distribute vertically or horizontally. And you should have 3 Card views instead of just 1. Each of the CardView will contain the TextView you want to show.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.cardview.widget.CardView
android:id="#+id/cardone"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/cardtwo"
app:layout_constraintHorizontal_bias="0.5"
app:cardBackgroundColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_margin="10dp"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:padding="4dp"
android:textColor="#color/white"
android:text="textviewone" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:textColor="#color/white"
android:padding="4dp"
android:text="textviewone" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardtwo"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/black"
app:layout_constraintEnd_toStartOf="#+id/cardView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/cardone"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_margin="10dp"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:padding="4dp"
android:textColor="#color/white"
android:text="textviewone" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:textColor="#color/white"
android:padding="4dp"
android:text="textviewone" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/cardtwo"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_margin="10dp"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:padding="4dp"
android:textColor="#color/white"
android:text="textviewone" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:textColor="#color/white"
android:padding="4dp"
android:text="textviewone" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
I am using a fragment to display cardview and a common Bottomnavigation for all fragments. Here I have more than 5 cards as per my data but I am not able to scroll to see all cards. only scrollable up to the second card and the second one is also not fully visible due to the bottom navigation.
main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff293353"
android:paddingTop="20dp">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_above="#id/nav_view"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="#drawable/bottom_tab_style"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then Recycleview
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:layout_marginBottom="10dp"
android:weightSum="1"
android:layout_marginStart="70dp"
android:layout_marginEnd="70dp"
android:layout_gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:background="#drawable/left_enabled"
android:layout_weight="0.5"
android:textAlignment="center"
android:id="#+id/btn_normal"
android:text="#string/normal"
android:textColor="#color/white"
android:textStyle="bold" />
<TextView
android:id="#+id/btn_cognitive"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/right_disabled"
android:gravity="center"
android:text="#string/cognitive"
android:textAlignment="center"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_height="wrap_content">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
</ScrollView>
Then cardview content
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:background="#drawable/cardstyle"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
card_view:cardBackgroundColor="#color/transparent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
card_view:cardCornerRadius="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3f4865"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
>
<TextView
android:id="#+id/txt_recordTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/poppins"
android:paddingStart="12dp"
android:text="Normal Test 01"
android:gravity="center_vertical"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text="No: of gait cycles"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p1_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="Details"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text="Stride Length"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p2_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="Details"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text=" Gait time"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p3_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="p2"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/info_button_style"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/total_n_gait_score"
android:textAlignment="center"
android:textColor="#FFF" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ProgressBar
android:id="#+id/card_progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:background="#drawable/circle_shape"
android:indeterminate="false"
android:max="100"
android:progress="65"
android:progressDrawable="#drawable/card_progress" />
<TextView
android:id="#+id/text_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="60%"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#color/white" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
android:paddingBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:id="#+id/card_date"
android:text="date"
android:textColor="#FFF"
android:textSize="1sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:ellipsize="end"
android:maxLines="1"
android:text="time"
android:id="#+id/card_time"
android:textColor="#FFF"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Please check my code and help me with this.
This is wrong in your main_activity.xml for fragment android:layout_above="#id/nav_view", it is used for RelativeLayout. Instead use app:layout_constraintBottom_toTopOf="#id/nav_view". This will solve your second issue(the second one is also not fully visible due to the bottom navigation).
Change your ScrollView to NestedScrollView.
In your cardview content you don't need ConstraintLayout, LinearLayout is sufficient as root element (remove ConstraintLayout as you are not utilising its power of flat view hierarchy). And if your LinearLayout background can be moved to background for MaterialCardView then you don't need LinearLayout too.
For your recyclerview set the nestedScrollingEnabled to false either through xml or by code. Try these things, it will solve your problem.
I have 3 card layouts in ConstraintLayout. I wanted to match the height of the second and third card layouts in the row to match with the first card layout.
So I added the lines conditions TopToTop of and BottomToBottom Of. And I set the height to 0dp (match constraints in design view). Surprisingly, second and third card layout heights are being centred and not matched. Please help me with this issue.
And for some reason, I am getting double shaded images in each card layout. I am not sure why.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rlHeader"
android:layout_width="0dp"
android:layout_height="#dimen/_40dp"
android:background="#color/action_color"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingStart="#dimen/_0dp"
android:paddingEnd="#dimen/_10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imgMenu"
android:layout_width="#dimen/_20dp"
android:layout_height="#dimen/_20dp"
android:layout_centerVertical="true"
android:layout_marginStart="#dimen/_10dp"
android:contentDescription="#null"
android:src="#drawable/icon_menu" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginStart="#dimen/_10dp"
android:fontFamily="#font/proxima_nova_semibold"
android:text="#string/pick_a_service"
android:textColor="#color/white"
android:textSize="#dimen/_18sp" />
</RelativeLayout>
<androidx.cardview.widget.CardView
android:id="#+id/card_home1"
style="#style/cardHome"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
app:cardBackgroundColor="#color/colorAccent1"
app:layout_constraintEnd_toStartOf="#+id/card_home5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rlHeader">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/_2dp"
android:layout_weight="0.9"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/featureText1"
style="#style/textHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/_2dp"
android:layout_weight="0.1"
android:text="#string/verification" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/card_home5"
style="#style/cardHome"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
app:cardBackgroundColor="#color/colorAccent5"
app:cardElevation="0dp"
app:layout_constraintBottom_toBottomOf="#id/card_home1"
app:layout_constraintEnd_toStartOf="#+id/card_home8"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/card_home1"
app:layout_constraintTop_toTopOf="#id/card_home1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/_2dp"
android:layout_weight="0.9"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/featureText5"
style="#style/textHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/_2dp"
android:layout_weight="0.1"
android:text="#string/verification" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/card_home8"
style="#style/cardHome"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
app:cardBackgroundColor="#color/colorAccent3"
app:layout_constraintBottom_toBottomOf="#id/card_home1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/card_home5"
app:layout_constraintTop_toTopOf="#+id/card_home1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/_2dp"
android:layout_weight="0.9"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/featureText8"
style="#style/textHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/_2dp"
android:layout_weight="0.1"
android:text="#string/verification" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<RelativeLayout
android:id="#+id/progressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="#dimen/_50dp"
android:layout_height="#dimen/_50dp"
android:layout_centerInParent="true"
android:background="#drawable/progress_dialog_back"
android:indeterminate="false"
android:indeterminateTint="#color/white"
android:max="100"
android:padding="#dimen/_5dp"
android:progress="0"
android:visibility="visible"
tools:targetApi="lollipop" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
ConstaintLayout is not meant to have inner view groups. Its all about flat view hierarchy - so you can avoid using all of your inner view groups and just use chains:
<androidx.constraintlayout.widget.ConstraintLayout
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"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button2"
app:layout_constraintTop_toTopOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button3"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>
Below is the XML file, hope this helps:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.CardView
android:id="#+id/label_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/label_b"
app:layout_constraintTop_toTopOf="parent"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="#color/colorAccent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:text="Verification" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/label_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/label_a"
app:layout_constraintEnd_toStartOf="#+id/label_c"
app:layout_constraintTop_toTopOf="parent"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="#color/colorPrimaryDark"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:text="Verification" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/label_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/label_b"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="#color/colorPrimary"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:text="Verification" />
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
Here is my code and I want ViewPager to above LinearLayout and below ImageView. It is coming below ImageView but overlaps LinearLayout. I tried layout_constarintBottom_toTopOf property but it's not working. Which property use correctly to solve this issue
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<ImageView
android:id="#+id/img_app_logo"
android:layout_width="75dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:src="#drawable/app_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="4:3"/>
<LinearLayout
android:id="#+id/linear_layout_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_get_started"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/get_started_text"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#color/white"
android:layout_gravity="center"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sign_in_text"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/img_app_logo"/>
</android.support.constraint.ConstraintLayout>
Use match_constraint property for view pager height from design tab->attributes. It will adjust view pager according to its constraints.
<ImageView
android:id="#+id/img_app_logo"
android:layout_width="75dp"
android:layout_height="0dp"
android:src="#drawable/home"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintHorizontal_bias="0.501"
android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/linear_layout_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_get_started"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="get started"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#color/white"
android:layout_gravity="center"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign In"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.0" android:id="#+id/viewPager"
app:layout_constraintTop_toBottomOf="#+id/img_app_logo"
app:layout_constraintBottom_toTopOf="#+id/linear_layout_registration"/>
You probably want something like this...
<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/img_app_logo"
android:layout_width="75dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:src="#drawable/app_logo"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/linear_layout_registration"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img_app_logo" />
<LinearLayout
android:id="#+id/linear_layout_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_get_started"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="20dp"
android:text="#string/get_started_text"
android:textColor="#color/white"
android:textSize="18sp" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:background="#color/white" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="20dp"
android:text="#string/sign_in_text"
android:textColor="#color/white"
android:textSize="18sp" />
</LinearLayout>
So I have this activity What I want to do is to align the separator line and background image. What i do so far is just margin the whole layout with specific height but that is definitely not a solution since on new device they aren't aligned anymore. The whole problem is that the separator line is in layout. To avoid misunderstandings here is the line and image i want to align here. And here is the code
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/main_background" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_marginTop="110dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/mainborder"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/user_name"
style="#style/HeaderText"
android:layout_width="match_parent"
android:layout_height="50dp"
android:paddingLeft="15dp"
android:paddingTop="15dp"
android:text="#string/welcome" />
<include layout="#layout/separator_line_smaller_margin" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp">
<include layout="#layout/slider" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="15dp">
<LinearLayout
android:layout_width="203dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
style="#style/Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="4dp"
android:text="#string/profileInfo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:gravity="bottom">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fontFamily="sans-serif-medium"
android:gravity="start"
android:lineSpacingExtra="6sp"
android:onClick="goToProfile"
android:text="#string/myProfile"
android:textAlignment="textStart"
android:textColor="#4ED1AD"
android:textSize="14sp"
android:textStyle="normal" />
</LinearLayout>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:src="#drawable/face" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/mainborder"
android:orientation="vertical"
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.105">
<TextView
style="#style/HeaderText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingTop="15dp"
android:text="#string/comingViews"
android:textSize="25sp" />
<include layout="#layout/separator_line_smaller_margin" />
<LinearLayout
style="#style/DoctorsLayouts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="49dp"
android:layout_height="match_parent"
android:src="#drawable/face" />
<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:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_data_range" />
<TextView
style="#style/Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center|left"
android:paddingLeft="5dp"
android:text="22.01.2018г. 9:00 часа"
tools:layout_editor_absoluteX="65dp"
tools:layout_editor_absoluteY="261dp" />
</LinearLayout>
<TextView
style="#style/Doctors"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="3dp"
android:text="Др. Хаус"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
style="#style/LayoutPadding"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:orientation="vertical">
<TextView
style="#style/SecondHeaderText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:text="#string/HowDoesItWork" />
<TextView
style="#style/Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/dummyText" />
</LinearLayout>
<LinearLayout
style="#style/LayoutPadding"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="#string/Help"
android:textColor="#4ED1AD"
android:textSize="17sp" />
</LinearLayout>
</LinearLayout>
</FrameLayout>