Hey I develop my first Android Application... I would like to develop my layout for these devices:
480×854 | 240 dpi
720×1280 | 320 dpi
1080×1920 | 420 dpi
1080×1920 | 480 dpi
1440×2672 | 640 dpi
I already use Constraint Layout - but it doesnt look nice at all devices, should I use smallest width qualifier and how do I find out swxxxdp for xxxdpi?
I have a CardView - this looks good for me on 480 x 800 but the Buttons and textsize are to little on other devices - I think because i dont use wrap content for these buttons and textviews.. How do they adapt to all devices?.. It's my first Android Project..
<android.support.v7.widget.CardView xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
card_view:cardElevation="10dp"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="7dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center">
<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:layout_gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/main_Image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:scaleType="fitXY"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/main_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="Vegane Bolognese"
android:textColor="#color/colorBlack"
android:textSize="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/main_Image" />
<TextView
android:id="#+id/main_Usp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Bolo mit Tofu"
android:textColor="#color/colorBlack"
android:textSize="12dp"
app:layout_constraintDimensionRatio="w,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/main_name" />
<Button
android:id="#+id/md_btn_time"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/ic_time"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/main_Usp" />
<Button
android:id="#+id/md_btn_difficulty"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/ic_difficulty"
app:layout_constraintStart_toEndOf="#+id/md_btn_time"
app:layout_constraintTop_toBottomOf="#+id/main_Usp" />
<Button
android:id="#+id/md_btn_servings"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/ic_servings"
app:layout_constraintStart_toEndOf="#+id/md_btn_difficulty"
app:layout_constraintTop_toBottomOf="#+id/main_Usp" />
<Button
android:id="#+id/md_btn_owner"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:background="#drawable/ic_insta"
app:layout_constraintStart_toEndOf="#+id/md_btn_servings"
app:layout_constraintTop_toBottomOf="#+id/main_Usp" />
<TextView
android:id="#+id/md_time"
android:layout_width="32dp"
android:layout_height="16dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="35 Min"
android:textAlignment="center"
android:textColor="#color/colorBlack"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/md_btn_time"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/md_difficulty"
android:layout_width="32dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Leicht"
android:textAlignment="center"
android:textColor="#color/colorBlack"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/md_time"
app:layout_constraintTop_toBottomOf="#+id/md_btn_difficulty"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/md_servings"
android:layout_width="32dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="4"
android:textAlignment="center"
android:textColor="#color/colorBlack"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/md_difficulty"
app:layout_constraintTop_toBottomOf="#+id/md_btn_servings"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/md_owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#VeganeKochapp"
android:textAlignment="center"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/md_servings"
app:layout_constraintTop_toBottomOf="#+id/md_btn_owner"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/main_Price"
android:layout_width="60dp"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/price_button"
android:text="12,99 €"
android:textColor="#color/colorWithe"
android:textSize="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/md_owner"
app:layout_constraintTop_toBottomOf="#+id/main_Usp"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
you have to set the constraints of Constraint Layout in a proper way then it will work on All devices perfectly.
Or you can add multiple layouts for different screen sizes Multiple Screen Sizes
Or you can use this library, it will adjust your items size according to screen dimensions SDP Library
Related
I am facing problem with the scaling of "images", "text fields", "buttons", basically all the elements I have used in my layout.
If you see below, This is is a 5.5 inch resolution display and my application is looking perfect, but when I change screen resolution, my elements start overlapping. This is how it starts looking...
Elements starts overlapping eachother, can anyone help me with this issue? I have been struggling for 4 days now.
Below is the layout XML...
ALSO I WAS DRAGGING THE SMALL CENTERED BUBBLES TO MATCH IT TO THE SCREEN SEND SO THAT I COULD BUILD, OTHERWISE I WAS GETTING BUILD ERROR, SO I DRAGGED THOSE BUBBLES TO EDGE OF THE SCREEN TO MAKE IT FIX
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#drawable/appbackgroundall">
<Switch
android:id="#+id/smartlever"
android:layout_width="116dp"
android:layout_height="42dp"
android:checked="false"
android:hapticFeedbackEnabled="true"
android:scaleX="2"
android:scaleY="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.294"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499"/>
<TextView
android:id="#+id/smartButtonText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/sansationregular"
android:scaleX="2"
android:scaleY="2"
android:text="Tap to alter smart mode"
android:textColor="#color/colorAccent"
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.433" />
<ImageView
android:id="#+id/allbackcologo"
android:layout_width="66dp"
android:layout_height="62dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.976"
app:srcCompat="#drawable/companylogo" />
<ImageView
android:id="#+id/spaceman"
android:layout_width="205dp"
android:layout_height="253dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.868"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.15"
app:srcCompat="#drawable/spaceman" />
<ImageView
android:id="#+id/pingedlogo"
android:layout_width="139dp"
android:layout_height="52dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.058"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.023"
app:srcCompat="#drawable/pingedlogo" />
<Button
android:id="#+id/developerbutton"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:hapticFeedbackEnabled="true"
android:layout_width="64dp"
android:layout_height="61dp"
android:fontFamily="monospace"
android:scaleX="2"
android:scaleY="2"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.976" />
<ImageView
android:id="#+id/settingButton"
android:layout_width="61dp"
android:layout_height="59dp"
android:rotation="175"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.923"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.023"
app:srcCompat="#drawable/settingbutton" />
<Button
android:id="#+id/settingB"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="60dp"
android:layout_height="59dp"
android:fontFamily="monospace"
android:scaleX="2"
android:scaleY="2"
app:layout_constraintBottom_toBottomOf="#+id/settingButton"
app:layout_constraintEnd_toEndOf="#+id/settingButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/settingButton"
app:layout_constraintTop_toTopOf="#+id/settingButton"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.093"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.784"
app:srcCompat="#drawable/alientwo" />
</androidx.constraintlayout.widget.ConstraintLayout>
Try to use minWidth and maxWidth,
example :
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxHeight="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.093"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.784"
app:srcCompat="#drawable/alientwo" />
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.
hello! I need my layouts to be responsive. I choose ConstraintLayout for this case but imageviews in my ConstraintLayout in small size and large size became irregular.
in tablet, my imageviews became too small and in small size is too large. my XML is here I think I cant set all true attributes in this layout. If someone guides me, helped me a lot*
<Button
android:id="#+id/shopbtn"
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:background="#drawable/shop"
android:fontFamily="casual"
android:lineSpacingExtra="18sp"
android:textColor="#android:color/background_light"
android:textSize="30sp"
android:textStyle="normal|bold"
android:typeface="serif"
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.35000002" />
<Button
android:id="#+id/exitbtn"
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:background="#drawable/prew"
android:fontFamily="casual"
android:lineSpacingExtra="18sp"
android:textColor="#android:color/background_light"
android:textSize="30sp"
android:textStyle="normal|bold"
android:typeface="serif"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/shopbtn"
app:layout_constraintHorizontal_bias="0.785"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.351" />
<Button
android:id="#+id/startbtn"
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:background="#drawable/play"
android:fontFamily="casual"
android:lineSpacingExtra="18sp"
android:textColor="#android:color/background_light"
android:textSize="30sp"
android:textStyle="normal|bold"
android:typeface="serif"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toEndOf="#+id/shopbtn"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.35000002" />
<ImageView
android:id="#+id/adamkhar"
android:layout_width="94dp"
android:layout_height="117dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.073"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.625"
app:srcCompat="#drawable/pico" />
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
You can ise ConstraintLayout with guidelines and Chains to support different screen sizes.
Here is an example 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"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="#+id/shopbtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#drawable/rose"
android:fontFamily="casual"
android:lineSpacingExtra="18sp"
android:textColor="#android:color/background_light"
android:textSize="30sp"
android:textStyle="normal|bold"
android:typeface="serif"
app:layout_constraintEnd_toStartOf="#+id/startbtn"
app:layout_constraintHeight_percent="0.3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/exitbtn"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/exitbtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#drawable/rose"
android:fontFamily="casual"
android:lineSpacingExtra="18sp"
android:textColor="#android:color/background_light"
android:textSize="30sp"
android:textStyle="normal|bold"
android:typeface="serif"
app:layout_constraintBottom_toBottomOf="#+id/shopbtn"
app:layout_constraintEnd_toStartOf="#+id/shopbtn"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/shopbtn" />
<Button
android:id="#+id/startbtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/rose"
android:fontFamily="casual"
android:lineSpacingExtra="18sp"
android:textColor="#android:color/background_light"
android:textSize="30sp"
android:textStyle="normal|bold"
android:typeface="serif"
app:layout_constraintBottom_toBottomOf="#+id/shopbtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/shopbtn"
app:layout_constraintTop_toTopOf="#+id/shopbtn" />
<ImageView
android:id="#+id/adamkhar"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/shopbtn"
app:srcCompat="#drawable/ic_launcher_background" />
</android.support.constraint.ConstraintLayout>*
And it will look like this:
Please notice that this is just an example and if you want to change the size of your views just change the value of app:layout_constraintHeight_percent and app:layout_constraintHeight_percent.
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.
I am trying to achieve this layout :
This is the code i tried :
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yellow_bg"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:id="#+id/imageView3" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/crown"
tools:layout_editor_absoluteY="5dp"
tools:layout_editor_absoluteX="10dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/position_no_bg"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
android:layout_marginBottom="8dp"
android:id="#+id/imageView4" />
</android.support.constraint.ConstraintLayout>
But I am getting this output :
And the problem is that as I decrease the screen size, I get issue of the crown moving from its position. My main issue is that the crown is not able to set in place.
These are the images :
EDIT :
Adding 2 constraints for crown :
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yellow_bg"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:id="#+id/imageView3" />
<ImageView
android:layout_width="45dp"
android:layout_height="32dp"
android:src="#drawable/crown"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
android:layout_marginBottom="42dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView3" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/position_no_bg"
app:layout_constraintTop_toTopOf="#+id/imageView3"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
android:layout_marginBottom="8dp"
android:id="#+id/imageView4"
app:layout_constraintVertical_bias="1.0"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView3" />
</android.support.constraint.ConstraintLayout>
EDIT 2 :
Tried this code again, and got good response but the design is moving in 7.0" plus devices:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.4"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yellow_without_crown"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/imageView4" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/crown"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="#+id/imageView4"
android:layout_marginTop="0dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView4"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.04"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/position_no_bg"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
android:layout_marginBottom="0dp"
app:layout_constraintTop_toTopOf="#+id/imageView4"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView4"
android:id="#+id/imageView5" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
Try this may solve your problem
EDIT
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="#drawable/yellow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="#+id/imageView4" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="76dp"
android:src="#drawable/crown"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:src="#drawable/circle"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView3" />
</android.support.constraint.ConstraintLayout>
Now, this is working on different screen sizes make a try
Here is screenshot
You are applying absolute positions for your crown, this is why the crown stays where it is when you change the screen size.
The crown image is not attached to the other graphics.
i.e. set the crowns bottom constraint to the bottom border of your yellow_bgimage and increase the bottom margin
Edit:
This is how it could fit in your question - you have to remove the white space around your background image!!
set background constraint to bottom and left of parent.
set the
circle to the bottom and left of the background -
after that i set the crown on top of the background.
it floats now above because your
image has a huhe white border. you need to adjust that.
you need to adjust it finally with margins.
<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">
<ImageView
android:id="#+id/bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:src="#drawable/yellow_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<ImageView
android:id="#+id/crown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/crown"
app:layout_constraintBottom_toTopOf="#+id/bg"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/bg" />
<ImageView
android:id="#+id/circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginLeft="12dp"
android:src="#drawable/position_no_bg"
app:layout_constraintBottom_toBottomOf="#+id/bg"
app:layout_constraintLeft_toLeftOf="#id/bg"/>
</android.support.constraint.ConstraintLayout>