required design its a scrollable screen with 3 to 4 almost similar blocks
this is what i been trying
<?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:card_view="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:background="@color/colorWhite"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.santalu.diagonalimageview.DiagonalImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="350dp"
android:scaleType="centerCrop"
android:src="@drawable/demo"
app:di_borderColor="#FF5722"
app:di_borderEnabled="false"
app:di_direction="left"
app:di_overlap="60dp"
app:di_position="bottom" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="16dp"
android:text="Maternity care plan"
android:textColor="#040303"
android:textSize="20sp" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="240dp"
android:text="Maternity care plan"
android:textColor="#050505"
android:textSize="20sp" />
<com.example.diagnalimageview.DividerView
android:id="@+id/line1"
android:layout_width="4dp"
android:layout_height="150dp"
android:layout_below="@+id/tv2"
android:layout_centerHorizontal="true"
android:layerType="software"
custom:color="#050505"
custom:dashGap="2dp"
custom:dashLength="5dp"
custom:dashThickness="1dp"
custom:orientation="vertical" />
<!-- A CardView that contains a TextView -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/pregnancy_plane_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/line1"
android:layout_centerHorizontal="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
<RelativeLayout
android:id="@+id/circle_progress_container"
android:layout_width="75dp"
android:layout_height="75dp"
android:translationZ="90dp"
custom:layout_constraintEnd_toEndOf="parent"
custom:layout_constraintStart_toStartOf="parent"
custom:layout_constraintTop_toTopOf="parent">
<com.timqi.sectorprogressview.ColorfulRingProgressView
android:id="@+id/circle_progress"
android:layout_width="75dp"
android:layout_height="75dp"
app:bgColor="#e1e1e1"
app:fgColorEnd="#5900FF"
app:fgColorStart="#5900FF"
app:percent="0"
app:startAngle="0"
app:strokeWidth="8dp"
android:background="@color/colorWhite"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0%"
android:layout_centerInParent="true"/>
</RelativeLayout>
<!--determine center to circular shape-->
<Button
android:id="@+id/dummy_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dummy view"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@id/circle_progress_container"
app:layout_constraintEnd_toEndOf="@id/circle_progress_container"
app:layout_constraintStart_toStartOf="@+id/circle_progress_container"
app:layout_constraintTop_toTopOf="@id/circle_progress_container"
tools:ignore="HardcodedText" />
<androidx.cardview.widget.CardView
android:id="@+id/pregnancy_plane"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardElevation="12dp"
app:cardUseCompatPadding="true"
android:translationY="-20dp"
app:layout_constraintTop_toBottomOf="@+id/dummy_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
card_view:cardBackgroundColor="@color/colorPrimary"
card_view:contentPadding="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/colorWhite">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:gravity="center"
android:text="PLAN YOUT PREGNANCY\nTHE WAY YOU WANT"
android:textSize="20sp" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="32dp"
android:src="@mipmap/ic_launcher" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="PLANNING MY PREGNANCY"
android:textSize="20sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.example.diagnalimageview.DividerView
android:id="@+id/line2"
android:layout_width="4dp"
android:layout_height="150dp"
android:layout_below="@+id/pregnancy_plane_container"
android:layout_centerHorizontal="true"
android:translationY="-36dp"
android:layerType="software"
custom:color="#050505"
custom:dashGap="2dp"
custom:dashLength="5dp"
custom:dashThickness="1dp"
custom:orientation="vertical" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/line2"
android:layout_centerHorizontal="true"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp">
<RelativeLayout
android:id="@+id/circle_progress_container2"
android:layout_width="75dp"
android:layout_height="75dp"
android:translationZ="90dp"
custom:layout_constraintEnd_toEndOf="parent"
custom:layout_constraintStart_toStartOf="parent"
custom:layout_constraintTop_toTopOf="parent">
<com.timqi.sectorprogressview.ColorfulRingProgressView
android:id="@+id/pregnancy_choices_progress"
android:layout_width="75dp"
android:layout_height="75dp"
android:background="@color/colorWhite"
app:bgColor="#e1e1e1"
app:fgColorEnd="#5900FF"
app:fgColorStart="#5900FF"
app:percent="0"
app:startAngle="0"
app:strokeWidth="8dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="0%" />
</RelativeLayout>
<!--determine center to circular shape-->
<Button
android:id="@+id/dummy_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dummy view"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@id/circle_progress_container2"
app:layout_constraintEnd_toEndOf="@id/circle_progress_container2"
app:layout_constraintStart_toStartOf="@+id/circle_progress_container2"
app:layout_constraintTop_toTopOf="@id/circle_progress_container2"
tools:ignore="HardcodedText" />
<androidx.cardview.widget.CardView
android:id="@+id/pregnancy_choices"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:translationY="-20dp"
app:cardElevation="12dp"
app:cardUseCompatPadding="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/dummy_view2"
card_view:cardBackgroundColor="@color/colorPrimary"
card_view:contentPadding="1dp">
<!--<androidx.cardview.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintTop_toBottomOf="@+id/dummy_view">-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:gravity="center"
android:text="PLAN YOUT PREGNANCY\nTHE WAY YOU WANT"
android:textSize="20sp" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="32dp"
android:src="@mipmap/ic_launcher" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="PLANNING MY PREGNANCY"
android:textSize="20sp" />
</LinearLayout>
<!-- </androidx.cardview.widget.CardView>-->
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
now the problems is for blocks view hierarchy is ConstraintLayout RelativeLayout. -for progress chart Button(dummyview) -to determine center of progress chart cardview -to give elevated look i used compact padding 12dp that padding make bottom space between constraint layout and cardview. so when i tried to draw vertical line between first block and second block. line top was 12dp down from the block than i used translationY= -12dp to fix it but now vertical line is touching second block. my output myoutput
Aucun commentaire:
Enregistrer un commentaire