Android Studio Constraint Layout pushing Images offscreen
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
So I'm using constraint layout to try and have 4 icon images followed by text at the bottom of my page. Here is an example of the design Design
When I try to run the app though it shifts the layout offscreen. Image
I have everything constrained together, and I'll attach an example Constraints
Here is the XML design code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".HomeFragment">
<!-- TODO: Update blank fragment layout -->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradientbackground">
<ProgressBar
android:id="@+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="450dp"
android:layout_height="450dp"
android:layout_centerInParent="true"
android:indeterminate="false"
android:max="100"
android:progress="100"
android:progressDrawable="@drawable/circle"
android:secondaryProgress="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:layout_marginBottom="18dp"
android:gravity="center"
android:text="50%"
android:textColor="@color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="163dp"
android:text="Steps"
android:textAlignment="center"
android:textSize="80sp"
app:layout_constraintBottom_toBottomOf="@+id/tv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="52dp"
android:layout_marginBottom="8dp"
android:src="@drawable/calorie"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView3"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.453"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="348dp"
android:layout_marginBottom="8dp"
android:text="Calories"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.463" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/miles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.453"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView4"
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="Miles"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.463" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/score"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintVertical_bias="0.486" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="52dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Score"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintVertical_bias="0.532" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/bonus"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView8"
app:layout_constraintHorizontal_bias="0.527"
app:layout_constraintStart_toEndOf="@+id/textView5"
app:layout_constraintTop_toBottomOf="@+id/imageView3"
app:layout_constraintVertical_bias="0.486" />
<TextView
android:id="@+id/textView8"
android:layout_width="99dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="84dp"
android:layout_marginBottom="8dp"
android:text="Bonus"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="0.532" />
</android.support.constraint.ConstraintLayout>
Anyone have any ideas on how to fix this?
android 
android-studio 
android-layout asked Nov 16 '18 at 17:38
MunchlaxxMunchlaxx
111
add a comment |
0
So I'm using constraint layout to try and have 4 icon images followed by text at the bottom of my page. Here is an example of the design Design
When I try to run the app though it shifts the layout offscreen. Image
I have everything constrained together, and I'll attach an example Constraints
Here is the XML design code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".HomeFragment">
<!-- TODO: Update blank fragment layout -->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradientbackground">
<ProgressBar
android:id="@+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="450dp"
android:layout_height="450dp"
android:layout_centerInParent="true"
android:indeterminate="false"
android:max="100"
android:progress="100"
android:progressDrawable="@drawable/circle"
android:secondaryProgress="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:layout_marginBottom="18dp"
android:gravity="center"
android:text="50%"
android:textColor="@color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="163dp"
android:text="Steps"
android:textAlignment="center"
android:textSize="80sp"
app:layout_constraintBottom_toBottomOf="@+id/tv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="52dp"
android:layout_marginBottom="8dp"
android:src="@drawable/calorie"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView3"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.453"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="348dp"
android:layout_marginBottom="8dp"
android:text="Calories"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.463" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/miles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.453"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView4"
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="Miles"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.463" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/score"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintVertical_bias="0.486" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="52dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Score"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintVertical_bias="0.532" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/bonus"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView8"
app:layout_constraintHorizontal_bias="0.527"
app:layout_constraintStart_toEndOf="@+id/textView5"
app:layout_constraintTop_toBottomOf="@+id/imageView3"
app:layout_constraintVertical_bias="0.486" />
<TextView
android:id="@+id/textView8"
android:layout_width="99dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="84dp"
android:layout_marginBottom="8dp"
android:text="Bonus"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="0.532" />
</android.support.constraint.ConstraintLayout>
Anyone have any ideas on how to fix this?
android android-studio android-layout asked Nov 16 '18 at 17:38
MunchlaxxMunchlaxx
111
add a comment |
0
0
0
So I'm using constraint layout to try and have 4 icon images followed by text at the bottom of my page. Here is an example of the design Design
When I try to run the app though it shifts the layout offscreen. Image
I have everything constrained together, and I'll attach an example Constraints
Here is the XML design code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".HomeFragment">
<!-- TODO: Update blank fragment layout -->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradientbackground">
<ProgressBar
android:id="@+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="450dp"
android:layout_height="450dp"
android:layout_centerInParent="true"
android:indeterminate="false"
android:max="100"
android:progress="100"
android:progressDrawable="@drawable/circle"
android:secondaryProgress="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:layout_marginBottom="18dp"
android:gravity="center"
android:text="50%"
android:textColor="@color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="163dp"
android:text="Steps"
android:textAlignment="center"
android:textSize="80sp"
app:layout_constraintBottom_toBottomOf="@+id/tv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="52dp"
android:layout_marginBottom="8dp"
android:src="@drawable/calorie"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView3"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.453"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="348dp"
android:layout_marginBottom="8dp"
android:text="Calories"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.463" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/miles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.453"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView4"
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="Miles"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.463" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/score"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintVertical_bias="0.486" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="52dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Score"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintVertical_bias="0.532" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/bonus"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView8"
app:layout_constraintHorizontal_bias="0.527"
app:layout_constraintStart_toEndOf="@+id/textView5"
app:layout_constraintTop_toBottomOf="@+id/imageView3"
app:layout_constraintVertical_bias="0.486" />
<TextView
android:id="@+id/textView8"
android:layout_width="99dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="84dp"
android:layout_marginBottom="8dp"
android:text="Bonus"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="0.532" />
</android.support.constraint.ConstraintLayout>
Anyone have any ideas on how to fix this?
android android-studio android-layout asked Nov 16 '18 at 17:38
MunchlaxxMunchlaxx
111
So I'm using constraint layout to try and have 4 icon images followed by text at the bottom of my page. Here is an example of the design Design
When I try to run the app though it shifts the layout offscreen. Image
I have everything constrained together, and I'll attach an example Constraints
Here is the XML design code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".HomeFragment">
<!-- TODO: Update blank fragment layout -->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradientbackground">
<ProgressBar
android:id="@+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="450dp"
android:layout_height="450dp"
android:layout_centerInParent="true"
android:indeterminate="false"
android:max="100"
android:progress="100"
android:progressDrawable="@drawable/circle"
android:secondaryProgress="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:layout_marginBottom="18dp"
android:gravity="center"
android:text="50%"
android:textColor="@color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="163dp"
android:text="Steps"
android:textAlignment="center"
android:textSize="80sp"
app:layout_constraintBottom_toBottomOf="@+id/tv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="52dp"
android:layout_marginBottom="8dp"
android:src="@drawable/calorie"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView3"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.453"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="348dp"
android:layout_marginBottom="8dp"
android:text="Calories"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.463" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/miles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.453"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView4"
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="Miles"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.463" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/score"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintVertical_bias="0.486" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="52dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Score"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintVertical_bias="0.532" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/bonus"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView8"
app:layout_constraintHorizontal_bias="0.527"
app:layout_constraintStart_toEndOf="@+id/textView5"
app:layout_constraintTop_toBottomOf="@+id/imageView3"
app:layout_constraintVertical_bias="0.486" />
<TextView
android:id="@+id/textView8"
android:layout_width="99dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="84dp"
android:layout_marginBottom="8dp"
android:text="Bonus"
android:textColor="#ffffff"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="0.532" />
</android.support.constraint.ConstraintLayout>
Anyone have any ideas on how to fix this?
android android-studio android-layout android android-studio android-layout asked Nov 16 '18 at 17:38
MunchlaxxMunchlaxx
111
asked Nov 16 '18 at 17:38
MunchlaxxMunchlaxx
111
asked Nov 16 '18 at 17:38
MunchlaxxMunchlaxx
111
asked Nov 16 '18 at 17:38
MunchlaxxMunchlaxx
111
asked Nov 16 '18 at 17:38
MunchlaxxMunchlaxx
111
111
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Check with the below code icons and text are aligned properly (Tested in Nexus 7 and Nexus 6 emulator), make adjustments as per your need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<ProgressBar
android:id="@+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:layout_marginBottom="8dp"
android:indeterminate="false"
android:max="100"
android:progress="100"
android:progressDrawable="@drawable/ic_launcher_background"
android:secondaryProgress="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/tv"
android:layout_width="250dp"
android:layout_height="79dp"
android:layout_centerInParent="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="50%"
android:textColor="@color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Steps"
android:textAlignment="center"
android:textSize="80sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="@+id/circularProgressbar"
app:layout_constraintHorizontal_bias="0.846"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.165" />
<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="@+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.181"
app:layout_constraintStart_toEndOf="@+id/textView4"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.744" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Calories"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.333"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.43"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView4"
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="Miles"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.09"
app:layout_constraintStart_toEndOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView3" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Score"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="0.531" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="52dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView8"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toEndOf="@+id/textView5" />
<TextView
android:id="@+id/textView8"
android:layout_width="99dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="8dp"
android:text="Bonus"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintVertical_bias="0.536" />
</android.support.constraint.ConstraintLayout>
answered Nov 19 '18 at 5:59
abhil nairabhil nair
128113
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53342828%2fandroid-studio-constraint-layout-pushing-images-offscreen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Check with the below code icons and text are aligned properly (Tested in Nexus 7 and Nexus 6 emulator), make adjustments as per your need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<ProgressBar
android:id="@+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:layout_marginBottom="8dp"
android:indeterminate="false"
android:max="100"
android:progress="100"
android:progressDrawable="@drawable/ic_launcher_background"
android:secondaryProgress="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/tv"
android:layout_width="250dp"
android:layout_height="79dp"
android:layout_centerInParent="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="50%"
android:textColor="@color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Steps"
android:textAlignment="center"
android:textSize="80sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="@+id/circularProgressbar"
app:layout_constraintHorizontal_bias="0.846"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.165" />
<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="@+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.181"
app:layout_constraintStart_toEndOf="@+id/textView4"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.744" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Calories"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.333"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.43"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView4"
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="Miles"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.09"
app:layout_constraintStart_toEndOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView3" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Score"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="0.531" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="52dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView8"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toEndOf="@+id/textView5" />
<TextView
android:id="@+id/textView8"
android:layout_width="99dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="8dp"
android:text="Bonus"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintVertical_bias="0.536" />
</android.support.constraint.ConstraintLayout>
answered Nov 19 '18 at 5:59
abhil nairabhil nair
128113
add a comment |
0
Check with the below code icons and text are aligned properly (Tested in Nexus 7 and Nexus 6 emulator), make adjustments as per your need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<ProgressBar
android:id="@+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:layout_marginBottom="8dp"
android:indeterminate="false"
android:max="100"
android:progress="100"
android:progressDrawable="@drawable/ic_launcher_background"
android:secondaryProgress="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/tv"
android:layout_width="250dp"
android:layout_height="79dp"
android:layout_centerInParent="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="50%"
android:textColor="@color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Steps"
android:textAlignment="center"
android:textSize="80sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="@+id/circularProgressbar"
app:layout_constraintHorizontal_bias="0.846"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.165" />
<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="@+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.181"
app:layout_constraintStart_toEndOf="@+id/textView4"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.744" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Calories"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.333"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.43"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView4"
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="Miles"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.09"
app:layout_constraintStart_toEndOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView3" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Score"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="0.531" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="52dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView8"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toEndOf="@+id/textView5" />
<TextView
android:id="@+id/textView8"
android:layout_width="99dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="8dp"
android:text="Bonus"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintVertical_bias="0.536" />
</android.support.constraint.ConstraintLayout>
answered Nov 19 '18 at 5:59
abhil nairabhil nair
128113
add a comment |
0
0
0
Check with the below code icons and text are aligned properly (Tested in Nexus 7 and Nexus 6 emulator), make adjustments as per your need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<ProgressBar
android:id="@+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:layout_marginBottom="8dp"
android:indeterminate="false"
android:max="100"
android:progress="100"
android:progressDrawable="@drawable/ic_launcher_background"
android:secondaryProgress="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/tv"
android:layout_width="250dp"
android:layout_height="79dp"
android:layout_centerInParent="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="50%"
android:textColor="@color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Steps"
android:textAlignment="center"
android:textSize="80sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="@+id/circularProgressbar"
app:layout_constraintHorizontal_bias="0.846"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.165" />
<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="@+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.181"
app:layout_constraintStart_toEndOf="@+id/textView4"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.744" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Calories"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.333"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.43"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView4"
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="Miles"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.09"
app:layout_constraintStart_toEndOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView3" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Score"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="0.531" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="52dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView8"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toEndOf="@+id/textView5" />
<TextView
android:id="@+id/textView8"
android:layout_width="99dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="8dp"
android:text="Bonus"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintVertical_bias="0.536" />
</android.support.constraint.ConstraintLayout>
answered Nov 19 '18 at 5:59
abhil nairabhil nair
128113
Check with the below code icons and text are aligned properly (Tested in Nexus 7 and Nexus 6 emulator), make adjustments as per your need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<ProgressBar
android:id="@+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:layout_marginBottom="8dp"
android:indeterminate="false"
android:max="100"
android:progress="100"
android:progressDrawable="@drawable/ic_launcher_background"
android:secondaryProgress="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/tv"
android:layout_width="250dp"
android:layout_height="79dp"
android:layout_centerInParent="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="50%"
android:textColor="@color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Steps"
android:textAlignment="center"
android:textSize="80sp"
app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
app:layout_constraintEnd_toEndOf="@+id/circularProgressbar"
app:layout_constraintHorizontal_bias="0.846"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.165" />
<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="@+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.181"
app:layout_constraintStart_toEndOf="@+id/textView4"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.744" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Calories"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.333"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.43"
tools:src="@tools:sample/backgrounds/scenic" />
<TextView
android:id="@+id/textView4"
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="Miles"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.09"
app:layout_constraintStart_toEndOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
app:layout_constraintVertical_bias="0.434" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView3" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Score"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="0.531" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="52dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView8"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toEndOf="@+id/textView5" />
<TextView
android:id="@+id/textView8"
android:layout_width="99dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="8dp"
android:text="Bonus"
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:layout_constraintVertical_bias="0.536" />
</android.support.constraint.ConstraintLayout>
answered Nov 19 '18 at 5:59
abhil nairabhil nair
128113
edited Nov 19 '18 at 6:44
answered Nov 19 '18 at 5:59
abhil nairabhil nair
128113
answered Nov 19 '18 at 5:59
abhil nairabhil nair
128113
answered Nov 19 '18 at 5:59
abhil nairabhil nair
128113
128113
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53342828%2fandroid-studio-constraint-layout-pushing-images-offscreen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
