I'm using ConstraintLayout to design my screen.
Here is my code that i have tried so far
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/home_bg">
<ImageView
android:id="@+id/topImage"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:contentDescription="@string/app_name"
android:src="@drawable/splash_heading"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tvAllOverResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp"
android:text="@string/allover_result"
android:textColor="@color/colorBlue"
android:textSize="20sp"
android:textStyle="bold"
ads:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/topImage" />
<android.support.v7.widget.CardView
android:id="@+id/firstCardView"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="2dp"
ads:cardElevation="5dp"
app:layout_constraintBottom_toBottomOf="@+id/tvVs"
app:layout_constraintEnd_toStartOf="@+id/tvVs"
app:layout_constraintTop_toTopOf="@+id/tvVs">
<abak.tr.com.boxedverticalseekbar.BoxedVertical
android:id="@+id/firstSeekBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_gravity="center"
app:backgroundColor="@android:color/white"
app:defaultImage="@drawable/ic_play"
app:imageEnabled="true"
app:max="100"
app:maxImage="@drawable/ic_play"
app:minImage="@drawable/ic_play"
app:progressColor="@color/colorGreen"
app:textEnabled="false"
app:touchDisabled="false" />
</android.support.v7.widget.CardView>
<TextView
android:id="@+id/tvOneScore"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="center"
android:text="Streak"
android:textColor="@color/colorBlue"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/firstCardView"
app:layout_constraintStart_toStartOf="@+id/firstCardView"
app:layout_constraintTop_toBottomOf="@+id/firstCardView" />
<TextView
android:id="@+id/tvVs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="V/S"
android:textColor="@color/colorBlue"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="@+id/secondCardView"
android:layout_width="60dp"
android:layout_height="250dp"
android:layout_marginStart="10dp"
app:cardElevation="5dp"
app:layout_constraintBottom_toBottomOf="@+id/tvVs"
app:layout_constraintStart_toEndOf="@+id/tvVs"
app:layout_constraintTop_toTopOf="@+id/tvVs">
<abak.tr.com.boxedverticalseekbar.BoxedVertical
android:id="@+id/secondSeekBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_gravity="center"
ads:points="50"
app:backgroundColor="@android:color/white"
app:defaultImage="@drawable/ic_play"
app:imageEnabled="true"
app:max="100"
app:maxImage="@drawable/ic_play"
app:minImage="@drawable/ic_play"
app:progressColor="@color/colorGreen"
app:textEnabled="false"
app:touchDisabled="false" />
</android.support.v7.widget.CardView>
<TextView
android:id="@+id/tvTwoScore"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="center"
android:text="Steps"
android:textColor="@color/colorBlue"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/secondCardView"
app:layout_constraintStart_toStartOf="@+id/secondCardView"
app:layout_constraintTop_toBottomOf="@+id/secondCardView" />
<TextView
android:id="@+id/tvWin"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="center"
android:padding="10dp"
android:textColor="@color/colorBlue"
android:text="@string/str_win"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tvTwoScore" />
<ImageView
android:id="@+id/tvPlayGame"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginBottom="40dp"
android:scaleType="fitXY"
android:src="@drawable/ic_play"
app:backgroundTint="#0b961e"
app:layout_constraintBottom_toBottomOf="@id/bottomLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tvWin" />
<RelativeLayout
android:id="@+id/bottomLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.leinardi.android.speeddial.SpeedDialOverlayLayout
android:id="@+id/speedDialOverlayLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#81000000"
app:clickable_overlay="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<com.leinardi.android.speeddial.SpeedDialOverlayLayout
android:id="@+id/speedDialOverlayLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#81000000"
app:clickable_overlay="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<com.leinardi.android.speeddial.SpeedDialView
android:id="@+id/speedDial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/mAdView"
android:layout_alignParentEnd="true"
ads:layout_constraintEnd_toEndOf="parent"
ads:layout_constraintHorizontal_bias="0.5"
app:backgroundTint="@android:color/white"
app:layout_behavior="@string/speeddial_scrolling_view_snackbar_behavior"
app:sdExpansionMode="top"
app:sdMainFabAnimationRotateAngle="90"
app:sdMainFabClosedBackgroundColor="@android:color/white"
app:sdMainFabClosedSrc="@drawable/ic_settings"
app:sdMainFabOpenedBackgroundColor="#4e4c4c"
app:sdMainFabOpenedSrc="@drawable/ic_close"
app:sdUseReverseAnimationOnClose="true" />
<com.leinardi.android.speeddial.SpeedDialView
android:id="@+id/langSpeedDial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/mAdView"
android:layout_alignParentStart="true"
android:layout_marginStart="8dp"
ads:layout_constraintHorizontal_bias="0.5"
ads:layout_constraintStart_toStartOf="parent"
app:layout_behavior="@string/speeddial_scrolling_view_snackbar_behavior"
app:sdExpansionMode="top"
app:sdMainFabAnimationRotateAngle="90"
app:sdMainFabClosedBackgroundColor="@android:color/white"
app:sdMainFabClosedSrc="@drawable/ic_language"
app:sdMainFabOpenedBackgroundColor="#4e4c4c"
app:sdMainFabOpenedSrc="@drawable/ic_close"
app:sdUseReverseAnimationOnClose="true" />
<com.google.android.gms.ads.AdView
android:id="@+id/mAdView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
ads:adSize="BANNER"
ads:adUnitId="@string/bannerID" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
I'm facing below issue using above code
imageview is hiding behind addviewaddview the bottom SpeedDialView not adjusting SpeedDialView that when i hide the addview it will work same as when addview is visibleissue screenshot
I have checked some SO Post
Please check the below screen my expected output
Can anybody help me create this layout using ConstraintLayout layout
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.
I really like this question because you really showed your effort and its easy to help you when you are so clear with your intention.
Now - when you use ConstraintLayout and want images to be responsive what you must not do is give your views fixed size - because different phones got different screen size and with a fixed size the layout is just not responsive to all screens.
you can use guidelines in this way:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.MenusDesign.ExpandableCategoriesMenu.ExpandableCategoriesMenu">
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Dummy text"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="V/s"
app:layout_constraintBottom_toTopOf="@+id/guideline3"
app:layout_constraintEnd_toStartOf="@+id/button7"
app:layout_constraintStart_toEndOf="@+id/button5"
app:layout_constraintTop_toTopOf="@+id/guideline2" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="streak"
app:layout_constraintBottom_toTopOf="@+id/textView8"
app:layout_constraintEnd_toStartOf="@+id/textView10"
app:layout_constraintStart_toStartOf="@+id/guideline5"
app:layout_constraintTop_toTopOf="@+id/guideline2" />
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="steps"
app:layout_constraintBottom_toTopOf="@+id/textView9"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintStart_toEndOf="@+id/textView10"
app:layout_constraintTop_toTopOf="@+id/guideline2" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="@+id/button3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/button3" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="setings"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline4"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="16dp"
android:text="Ad"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintStart_toStartOf="@+id/guideline5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6" />
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/guideline3"
app:layout_constraintEnd_toEndOf="@+id/button5"
app:layout_constraintStart_toStartOf="@+id/button5" />
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/guideline3"
app:layout_constraintEnd_toEndOf="@+id/button7"
app:layout_constraintStart_toStartOf="@+id/button7" />
<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Dummy text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Play"
app:layout_constraintBottom_toTopOf="@+id/button4"
app:layout_constraintEnd_toStartOf="@+id/button3"
app:layout_constraintStart_toEndOf="@+id/button2"
app:layout_constraintTop_toBottomOf="@+id/textView10" />
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="@+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="@tools:sample/avatars[5]" />
</androidx.constraintlayout.widget.ConstraintLayout>
So... what have I really done here?
basically - I used guidelines at some percent of the screen(for example 1 constraint at 20% and another at 30%). After that, I constrained my views to those guidelines and by doing that I can achieve
view with the size I want in some present relative to the screen.