I have a carousel and I want to make the current card fullscreen on click. When the current card is fullscreen some additional data should be visible.
I am new to Android and I have the feeling that I am doing something wrong. I have already tried to implement it via different onClickListeners and Animations (because i also need a smooth transition), but nothing worked.
Does anyone has a suggestion on how to achieve this? (please see my carousel layout implementation below)
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/motion_layout_carousel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible"
app:layout_constraintTop_toBottomOf="#+id/player_image_with_elements"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layoutDescription="#xml/demo_020_carousel_scene">
<LinearLayout
android:id="#+id/imageView0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:orientation="vertical"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView1"
app:layout_constraintTop_toTopOf="parent">
<include
layout="#layout/match_statistic"
android:background="#drawable/layout_rounded"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:orientation="vertical"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent">
<include
layout="#layout/match_statistic"
android:background="#drawable/layout_rounded"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<include
layout="#layout/match_statistic"
android:background="#drawable/layout_rounded"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:orientation="vertical"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent">
<include
layout="#layout/match_statistic"
android:background="#drawable/layout_rounded"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:orientation="vertical"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="parent">
<include
layout="#layout/match_statistic"
android:background="#drawable/layout_rounded"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="50dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="50dp" />
<androidx.constraintlayout.helper.widget.Carousel
android:id="#+id/carousel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:carousel_backwardTransition="#+id/backward"
app:carousel_firstView="#+id/imageView2"
app:carousel_forwardTransition="#+id/forward"
app:carousel_nextState="#+id/next"
app:carousel_previousState="#+id/previous"
app:carousel_touchUpMode="carryVelocity"
app:carousel_touchUp_dampeningFactor="0.8"
app:constraint_referenced_ids="imageView0,imageView1,imageView2,imageView3,imageView4" />
</androidx.constraintlayout.motion.widget.MotionLayout>
Related
I have a layout containing two images and text.
I have scaled and centered them:
The last thing I'd like to do is to align the bottom of the two images as if they were both laying on the imaginary orange line in the pic. How can I do that? I'm playing with constraint layout but I am not able to find a solution.
The layout is this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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/home_card_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_top_between_cards_with_padding"
app:cardBackgroundColor="#color/primary_bg"
app:cardCornerRadius="#dimen/card_corner_radius"
app:cardElevation="#dimen/card_elevation_enabled"
app:cardMaxElevation="#dimen/card_max_elevation"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/issue_body_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0"
tools:visibility="visible">
<TextView
android:id="#+id/issue_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:lineSpacingExtra="4dp"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="This is the body of the issue" />
<LinearLayout
android:id="#+id/image_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/issue_body"
tools:visibility="visible">
<LinearLayout
android:id="#+id/vox_left_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:visibility="visible"
android:layout_gravity="center"
android:visibility="gone"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/vox_left"
android:layout_width="140dp"
android:layout_height="102dp"
android:scaleType="centerInside"
android:layout_margin="1dp"
android:visibility="gone"
android:layout_gravity="center"
android:background="#color/transparent"
app:srcCompat="#drawable/device_vox_3_0"
tools:visibility="visible" />
<TextView
android:id="#+id/vox_left_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18dp"
android:visibility="gone"
tools:visibility="visible"
tools:text="vox 30" />
</LinearLayout>
<LinearLayout
android:id="#+id/vox_right_container"
android:visibility="gone"
tools:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/vox_right"
android:layout_width="140dp"
android:layout_height="102dp"
android:scaleType="centerInside"
android:background="#color/transparent"
android:layout_margin="1dp"
app:srcCompat="#drawable/easybox_904"
android:visibility="gone"
tools:visibility="visible" />
<TextView
android:id="#+id/vox_right_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18dp"
android:visibility="gone"
tools:visibility="visible"
tools:text="vox 30" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
You are not using ConstraintLayout properly. One of the points is that you don't have to use so many other types of layouts nested.
I quickly changed your code so it does what you want. But I recommend you to use a single constraint layout, and inside it, all your views without nesting them. As it is a simple layout the one you are doing.
I recommend you, watch a tutorial and try to learn more about how Constraint Layout works. Hope it helps!
<androidx.cardview.widget.CardView
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/home_card_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:cardBackgroundColor="#color/colorPrimary"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:cardMaxElevation="10dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/issue_body_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0"
tools:visibility="visible">
<TextView
android:id="#+id/issue_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:lineSpacingExtra="4dp"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="This is the body of the issue" />
<LinearLayout
android:id="#+id/image_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/issue_body"
tools:visibility="visible">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/vox_left_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:visibility="gone"
tools:visibility="visible">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/vox_left"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="1dp"
android:background="#color/transparent"
android:scaleType="centerInside"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="#+id/vox_left_descr"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/app_logo"
tools:visibility="visible" />
<TextView
android:id="#+id/vox_left_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="vox 30"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/vox_right_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:visibility="gone"
tools:visibility="visible">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/vox_right"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#color/transparent"
android:scaleType="centerInside"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="#+id/vox_right_descr"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/ic_audio"
tools:visibility="visible" />
<TextView
android:id="#+id/vox_right_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="vox 30"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am trying to make my layout scrollable with constrainlayout but it's not scrolling at all i also tried with scrollview and nestedscrollview also tried by making constrain root layout but still not getting scrollable layout. Here is my XML layout. Can you please tell me what i am doing wrong here
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:colorBackground"
android:clickable="true"
android:fillViewport="true"
android:focusable="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/coverProfileImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:colorBackground">
<ImageView
android:id="#+id/coverPhoto"
android:layout_width="match_parent"
android:layout_height="500dp"
android:src="#color/custom_transparent_colorBlack"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profilePic"
android:layout_width="128dp"
android:layout_height="128dp"
app:layout_constraintBottom_toBottomOf="#+id/coverPhoto"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/coverPhoto"
app:layout_constraintVertical_bias="0.44"
tools:srcCompat="#tools:sample/avatars" />
<ImageButton
android:id="#+id/addFriendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_shape_only"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="#+id/profilePic"
app:layout_constraintEnd_toStartOf="#+id/profilePic"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/profilePic"
app:srcCompat="#drawable/ic_add_friend" />
<ImageButton
android:id="#+id/messageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_shape_only"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="#+id/profilePic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/profilePic"
app:layout_constraintTop_toTopOf="#+id/profilePic"
app:srcCompat="#drawable/ic_message" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/coverPhoto"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profilePic"
app:layout_constraintVertical_bias="0.100000024" />
<TextView
android:id="#+id/cityCountry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/coverPhoto"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/name"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/followerCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="410dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/followingCount"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/coverPhoto"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/followingCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/followerCount"
app:layout_constraintEnd_toStartOf="#+id/friendsCount"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/followerCount"
app:layout_constraintTop_toTopOf="#+id/followerCount" />
<TextView
android:id="#+id/friendsCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/followingCount"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/followingCount"
app:layout_constraintTop_toTopOf="#+id/followingCount" />
<TextView
android:id="#+id/followersTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="460dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#+id/followerCount"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/followerCount"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/followingTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBaseline_toBaselineOf="#+id/followersTag"
app:layout_constraintEnd_toEndOf="#+id/followingCount"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/followingCount" />
<TextView
android:id="#+id/friendsTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBaseline_toBaselineOf="#+id/followingTag"
app:layout_constraintEnd_toEndOf="#+id/friendsCount"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/friendsCount" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/up_NestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabItemes"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tuesday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Wednesday" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/profileViewPager"
android:layout_below="#id/tabItemes"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
Add a CoordinatorLayout at the top of the nestedScrollView and set app:layout_behavior="#string/appbar_scrolling_view_behavior" for NestedScrollView
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true"
android:measureAllChildren="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/colorPrimary">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/home_constraint"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
you need to add
android:isScrollContainer="true"
In your nestedScrollView
I want to remove white space that I show in picture
Picure
I draw red circle around white space on picture
and I want remove it
I search in stackoverflow but in that case i can not find any anwswer.
My main layout is -->
toolbar_normal.xml:
<?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">
<include layout="#layout/city_detail_act"
android:id="#+id/content"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tolbar_storyButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#66cc66"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:orientation="horizontal"
tools:layout_editor_absoluteX="16dp">
<ImageView
android:id="#+id/imgSetting"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/setting" />
<ImageView
android:id="#+id/imgChoiceCity"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_marginStart="181dp"
android:layout_marginLeft="181dp"
android:layout_marginTop="3dp"
android:layout_marginEnd="180dp"
android:layout_marginRight="180dp"
android:layout_marginBottom="3dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/choicecity" />
<ImageView
android:id="#+id/imageViewButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="false"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/home" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>
My second layout is -->
city_detail_act.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="top"
android:paddingBottom="65dp"
>
<android.support.v7.widget.Toolbar
android:id="#+id/tolbar_story"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#66cc66"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:orientation="horizontal"
tools:layout_editor_absoluteX="16dp">
<ImageView
android:id="#+id/imgTooTitlelbarMainActf"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/adamak" />
<ImageView
android:id="#+id/imgTooTitlelbarMainAct"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="180dp"
android:layout_marginLeft="180dp"
android:layout_marginTop="3dp"
android:layout_marginEnd="181dp"
android:layout_marginRight="181dp"
android:layout_marginBottom="3dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/title" />
<ImageView
android:id="#+id/imgNavigationView"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="false"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/dot" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tx_state6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" "
android:textSize="15sp"
android:fontFamily="#font/adobearabicregular"
/>
<ImageView
android:id="#+id/imv_refresh2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tx_state6"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:padding="10px"
android:src="#drawable/refresh"
/>
<WebView
android:id="#+id/web2"
android:layout_width="76dp"
android:layout_height="76dp"
android:layout_below="#+id/imv_refresh2"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
>
</WebView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="26dp"
android:layout_marginLeft="13dp"
android:layout_marginRight="13dp"
android:layout_marginBottom="12dp"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:id="#+id/txMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/adobearabicbold"
android:text="مشاهده همه..."
android:textSize="12sp"
/>
<TextView
android:id="#+id/txYHinCityDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:fontFamily="#font/adobearabicbold"
android:text="هر آنچه درمورد قم باید بدانید"
android:textSize="24sp" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvListYH"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvListBazar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ProgressBar
android:id="#+id/progressBar66"
style="#android:style/Widget.Holo.ProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/rv_listcity"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:visibility="gone" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
How can i do it work?
Thank you
Removing the following line parent tag in file city_detail_act.xml should fix it
android:paddingBottom="65dp"
And add these to your include tag
android:layout_width="match_parent"
android:layout_height="match_parent"
Also, consider using Bottom Nav layout for UI like this.
First remove this:
android:paddingBottom="65dp"
Then your include should be like this:
<include
android:id="#+id/content"
layout="#layout/city_detail_act"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/tolbar_storyButton"
app:layout_constraintTop_toTopOf="parent" />
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>
I am implementing a view which uses constraint layout inside of scroll view. I am trying to align a view to the bottom of parent using app:layout_constraintBottom_toBottomOf="parent However there is extra white space below my view as you can see in the picture. The white space below blue color view. Can someone guide me on how to remove the extra white space at the bottom. Thanks in advance.
here is the code
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:requiresFadingEdge="vertical"
android:fadingEdgeLength="90dp"
android:fadingEdge="vertical"
android:fillViewport="true"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="275dp"
android:scaleType="center"
android:src="#drawable/bubble_exclaimation"
app:layout_constraintBottom_toTopOf="#id/content_layout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image"
android:background="#android:color/holo_blue_dark"
android:paddingBottom="15dp"
>
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/title"
android:textSize="17sp"
app:layout_constraintBottom_toTopOf="#+id/body"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
app:layout_constraintTop_toBottomOf="parent" />
<TextView
android:id="#+id/body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:text="#string/content_small"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
app:layout_constraintTop_toBottomOf="#+id/title" />
<android.support.constraint.Guideline
android:id="#+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.11" />
<android.support.constraint.Guideline
android:id="#+id/right_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.89" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
<View
android:id="#+id/block"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_dark"
app:layout_constraintTop_toBottomOf="#id/scrollView"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Remove app:layout_constraintTop_toBottomOf="#+id/image" from android:id="#+id/content_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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadingEdge="vertical"
android:fadingEdgeLength="90dp"
android:fillViewport="true"
android:requiresFadingEdge="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="275dp"
android:scaleType="center"
android:src="#drawable/bubble_exclaimation"
app:layout_constraintBottom_toTopOf="#id/content_layout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_dark"
android:paddingBottom="15dp"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/title"
android:textSize="17sp"
app:layout_constraintBottom_toTopOf="#+id/body"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
app:layout_constraintTop_toBottomOf="parent" />
<TextView
android:id="#+id/body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:text="#string/content_small"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
app:layout_constraintTop_toBottomOf="#+id/title" />
<android.support.constraint.Guideline
android:id="#+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.11" />
<android.support.constraint.Guideline
android:id="#+id/right_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.89" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
<View
android:id="#+id/block"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/scrollView" />
</android.support.constraint.ConstraintLayout>