I'm using constraintlayout and I have an activity that is a user profile. and it includes a picture of user. when I code xml layout. I can see the picture in preview window inside android studio the image is a png image. I have tried changing the image to one of the android studio avatar. still doesn't work. however, when I run the app the picture is not displaying. does anyone know why this happen?
<?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"
android:background="#color/profileBackground">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="8dp"
android:background="#drawable/bacround_gradient"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.001">
<TextView
android:id="#+id/name_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="72dp"
android:layout_marginEnd="8dp"
android:fontFamily="sans-serif-condensed-medium"
android:text="Amanda Bozquet"
android:textAlignment="center"
android:textColor="#color/headerTextColor"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<ImageView
android:id="#+id/user_imageview"
android:layout_width="126dp"
android:layout_height="109dp"
android:layout_marginStart="8dp"
android:layout_marginTop="144dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/prifile_pic" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:paddingBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/user_imageview"
app:layout_constraintVertical_bias="0.275">
<TextView
android:id="#+id/occupation_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Marine Biologist"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/workplace_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Key Biscaine National Park"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/occupation_textview" />
<TextView
android:id="#+id/state_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="FL, USA"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/workplace_textview" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/state_textview">
<ImageView
android:id="#+id/email_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/state_textview"
app:srcCompat="#drawable/ic_mail_black_24dp" />
<TextView
android:id="#+id/email_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
android:text="abozquet#biscainepark.org"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/email_imageview"
app:layout_constraintTop_toBottomOf="#+id/state_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<ImageView
android:id="#+id/phone_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/email_imageview"
app:srcCompat="#drawable/ic_local_phone_black_24dp" />
<TextView
android:id="#+id/phone_textview"
android:layout_width="239dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="1 (786) 352-2254"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/phone_imageview"
app:layout_constraintTop_toBottomOf="#+id/email_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2">
<ImageView
android:id="#+id/video_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phone_imageview"
app:srcCompat="#drawable/ic_videocam_white_24dp" />
<TextView
android:id="#+id/video_textview"
android:layout_width="242dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="1 (786) 352-2254"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/video_imageview"
app:layout_constraintTop_toBottomOf="#+id/phone_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout3">
<ImageView
android:id="#+id/facebook_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/video_textview"
app:srcCompat="#drawable/ic_icon_facebook" />
<TextView
android:id="#+id/facebook_textview"
android:layout_width="336dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="http://facebook.com/amandab"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/facebook_imageview"
app:layout_constraintTop_toBottomOf="#+id/video_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout4">
<ImageView
android:id="#+id/twitter_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/facebook_textview"
app:srcCompat="#drawable/ic_twitter_white" />
<TextView
android:id="#+id/twitter_textview"
android:layout_width="336dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="\#mandabuz48"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/twitter_imageview"
app:layout_constraintTop_toBottomOf="#+id/facebook_textview" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
From: https://developer.android.com/studio/write/tool-attributes
Android Studio supports a variety of XML attributes in the tools
namespace that enable design-time features (such as which layout to
show in a fragment) or compile-time behaviors (such as which shrinking
mode to apply to your XML resources). When you build your app, the
build tools remove these attributes so there is no effect on your APK
size or runtime behavior.
So the attribute:
tools:src="#drawable/prifile_pic"
is valid only for design-time.
It is not compiled in the APK and you will not see the image when you run the app.
Change it to:
app:srcCompat="#drawable/prifile_pic"
Do any of your ImageViews display the intended images? Your profile pic ImageView is using tools:src while others are using app:srcCompat
I just noticed a potential typo too -
tools:src="#drawable/prifile_pic" <<--- supposed to be profile_pic?
Are you getting any exception in your android studio log-cat, like image not found? As Stitches wrote in above comment --> typo error for prifile_pic, please check you drawable name is same in your xml layout and image name in drawable folder.
Related
I have built a layout using ConstraintLayout for my android application. The application will be only available on mobile (no TV or Tablets). But honestly I don't how to make the layout perfectly fit the phone size.
Here's one of my activity
<?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"
android:background="#color/colorPrimary"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/billabong"
android:gravity="center"
android:text="Applikáció"
android:textColor="#color/white"
android:textSize="65sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.054" />
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutEmail"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.505"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.255">
<android.support.design.widget.TextInputEditText
android:id="#+id/login_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/inputText"
android:hint="E-mail cim"
android:inputType="text"
android:textColor="#color/colorAccent"
android:textColorHint="#color/colorPrimaryLight"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="214dp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutPassword"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/inputLayoutEmail"
app:layout_constraintVertical_bias="0.0">
<android.support.design.widget.TextInputEditText
android:id="#+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/inputText"
android:textColor="#color/colorAccent"
android:hint="Jelszó"
android:inputType="textPassword"
android:textColorHint="#color/colorPrimaryLight" />
</android.support.design.widget.TextInputLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="21dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:buttonTint="#color/colorAccent"
android:hint="Maradjak bejelentkezve"
android:textColorHint="#color/inputText"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/inputLayoutPassword"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/login_button"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_style_1"
android:onClick="onClickButtonMain"
android:text="Bejelentkezés"
android:textColor="#color/white"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/checkBox"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/registration_button"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="18dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_style_blue"
android:onClick="onClickButtonMain"
android:text="Regisztráció"
android:textColor="#color/white"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.494"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_button"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/information_button"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_style_2"
android:onClick="onClickButtonMain"
android:text="Lépések"
android:textColor="#color/colorAccent"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.505"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/registration_button"
app:layout_constraintVertical_bias="0.612" />
</android.support.constraint.ConstraintLayout>
This layout looks great on Pixel but for example on Nexus S the buttons and margins like they don't actually care about how I defined them. I really would like to know what am I doing wrong. I would like to be able to build responsive layouts.
In Android, you need to consider the number of different screen sizes when developing an android application.
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is android:layout_width="300dp" for example) and the result is that what may look good on one screen (your android studio preview screen)but will not look good on another screen (your actual phone).
For your case, I recommend using Chains and Guildelines, this will make your layout responsive.
Here is an example of the layout that you want to achieve using ConstraintLayout:
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="Applikáció"
android:textSize="65sp"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutEmail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toTopOf="#+id/inputLayoutPassword"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toTopOf="#+id/guideline6">
<android.support.design.widget.TextInputEditText
android:id="#+id/login_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/inputText"
android:hint="E-mail cim"
android:inputType="text"
android:textColor="#color/colorAccent"
android:textColorHint="#color/colorPrimaryLight" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutPassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toTopOf="#+id/checkBox"
app:layout_constraintEnd_toEndOf="#+id/inputLayoutEmail"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/inputLayoutEmail">
<android.support.design.widget.TextInputEditText
android:id="#+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/inputText"
android:hint="Jelszó"
android:inputType="textPassword"
android:textColor="#color/colorAccent"
android:textColorHint="#color/colorPrimaryLight" />
</android.support.design.widget.TextInputLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:buttonTint="#color/colorAccent"
android:hint="Maradjak bejelentkezve"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/login_button"
app:layout_constraintEnd_toEndOf="#+id/inputLayoutEmail"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/inputLayoutPassword" />
<Button
android:id="#+id/login_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="onClickButtonMain"
android:text="Bejelentkezés"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/registration_button"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/checkBox" />
<Button
android:id="#+id/registration_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="onClickButtonMain"
android:text="Regisztráció"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/information_button"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/login_button" />
<Button
android:id="#+id/information_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="onClickButtonMain"
android:text="Lépések"
android:textColor="#color/colorAccent"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/inputLayoutEmail"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/registration_button" />
<android.support.constraint.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".9" />
<android.support.constraint.Guideline
android:id="#+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".1" />
</android.support.constraint.ConstraintLayout>
It will look like this (I am adding a picture from the layout editor so you can see the guidelines):
Now all that left to do is to style your views and you have your layout ready.
I'm using Android Oreo AutoTextSize capability in my project.
Every thing works fine except that at first when RecyclerView being loaded, some of textView that uses AutoTextSize has a margin bottom on some RecyclerView items but when I scroll down and then come back to that items, problem solves.
and Although in some items, length of TextView is same with another item, but text sizes are different.
You can see my problem in below image :
When I scroll down and then come back, it is ok
here is items layout :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/white"
app:cardCornerRadius="10dp"
app:cardElevation="3dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:id="#+id/fessMetaCL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="24dp"
android:background="#drawable/fees_item_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fee_currency_icon"
app:layout_constraintVertical_bias="1.0">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fees_update_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/lastupdate"
android:textColor="#color/fees_text_color"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fee_currency_date"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/fee_currency_stock"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_date"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:maxLines="1"
android:textColor="#color/fees_text_color"
app:autoSizeMaxTextSize="#dimen/order_result_text_max_size"
app:autoSizeMinTextSize="#dimen/order_result_text_min_size"
app:autoSizeStepGranularity="#dimen/order_result_text_rise_step_size"
app:autoSizeTextType="uniform"
app:layout_constraintBaseline_toBaselineOf="#+id/fees_update_label"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fees_stock_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/stock"
android:textColor="#color/fees_text_color"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_stock"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:maxLines="1"
android:textColor="#color/fees_text_color"
app:autoSizeMaxTextSize="#dimen/order_result_text_max_size"
app:autoSizeMinTextSize="#dimen/order_result_text_min_size"
app:autoSizeStepGranularity="#dimen/order_result_text_rise_step_size"
app:autoSizeTextType="uniform"
app:layout_constraintBaseline_toBaselineOf="#+id/fees_stock_label"
app:layout_constraintStart_toEndOf="#+id/fees_stock_label" />
</android.support.constraint.ConstraintLayout>
<ImageView
android:id="#+id/fee_currency_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/others" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textColor="#color/fees_text_color"
android:textSize="#dimen/dashboard_fees_small_font_size"
app:layout_constraintStart_toEndOf="#+id/fee_currency_icon"
app:layout_constraintTop_toTopOf="#+id/fee_currency_icon" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/fees_text_color"
android:textSize="#dimen/dashboard_fees_small_font_size"
app:layout_constraintBottom_toBottomOf="#+id/fee_currency_icon"
app:layout_constraintStart_toStartOf="#+id/fee_currency_name"
app:layout_constraintTop_toBottomOf="#+id/fee_currency_name" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_change"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:textColor="#color/fees_text_color"
android:textSize="#dimen/dashboard_fees_big_font_size"
app:layout_constraintBottom_toBottomOf="#+id/fee_currency_icon"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/fee_currency_icon" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fees_change_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="#string/change"
android:textColor="#color/fees_text_color"
android:textSize="#dimen/dashboard_fees_small_font_size"
app:layout_constraintBottom_toBottomOf="#+id/fee_currency_change"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/fee_currency_change" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="187dp" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
I am using the drag and drop functionality in the layout editor to try and get 4 image buttons aligned in a kite shape. This is the layout I am trying to achieve, currently using ImageButton but I will change to the circular image view to suit the layout later.
Can anyone help me to achieve this. Please find my XML below:
<android.support.constraint.ConstraintLayout
android:id="#+id/ongoing_call_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/activity_padding"
android:layout_below="#id/contact_number_tv"
android:layout_above="#id/calculator_layout">
<ImageButton
android:id="#+id/home_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="120dp"
android:src="#android:drawable/btn_star"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/not_billable_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="104dp"
android:src="#android:drawable/btn_star"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/billable_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/btn_star"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/not_billable_imgBtn"
tools:layout_editor_absoluteY="105dp" />
<ImageButton
android:id="#+id/decide_later_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="120dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
Try this buddy, and make your own adjustments.
<android.support.constraint.ConstraintLayout
android:id="#+id/ongoing_call_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/activity_padding"
android:layout_below="#id/contact_number_tv"
android:layout_above="#id/calculator_layout">
<ImageButton
android:id="#+id/home_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.32"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/not_billable_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:src="#android:drawable/btn_star"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/billable_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.66"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/decide_later_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="60dp"
android:layout_marginBottom="24dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/not_billable_imgBtn" />
</android.support.constraint.ConstraintLayout>
See the example image
But perhaps your real problem is that the constrainLayout is not your root element, and you should set a fixed height instead of android:layout_height="wrap_content"
I am developing an Android app for a tablet, and the app will be in Hebrew language which Right to Left, when i create a layout for ldrtl it creates it well, and when I create a xlarge layout it also creates it will ( I can see it in the design mode big), but when I try to create a ldrtl-xlarge layout, it just makes it ldrtl, but not really xlarge( it still the regular size view)!
anyone have any ideas?
<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="com.raghdak.wardm.smartcourierclient.newShipmentActivity">
<Button
android:id="#+id/btnBack"
android:layout_width="114dp"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:layout_marginEnd="16dp"
android:text="#string/btnBack"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<CheckBox
android:id="#+id/urgentCheckBox"
android:layout_width="97dp"
android:layout_height="32dp"
android:layout_marginStart="36dp"
android:layout_marginTop="28dp"
android:text="#string/urgent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/dueDateText"
android:layout_width="94dp"
android:layout_height="35dp"
android:layout_marginStart="36dp"
android:layout_marginTop="16dp"
android:text="#string/dueDate"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/urgentCheckBox" />
<TextView
android:id="#+id/claimantText"
android:layout_width="92dp"
android:layout_height="39dp"
android:layout_marginStart="40dp"
android:layout_marginTop="20dp"
android:text="#string/claimant"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dueDateText" />
<EditText
android:id="#+id/claimantEditText"
android:layout_width="217dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="124dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.887"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.021" />
<EditText
android:id="#+id/dueDateEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:ems="10"
android:inputType="date"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.888"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/addressText"
android:layout_width="88dp"
android:layout_height="38dp"
android:layout_marginStart="44dp"
android:layout_marginTop="24dp"
android:text="#string/address"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/claimantText" />
<EditText
android:id="#+id/addressEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.888"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/claimantEditText"
app:layout_constraintVertical_bias="0.033" />
<TextView
android:id="#+id/nameText"
android:layout_width="84dp"
android:layout_height="34dp"
android:layout_marginStart="48dp"
android:layout_marginTop="20dp"
android:text="#string/receiverName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/addressText" />
<EditText
android:id="#+id/nameEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.888"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/addressEditText"
app:layout_constraintVertical_bias="0.019" />
<TextView
android:id="#+id/phoneText"
android:layout_width="83dp"
android:layout_height="27dp"
android:layout_marginStart="48dp"
android:layout_marginTop="24dp"
android:text="#string/phone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nameText" />
<EditText
android:id="#+id/phoneEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.888"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nameEditText"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/poboxText"
android:layout_width="80dp"
android:layout_height="29dp"
android:layout_marginStart="52dp"
android:layout_marginTop="20dp"
android:text="#string/pobox"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phoneText" />
<EditText
android:id="#+id/poboxEditText"
android:layout_width="215dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.888"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phoneEditText"
app:layout_constraintVertical_bias="0.071" />
<Button
android:id="#+id/btnSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:layout_marginStart="44dp"
android:text="#string/save"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
images:
ldrtl
xlarge
ldrtl-xlarge
After searching I found that this is an Android Studio issue, the best solution is to create the layout regular as ldtrl, and then simply in the android studio Design mode catch the right bottom edge of the screen and then too many resize options will appear choose which one you want buy dragging the screen to the relevant place, this thing will create a custom ldrtl layout (in my case custom ldrtl-xlarge layout), and you can still work with it as a really big screen with right to left language direction.
In the Constraint layout I have a Button and on top of it is an Image View(id==R.id.imageView) which is aligned center-right area of the Button.The background of the Image View is a white colored right arrow. In design view and in my device the Image View is not displayed. I cleaned and build the project but the problem persists.In the Image below the blue rectangular portion is then area where the Image should be displayed.Please provide a solution for this...
Design Preview:
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">
<TextView
android:id="#+id/head"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ph_verify_lbl_mrgn"
android:text="#string/verify_your_phone_number"
android:textColor="#bb2b67"
android:textSize="#dimen/ph_verify_head_tsxtsze"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="#string/lorem_ipsum_lorem_ipsum"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/head" />
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:hint="#string/ph_hint"
android:inputType="number"
android:paddingTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/arrow"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="0.909"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button"
app:layout_constraintVertical_bias="0.571" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="89dp"
android:layout_marginTop="16dp"
android:background="#drawable/button_bg"
android:text="#string/next"
android:textColor="#ffffff"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText"
app:layout_constraintVertical_bias="0.25" />
</android.support.constraint.ConstraintLayout>
Place the ImageView tag below the Button tag.
Since you have provided match parent to the button and set the constraints to fill horizontally, the ImageView is being overlapped.
You can test it by keeping property of Button clickable="false" and put a click listener on the ImageView
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="89dp"
android:layout_marginTop="16dp"
android:background="#drawable/button_bg"
android:text="#string/next"
android:textColor="#ffffff"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText"
app:layout_constraintVertical_bias="0.25" />
<ImageView
android:id="#+id/imageView"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/arrow"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="0.909"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button"
app:layout_constraintVertical_bias="0.571" />
UPDATE
Also if this does not work, put an elevation to the ImageView
android:elevation="2dp"