I'm implementing a login screen while implementing it in the Android Studio the deigning seems fine, but after building the app to emulator and mobile it seems weird, like the elements are misplaced, stretched and compressed. I'm using the drawable element in different sizes because I want this app to support multiple resolution devices.
Below image is from XML designing preview
Below image is a screenshot of emulator
Below image is from Android device
here is the xml design [link][4]
What I'm doing here wrong, any suggestions would be helpful
[4]: https://pastebin.com/d9MPen7c
The issue is you have not set the constraints properly. That is why it looks worse on the real devices.
Here is the XML code:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tv_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="100dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:text="User Name"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/et_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_UserName" />
<TextView
android:id="#+id/tv_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:text="Password"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/et_UserName" />
<EditText
android:id="#+id/et_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPassword"
app:layout_constraintBottom_toTopOf="#id/iv_google_bt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_Password" />
<ImageView
android:id="#+id/iv_google_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_Password" />
<ImageView
android:id="#+id/iv_fb_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:layout_toStartOf="#+id/iv_google_bt"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_Password" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/iv_getstarted_login"
android:layout_width="0dp"
android:layout_height="75dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toBottomOf="#id/constraintLayout">
</ImageView>
<ImageView
android:id="#+id/imageView"
android:layout_width="176dp"
android:layout_height="172dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="#+id/constraintLayout" />
<TextView
android:id="#+id/login_signup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_getstarted_login" />
<TextView
android:id="#+id/notamem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_signup" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have placed my resources like dimen, String and drawable. So, Please change you resources with mine.
Here is my sample code for your problem. Adjust the given static value like drawable value in this code by using your own drawable resources. Hope i help you in little way
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EBEBEB">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="#+id/view"
android:layout_width="300dp"
android:layout_height="350dp"
android:layout_centerInParent="true"
android:background="#drawable/rectangle_round_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" >
</View>
<ImageView
android:id="#+id/img"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginBottom="-45dp"
android:background="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#id/view" />
<TextView
android:id="#+id/txtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/img"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="70dp"
android:text="Username/Email" />
<EditText
android:id="#+id/et_UserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtUsername"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="#+id/txtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/et_UserName"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="10dp"
android:text="Password" />
<EditText
android:id="#+id/et_Password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtPassword"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<ImageButton
android:id="#+id/imgleft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#id/view"
android:layout_alignBottom="#id/view"
android:layout_marginBottom="40dp"
android:layout_marginLeft="36dp"
android:background="#drawable/emoji"
android:layout_alignLeft="#id/view" />
<ImageButton
android:id="#+id/imgright"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#id/view"
android:layout_alignBottom="#id/view"
android:layout_marginBottom="40dp"
android:layout_marginRight="36dp"
android:background="#drawable/emoji"
android:layout_alignRight="#id/view" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rectangle_round"
android:layout_below="#+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginTop="-25dp"
android:text="Get Started"
android:textAlignment="center"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:textAllCaps="false"
app:layout_constraintBottom_toTopOf="#id/view"/>
<TextView
android:id="#+id/txtNotAMemberYet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginTop="87dp"
android:text="Not a member yet"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/view"
app:layout_constraintBottom_toTopOf="#id/txtSignUp"
/>
<TextView
android:id="#+id/txtSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtNotAMemberYet"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Sign Up"
android:textColor="#00BCD4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</RelativeLayout>
Related
I want functionality like Facebook like when we create any post with an image on it only they push one bar on top of the image, not the entire layout. In my case, I am using NestedScrollView as a parent with child ConstraintLayout and the bar is designed in Linear layout.
This is my app:
I want something like this:
This is my XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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/white"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.03" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.97" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/select_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/dimen_15dp"
android:clickable="true"
android:clipChildren="false"
android:focusable="true"
android:foreground="#drawable/ripple"
android:paddingTop="#dimen/dimen_5dp"
android:paddingEnd="#dimen/dimen_5dp"
android:paddingBottom="#dimen/dimen_5dp"
android:src="#drawable/left_arrow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.00"
app:layout_constraintStart_toStartOf="#id/guideline1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.00" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/back_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginTop="#dimen/dimen_15dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/opensans_bold"
android:paddingTop="#dimen/dimen_5dp"
android:paddingEnd="#dimen/dimen_5dp"
android:paddingBottom="#dimen/dimen_5dp"
android:text="#string/new_post"
android:textColor="#color/colorPrimaryDark"
android:textSize="#dimen/dimen_16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/select_back"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.00" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/postTextview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/dimen_15dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/roboto_regular"
android:foreground="?android:selectableItemBackground"
android:paddingStart="#dimen/dimen_5dp"
android:paddingTop="#dimen/dimen_5dp"
android:paddingBottom="#dimen/dimen_5dp"
android:text="#string/post"
android:textColor="#color/colorPrimaryDark"
android:textSize="#dimen/dimen_16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/back_title"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.00" />
<View
android:id="#+id/line"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginTop="12dp"
android:background="#color/grey_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/select_back"
app:layout_constraintVertical_bias="0.0" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:src="#drawable/rock"
app:civ_border_color="#color/white"
app:civ_border_width="2dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dimen_10dp"
android:layout_marginTop="20dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/opensans_bold"
android:text="Dwayne johnson"
android:textColor="#color/textview_black"
android:textSize="#dimen/dimen_14sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/profile_image"
app:layout_constraintTop_toBottomOf="#+id/line" />
<com.skyfishjy.library.RippleBackground
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line"
app:rb_color="#29B6F6"
app:rb_duration="2000"
app:rb_radius="5dp"
app:rb_rippleAmount="3"
app:rb_scale="4">
<ImageView
android:id="#+id/world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="TODO"
android:padding="10dp"
android:src="#drawable/world" />
</com.skyfishjy.library.RippleBackground>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/down_arrow"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginTop="16dp"
android:foreground="?attr/selectableItemBackground"
android:padding="10dp"
android:src="#drawable/ic_arrow_down_sign_to_navigate"
app:layout_constraintStart_toEndOf="#+id/content"
app:layout_constraintTop_toBottomOf="#+id/line" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_below="#+id/rel"
android:layout_marginTop="8dp"
android:background="#DCDCDC"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profile_image" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/category1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="#drawable/button_background"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:foreground="?android:selectableItemBackground"
android:padding="5dp"
android:text="#string/personal"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:textAllCaps="false" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/category2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="#drawable/post_btn_bg"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:foreground="?android:selectableItemBackground"
android:padding="5dp"
android:text="#string/awareness"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintStart_toEndOf="#+id/category1"
app:layout_constraintTop_toBottomOf="#+id/view"
app:textAllCaps="false" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/category3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="#drawable/post_btn_bg"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:foreground="?android:selectableItemBackground"
android:padding="5dp"
android:text="#string/scheme"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintStart_toEndOf="#+id/category2"
app:layout_constraintTop_toBottomOf="#+id/view"
app:textAllCaps="false" />
<View
android:id="#+id/line1"
android:layout_width="match_parent"
android:layout_height="0.4dp"
android:layout_marginTop="8dp"
android:background="#color/grey_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/category3" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/write_post"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_100dp"
android:layout_below="#+id/line1"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/post_edit_text_bg"
android:fontFamily="#font/roboto_regular"
android:gravity="start"
android:hint="What's on your mind..."
android:inputType="textMultiLine"
android:textColor="#color/textview_black"
android:textColorHint="#color/grey2_text"
android:textCursorDrawable="#drawable/cursor_color"
android:textSize="#dimen/dimen_16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line1" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/timelineImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone"
android:layout_marginBottom="#dimen/dimen_20dp"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/write_post">
</androidx.appcompat.widget.AppCompatImageView>
<VideoView
android:id="#+id/timelineVideo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
android:layout_marginBottom="#dimen/dimen_20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/write_post"
app:layout_constraintVertical_bias="0.072">
</VideoView>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:background="#drawable/item_bg"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:foreground="?android:selectableItemBackground"
android:padding="10dp"
android:src="#drawable/ic_camera" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foreground="?android:selectableItemBackground"
android:padding="10dp"
android:src="#drawable/gallery" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Tried everything in the manifest
android:windowSoftInputMode="adjustPan"
android:windowSoftInputMode="adjustResize"
android:windowSoftInputMode="adjustNothing"
but nothing worked. All are pushing my entire layout up.
I think this is because, you are using NestedScrollView as parent check by replacing NestedScrollView with any other layout
add This in your meniFest file beside your activity tag
android:windowSoftInputMode="adjustResize"
and,put scrollView as a parent layout in your xml file
I have this activity with a Constraint Layout:
And here is the XML :
<?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"
android:background="#color/colorPrimary"
android:orientation="vertical"
tools:context=".Activity">
<TextView
android:id="#+id/textView4"
android:layout_width="290dp"
android:layout_height="35dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="290dp"
android:layout_height="33dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<SeekBar
android:id="#+id/slider"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="383dp"
android:layout_height="79dp"
android:layout_marginTop="8dp"
android:hapticFeedbackEnabled="true"
android:indeterminate="false"
android:max="1200"
android:progress="0"
android:scrollbarSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:tickMark="#color/colorAccent" />
<TextView
android:id="#+id/textView"
android:layout_width="197dp"
android:layout_height="80dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="50sp"
android:typeface="normal"
app:fontFamily="sans-serif"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView2"
android:layout_width="290dp"
android:layout_height="33dp"
android:layout_marginTop="24dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Text"
android:layout_width="231dp"
android:layout_height="67dp"
android:layout_marginTop="4dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slider" />
<TextView
android:id="#+id/total"
android:layout_width="270dp"
android:layout_height="94dp"
android:layout_marginTop="8dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/comisionText" />
<Button
android:id="#+id/btn"
android:layout_width="142dp"
android:layout_height="45dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/submitBtn"
app:layout_constraintVertical_bias="0.678" />
<Button
android:id="#+id/submitBtn"
android:layout_width="181dp"
android:layout_height="71dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="4dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/but" />
<EditText
android:id="#+id/but"
android:layout_width="217dp"
android:layout_height="45dp"
android:layout_marginTop="16dp"
android:clickable="false"
android:ems="10"
android:enabled="false"
android:gravity="center_horizontal"
android:inputType="number"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/total" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that when i try it on a smaller screen phone, it cuts off some of the objects from the bottom of the activity. How can i make it resizable so it can fit any screen size? Every object is constrained Top-To-Bottom of the object above it.
You can use ScrollView, so the user can scroll down and see the whole activity. Just wrapping your ConstraintLayout in ScrollView should be enough, like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
android:orientation="vertical"
tools:context=".Activity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="vertical"
tools:context=".Activity">
<TextView
android:id="#+id/textView4"
android:layout_width="290dp"
android:layout_height="35dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="290dp"
android:layout_height="33dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<SeekBar
android:id="#+id/slider"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="383dp"
android:layout_height="79dp"
android:layout_marginTop="8dp"
android:hapticFeedbackEnabled="true"
android:indeterminate="false"
android:max="1200"
android:progress="0"
android:scrollbarSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:tickMark="#color/colorAccent" />
<TextView
android:id="#+id/textView"
android:layout_width="197dp"
android:layout_height="80dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="50sp"
android:typeface="normal"
app:fontFamily="sans-serif"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView2"
android:layout_width="290dp"
android:layout_height="33dp"
android:layout_marginTop="24dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Text"
android:layout_width="231dp"
android:layout_height="67dp"
android:layout_marginTop="4dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slider" />
<TextView
android:id="#+id/total"
android:layout_width="270dp"
android:layout_height="94dp"
android:layout_marginTop="8dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Text" />
<Button
android:id="#+id/btn"
android:layout_width="142dp"
android:layout_height="45dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/submitBtn"
app:layout_constraintVertical_bias="0.678" />
<Button
android:id="#+id/submitBtn"
android:layout_width="181dp"
android:layout_height="71dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="4dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/but" />
<EditText
android:id="#+id/but"
android:layout_width="217dp"
android:layout_height="45dp"
android:layout_marginTop="16dp"
android:clickable="false"
android:ems="10"
android:enabled="false"
android:gravity="center_horizontal"
android:inputType="number"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/total"
android:importantForAutofill="no" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Anyways, you should use wrap_content and match_parent instead of hard-coded sizes. Your layout needs to be flexible and adapt to different screen sizes, and that's not possible if you're using determined sizes in your layout. Please take a look into Android Developer: Support different screen sizes
This is my xml file. i am new to android development. I need to know how can i modified this layout into responsive for multiple screen sizes of the phones? I have created directories as layout-normal, layout-large, layout-xlarge. but it is not working properly. I used sp for textviews and dp for other widgets. That is also not working. Please help me to modify this xml code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/background"
tools:context="com.respectcab.app.MainActivity"
tools:openDrawer="start"
tools:ignore="MissingDefaultResource">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/design_default_color_primary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/AlertDialog.AppCompat.Light" />
<android.support.constraint.ConstraintLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
tools:ignore="ExtraText"><![CDATA[
tools:context=".MainActivity">
]]>
<Button
android:id="#+id/driver"
android:layout_width="145dp"
android:layout_height="58dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:layout_toEndOf="#+id/logout"
android:layout_toRightOf="#+id/logout"
android:text="Start Trip"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/logout"
app:layout_constraintTop_toBottomOf="#+id/cus_mobile"
app:layout_constraintVertical_bias="1.0"
tools:ignore="MissingConstraints" />
<Button
android:id="#+id/logout"
android:layout_width="145dp"
android:layout_height="58dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="8dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cus_mobile"
app:layout_constraintVertical_bias="1.0"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/driver_id_main"
android:layout_width="91sp"
android:layout_height="55sp"
android:layout_below="#+id/driver_mobile"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginStart="33sp"
android:layout_marginLeft="33sp"
android:layout_marginTop="231sp"
android:layout_marginBottom="461sp"
android:text="TextView"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/cus_email"
app:layout_constraintEnd_toStartOf="#+id/driver_total_earn"
app:layout_constraintHorizontal_bias="0.44"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/driver_mobile"
app:layout_constraintVertical_bias="0.765"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/driver_total_earn"
android:layout_width="65sp"
android:layout_height="44sp"
android:layout_below="#+id/driver_mobile"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginStart="65sp"
android:layout_marginLeft="65sp"
android:layout_marginBottom="461sp"
android:layout_toEndOf="#+id/driver_id_main"
android:layout_toRightOf="#+id/driver_id_main"
android:text="TextView"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/cus_email"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
<EditText
android:id="#+id/cus_mobile"
android:layout_width="398dp"
android:layout_height="53dp"
android:layout_below="#+id/cus_email"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:hint="Customer Mobile No"
android:text=""
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cus_email"
tools:ignore="MissingConstraints" />
<EditText
android:id="#+id/cus_email"
android:layout_width="404dp"
android:layout_height="69dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="108dp"
android:hint="Customer Email"
android:text=""
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner_package"
tools:ignore="MissingConstraints" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="128dp"
android:layout_height="91dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginStart="115dp"
android:layout_marginLeft="115dp"
android:layout_marginEnd="130dp"
android:layout_marginRight="130dp"
android:src="#mipmap/ic_user_profile"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.407"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/driver_name"
android:layout_width="312sp"
android:layout_height="50sp"
android:layout_below="#+id/imageView3"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:gravity="center_horizontal"
android:text="TextView"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/driver_mobile"
android:layout_width="177sp"
android:layout_height="33sp"
android:layout_below="#+id/driver_name"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginStart="124sp"
android:layout_marginLeft="124sp"
android:layout_marginTop="12sp"
android:layout_marginEnd="147sp"
android:layout_marginRight="147sp"
android:gravity="center_horizontal"
android:text="TextView"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.492"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/driver_name" />
<Switch
android:id="#+id/switch1"
android:layout_width="43dp"
android:layout_height="22dp"
android:layout_below="#+id/driver_mobile"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:scaleX="2.5"
android:scaleY="2.5"
android:textOff="Turn On"
android:textOn="Turn Off"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.472"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/driver_mobile"
tools:ignore="MissingConstraints" />
<Button
android:id="#+id/button1"
android:layout_width="68dp"
android:layout_height="42dp"
android:layout_alignTop="#+id/textView1"
android:layout_centerHorizontal="true"
android:text="Click Here to Enable Disable GPS location service!"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.958"
app:layout_constraintStart_toEndOf="#+id/textView1"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/textView1"
android:layout_width="248sp"
android:layout_height="37sp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="location service Stauts Shows Here"
android:textAppearance="?android:attr/textAppearanceLarge"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="326dp"
tools:layout_editor_absoluteY="142dp"
android:visibility="invisible"/>
<!--<android.support.v7.widget.RecyclerView-->
<!--android:id="#+id/vehicle_list_name"-->
<!--android:layout_width="636dp"-->
<!--android:layout_height="218dp"-->
<!--android:layout_alignParentStart="true"-->
<!--android:layout_alignParentLeft="true"-->
<!--android:layout_alignParentEnd="true"-->
<!--android:layout_alignParentRight="true"-->
<!--android:layout_alignParentBottom="true"-->
<!--tools:ignore="MissingConstraints"-->
<!--tools:layout_editor_absoluteX="-35dp"-->
<!--tools:layout_editor_absoluteY="26dp"-->
<!--tools:listitem="#layout/recycler_view_item" />-->
<Spinner
android:id="#+id/spinner_package"
android:layout_width="307dp"
android:layout_height="13dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.636"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/switch1" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/nav_view"
app:headerLayout="#layout/nav_header_main2"
app:menu="#menu/drawer_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
use this library for layout so all size screen might be cover with one layout:) - implementation 'com.intuit.sdp:sdp-android:1.0.6'
link
I am currently trying to convert my constraint layout to relative layout, but not sure how to deal with "app:" parameters which refer to constraints top of, bottom of etc. Here's my code for clarification:
<?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:id="#+id/myFragmentConstaintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/activeSpeakerContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/groupList"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/myStatusContainer">
<FrameLayout
android:id="#+id/activeSpeakerVideo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black" />
<ImageView
android:id="#+id/activeSpeakerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="48dp"
android:background="#color/black"
android:src="#drawable/my_default_profile" />
<TextView
android:id="#+id/myParticipantCountText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:ellipsize="end"
android:lines="1"
android:background="#drawable/rounded_rect"
android:layout_marginStart="18dp"
android:layout_marginTop="18dp"
android:drawablePadding="2dip"
android:paddingLeft="10dip"
android:textColor="#color/gray6"
android:textSize="16sp"
android:textStyle="bold"
android:drawableLeft="#drawable/drawable_user_count_icon"
android:drawableStart="#drawable/drawable_user_count_icon"/>
<ImageView
android:id="#+id/image_mark"
android:layout_width="130dp"
android:layout_height="28dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="36dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:src="#drawable/image_mark_blue" />
<TextView
android:id="#+id/activeSpeakerName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#AA555555"
android:ellipsize="end"
android:gravity="center_horizontal|bottom"
android:lines="1"
android:textColor="#color/gray6"
android:textSize="16sp"
tools:text="user#gmail.com" />
<TextView
android:id="#+id/DurationText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:gravity="start|bottom"
android:lines="1"
android:textColor="#color/gray6"
android:textSize="14sp"
tools:text="03:16" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/screenShareContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginStart="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/myStatusContainer"
app:layout_constraintBottom_toTopOf="#+id/myButtonContainer">
<PinchandZoomLayout
android:id="#+id/screenShareVideo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"/>
<ImageButton
android:id="#+id/screenShareToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="36dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_video_cam_switch" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/myStatusContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#AA555555"
android:padding="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/myNameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/gray6"
android:textSize="14sp"
tools:text="user2#gmail.com" />
<ImageButton
android:id="#+id/myButtonVideoRotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#android:color/transparent"
android:src="#drawable/ic_video_cam_switch" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/groupList"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/myButtonContainer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/activeSpeakerContainer">
</android.support.v7.widget.RecyclerView>
<RelativeLayout
android:id="#+id/myProgressContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/groupList"
app:layout_constraintLeft_toLeftOf="#+id/groupList"
app:layout_constraintRight_toRightOf="#+id/groupList"
app:layout_constraintTop_toTopOf="#+id/groupList">
<TextView
android:id="#+id/myProgressName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:textColor="#color/gray6"
android:textSize="20sp"
tools:text="My Name" />
<TextView
android:id="#+id/myProgressText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/myProgressName"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:text="#string/my_status_connecting"
android:textColor="#color/gray6"
android:textSize="16sp" />
</RelativeLayout>
<include
android:id="#+id/myButtonContainer"
layout="#layout/layout_my_button_bar_1_row"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/myButtonContainerUnavailable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/myButtonContainer"
app:layout_constraintLeft_toLeftOf="#+id/myButtonContainer"
app:layout_constraintRight_toRightOf="#+id/myButtonContainer"
app:layout_constraintTop_toTopOf="#+id/myButtonContainer"
tools:visibility="visible">
<Button
android:id="#+id/myButtonCancel"
style="#style/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_my_end"
android:text="#string/dialog_button_cancel"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/myButtonRetry"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/myButtonRetry"
style="#style/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_my_retry"
android:text="#string/button_try_again"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/myButtonCancel"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
I just tried replacing "android.support.constraint.ConstraintLayout" with relative layout but there's these parameters " app:layout_constraint..." which are more difficult to deal with.Any easier way to go around this?
Thanks in advance.
I am using Android Studio version 3.1.2
No need to do that much complex stuff.Just right click on
layout name in component tree as shown in image and select option convert view and choose the layout which you want to use.
I am using chained view in constraint layout. Now I want the intermediate space between two text views to be removed.As the buttons at the bottom are at distance. I am trying to move them from design layout but its not happening as well. How to do it.Following is my 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"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="23dp"
android:layout_marginStart="32dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintStart_toEndOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="26dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/linearLayout2">-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="16dp"
android:layout_marginTop="70dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="32dp"
android:layout_marginTop="26dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<!-- </LinearLayout>-->
<!-- <LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/linearLayout"
>-->
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:layout_marginBottom="58dp"
android:layout_marginEnd="213dp"
android:layout_marginTop="58dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/textViewHeader" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="67dp"
android:layout_marginStart="90dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="63dp"
android:layout_marginEnd="89dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4" />
<!-- </LinearLayout>-->
</android.support.constraint.ConstraintLayout>
At the bottom there are two text views,placed horizontally and there is space between them. Thanks much :)
To remove space between two chained view, simply add the following line to the first item in the chain:
app:layout_constraintHorizontal_chainStyle="packed"
To read more about chain styles:
Official Android documentation
Medium article
You have to add Guideline
<?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_absoluteY="81dp">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="23dp"
android:layout_marginStart="32dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintStart_toEndOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="26dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/linearLayout2">-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="16dp"
android:layout_marginTop="70dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="32dp"
android:layout_marginTop="26dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<!-- </LinearLayout>-->
<!-- <LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/linearLayout"
>-->
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:layout_marginBottom="58dp"
android:layout_marginEnd="213dp"
android:layout_marginTop="58dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/textViewHeader" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="67dp"
android:gravity="center"
app:layout_constraintEnd_toStartOf="#+id/guideline1"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="63dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline1" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline1"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
<!-- </LinearLayout>-->
</android.support.constraint.ConstraintLayout>
About Guideline in ConstraintLayout:
Utility class representing a Guideline helper object for ConstraintLayout. Helper objects are not displayed on device (they are marked as View.GONE) and are only used for layout purposes. They only work within a ConstraintLayout. [...]
For more details, there is good documentation:
https://developer.android.com/reference/android/support/constraint/Guideline.html