i have problem to responsive layout use ConstraintLayout - android

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.

Related

edittext jumps up even though its constrained

I am new to android and working on a simple app. I have a forms page and would like the user to fill out when signing up for the app. My editext for the age and the dollarValue jumps up even though I have constrained it. I will post the xml down below.
provider_signup.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">
<RadioButton
android:id="#+id/radioButton4"
android:layout_width="78dp"
android:layout_height="22dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="8dp"
android:text="Fixed"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/radioButton3"
app:layout_constraintTop_toBottomOf="#+id/my_spinner"
app:layout_constraintVertical_bias="0.076" />
<ImageView
android:id="#+id/faceImage"
android:layout_width="91dp"
android:layout_height="66dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.038"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
<Spinner
android:id="#+id/my_spinner"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
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.577" />
<TextView
android:id="#+id/insured"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginBottom="64dp"
android:layout_marginStart="76dp"
android:text="Insured"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:background="#color/colorAccent"
android:id="#+id/saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="SAVE"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/ageTextView"
android:layout_width="37dp"
android:layout_height="24dp"
android:layout_marginBottom="116dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:text="Age"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.047"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.98" />
<TextView
android:id="#+id/dollarTextView"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:layout_marginBottom="124dp"
android:layout_marginEnd="104dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Dollar Value"
android:textAlignment="center"
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/radioButton3"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView7"
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="Rate"
android:textAlignment="center"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/insured"
app:layout_constraintEnd_toStartOf="#+id/radioButton4"
app:layout_constraintHorizontal_bias="0.621"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_spinner"
app:layout_constraintVertical_bias="0.189" />
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="81dp"
android:layout_height="19dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="52dp"
android:layout_marginTop="8dp"
android:text="Hourly"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_spinner"
app:layout_constraintVertical_bias="0.07999998" />
<EditText
android:id="#+id/firstName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="First Name"
app:layout_constraintBottom_toTopOf="#+id/lastName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/faceImage" />
<EditText
android:id="#+id/lastName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Last Name"
app:layout_constraintBottom_toTopOf="#+id/Address"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.948" />
<EditText
android:id="#+id/Address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Address"
app:layout_constraintBottom_toTopOf="#+id/my_spinner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent" />
<RadioButton
android:id="#+id/yesRadioButton"
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="YES"
app:layout_constraintBottom_toTopOf="#+id/saveButton"
app:layout_constraintEnd_toStartOf="#+id/noRadioButton"
app:layout_constraintHorizontal_bias="0.513"
app:layout_constraintStart_toEndOf="#+id/insured"
app:layout_constraintTop_toBottomOf="#+id/dollarTextView"
app:layout_constraintVertical_bias="0.894" />
<RadioButton
android:id="#+id/noRadioButton"
android:layout_width="wrap_content"
android:layout_height="29dp"
android:layout_marginBottom="68dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="NO"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.516"
app:layout_constraintStart_toEndOf="#+id/insured" />
<EditText
android:id="#+id/ageEditText"
android:layout_width="94dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/dollarTextView"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioButton4"
app:layout_constraintVertical_bias="0.088" />
<EditText
android:id="#+id/dollarEditText"
android:layout_width="64dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.666"
app:layout_constraintStart_toEndOf="#+id/dollarTextView"
app:layout_constraintTop_toBottomOf="#+id/radioButton3"
app:layout_constraintVertical_bias="0.088" />
</android.support.constraint.ConstraintLayout>
First of all, you don't need to constraint all 4 constraints on every single view. You can connect views with only 2 constraints.
Onto your problem, constraint your editTexts to the TextViews that they should be right to.
I will paste the fixed code for your #+id/ageEditText and #+id/dollarEditText
<EditText
android:id="#+id/ageEditText"
android:layout_width="94dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#+id/ageTextView"
app:layout_constraintTop_toTopOf="#+id/ageTextView" />
<EditText
android:id="#+id/dollarEditText"
android:layout_width="64dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#+id/dollarTextView"
app:layout_constraintTop_toTopOf="#+id/dollarTextView" />
I copied your layout to android studio just to see what you were getting. You're having this issue because your views aren't aligned to one another yet you try to constrain them as using different references, so they end up moving independently. My advice to you is to organise the views that belong in the same line in layouts of their own and then constraint those layouts instead. You'll end up with the parent constraint layout that includes many embedded child layouts.
For example, add your 4 views for age and dollar value in one constraint layout like so:
<android.support.constraint.ConstraintLayout
android:id="#+id/your_layout_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<TextView
android:id="#+id/ageTextView"
android:layout_width="37dp"
android:layout_height="24dp"
android:text="Age"
android:textAlignment="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/ageEditText"
/>
<TextView
android:id="#+id/dollarTextView"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:text="Dollar Value"
android:textAlignment="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/ageEditText"
app:layout_constraintEnd_toStartOf="#id/dollarEditText"
/>
<EditText
android:id="#+id/dollarEditText"
android:layout_width="64dp"
android:layout_height="25dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/dollarTextView"
app:layout_constraintEnd_toEndOf="parent"
/>
<EditText
android:id="#+id/ageEditText"
android:layout_width="94dp"
android:layout_height="25dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/ageTextView"
app:layout_constraintEnd_toStartOf="#id/dollarTextView"
/>
</android.support.constraint.ConstraintLayout>
You see how I added the padding to the parent and not the individual views. Since the parent is set to wrap around the children, and the children are set to expand to fit the parent, you end up with a clear layout where 4 views are perfectly aligned horizontally. Now do the same for every line in your screen that includes multiple views and add the constraints between those layouts instead of doing it for every view independently. You'll end up with a file that has the following structure:
<android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout1 constraint start, end and top to parent-->
<!--constraint bottom to top of layout 2 below-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout2 constraint start and end to parent-->
<!--constraint top to bottom of layout 1 and bottom to top of layout 3 below-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout3 constraint start and end to parent-->
<!--constraint top to bottom of layout 2 and bottom to top of layout 4 below-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout3 constraint start, end and bottom to parent-->
<!--constraint top to bottom of layout 3 above-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

layout for different devices - constraintlayout and smallest width qualifier

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

Using Constraint Layout for Custom views

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"

ldrtl-xlarge layout doesn't get really xlarge

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.

View is not visible in Constraint layout

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"

Categories

Resources