How to center 2 edit texts and a button below horizontally





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















I want to achieve the following look for a login activity, but it looks quite different on different devices I'm testing.



center



Edit: This is the current code:



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/grey_100"

    android:orientation="vertical"

    android:weightSum="4">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="3"

        android:gravity="center_horizontal"

        android:orientation="vertical">



        <ImageView

            android:id="@+id/icon"



            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/icon"

            android:src="@drawable/icon" />



        <EditText

            android:id="@+id/emailField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <EditText

            android:id="@+id/passwordField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <Button

            android:id="@+id/loginButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />



    </LinearLayout>





</LinearLayout>


As you can see on the design tab it looks ok, but I can't move it up or down, and on different devices it's not exactly centered:
Current layout






android







share|improve this question

























  • How does it look on your devices? What code are you using? Show us to help you

    – Ivan
    Nov 26 '18 at 16:57











  • I added the coed and image of the code, I can't move it up or down as I wish, it's stuck up there

    – Stackpile
    Nov 26 '18 at 17:04


















0















I want to achieve the following look for a login activity, but it looks quite different on different devices I'm testing.



center



Edit: This is the current code:



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/grey_100"

    android:orientation="vertical"

    android:weightSum="4">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="3"

        android:gravity="center_horizontal"

        android:orientation="vertical">



        <ImageView

            android:id="@+id/icon"



            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/icon"

            android:src="@drawable/icon" />



        <EditText

            android:id="@+id/emailField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <EditText

            android:id="@+id/passwordField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <Button

            android:id="@+id/loginButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />



    </LinearLayout>





</LinearLayout>


As you can see on the design tab it looks ok, but I can't move it up or down, and on different devices it's not exactly centered:
Current layout






android







share|improve this question

























  • How does it look on your devices? What code are you using? Show us to help you

    – Ivan
    Nov 26 '18 at 16:57











  • I added the coed and image of the code, I can't move it up or down as I wish, it's stuck up there

    – Stackpile
    Nov 26 '18 at 17:04














0












0








0








I want to achieve the following look for a login activity, but it looks quite different on different devices I'm testing.



center



Edit: This is the current code:



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/grey_100"

    android:orientation="vertical"

    android:weightSum="4">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="3"

        android:gravity="center_horizontal"

        android:orientation="vertical">



        <ImageView

            android:id="@+id/icon"



            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/icon"

            android:src="@drawable/icon" />



        <EditText

            android:id="@+id/emailField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <EditText

            android:id="@+id/passwordField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <Button

            android:id="@+id/loginButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />



    </LinearLayout>





</LinearLayout>


As you can see on the design tab it looks ok, but I can't move it up or down, and on different devices it's not exactly centered:
Current layout






android







share|improve this question
















I want to achieve the following look for a login activity, but it looks quite different on different devices I'm testing.



center



Edit: This is the current code:



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/grey_100"

    android:orientation="vertical"

    android:weightSum="4">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="3"

        android:gravity="center_horizontal"

        android:orientation="vertical">



        <ImageView

            android:id="@+id/icon"



            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/icon"

            android:src="@drawable/icon" />



        <EditText

            android:id="@+id/emailField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <EditText

            android:id="@+id/passwordField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <Button

            android:id="@+id/loginButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />



    </LinearLayout>





</LinearLayout>


As you can see on the design tab it looks ok, but I can't move it up or down, and on different devices it's not exactly centered:
Current layout






android




android






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 17:04







Stackpile

















asked Nov 26 '18 at 16:54









StackpileStackpile

647




647













  • How does it look on your devices? What code are you using? Show us to help you

    – Ivan
    Nov 26 '18 at 16:57











  • I added the coed and image of the code, I can't move it up or down as I wish, it's stuck up there

    – Stackpile
    Nov 26 '18 at 17:04



















  • How does it look on your devices? What code are you using? Show us to help you

    – Ivan
    Nov 26 '18 at 16:57











  • I added the coed and image of the code, I can't move it up or down as I wish, it's stuck up there

    – Stackpile
    Nov 26 '18 at 17:04

















How does it look on your devices? What code are you using? Show us to help you

– Ivan
Nov 26 '18 at 16:57





How does it look on your devices? What code are you using? Show us to help you

– Ivan
Nov 26 '18 at 16:57













I added the coed and image of the code, I can't move it up or down as I wish, it's stuck up there

– Stackpile
Nov 26 '18 at 17:04





I added the coed and image of the code, I can't move it up or down as I wish, it's stuck up there

– Stackpile
Nov 26 '18 at 17:04












2 Answers
2






active

oldest

votes


















2














add the views in a constraint layout and add a horizontal guideline at the percentage of the screen that you want your views to begin. Then just constrain your views underneath that, one after the other, and constrain their sides to match the parent: 



<android.support.constraint.ConstraintLayout

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="3"

    android:gravity="center_horizontal"

    android:orientation="vertical">



    <ImageView

        android:id="@+id/icon"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:contentDescription="@string/icon"

        android:src="@drawable/icon"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="@+id/guideline2"

       />



    <EditText

        android:id="@+id/emailField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/icon"

         />



    <EditText

        android:id="@+id/passwordField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/emailField"

        />



    <Button

        android:id="@+id/loginButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:text="Button"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/passwordField"

      />



    <android.support.constraint.Guideline

        android:id="@+id/guideline2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        app:layout_constraintGuide_percent="0.5" />



</android.support.constraint.ConstraintLayout>





share|improve this answer


























  • This should be the approach. Its the right and most efficient way of doing it.

    – codeFood
    Nov 26 '18 at 20:43











  • from some reason when I copy paste it the view is blank (nothing appears in the design tab)

    – Stackpile
    Nov 26 '18 at 22:03













  • But the guideline you mentions talks aboust the percentage of height, I was talking about making the text views at width of 70% for example

    – Stackpile
    Nov 27 '18 at 9:13











  • sometimes you need to build the project first, before anything appears on the design tab. Also, the guidelines can be horizontal or vertical, just change the orientation attribute and adjust the percentage. If the line changes orientation though, the views that are constraint by it, will need to be adjusted as well

    – Nikos Hidalgo
    Nov 27 '18 at 9:38



















0














How about a RelativeLayout and android:layout_centerInParent="true"



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/grey_100">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center_horizontal"

        android:orientation="vertical"

        android:layout_centerInParent="true">



        <ImageView

            android:id="@+id/icon"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/icon"

            android:src="@drawable/icon" />



        <EditText

            android:id="@+id/emailField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <EditText

            android:id="@+id/passwordField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <Button

            android:id="@+id/loginButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />



    </LinearLayout>

</RelativeLayout>





share|improve this answer
























  • Is it possible to "play" with the width of the button and edit texts as percentage? for example if I want the width of the button and the edit texts to be 70 percent of the width, what can I do?

    – Stackpile
    Nov 26 '18 at 22:21












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53485728%2fhow-to-center-2-edit-texts-and-a-button-below-horizontally%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














add the views in a constraint layout and add a horizontal guideline at the percentage of the screen that you want your views to begin. Then just constrain your views underneath that, one after the other, and constrain their sides to match the parent: 



<android.support.constraint.ConstraintLayout

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="3"

    android:gravity="center_horizontal"

    android:orientation="vertical">



    <ImageView

        android:id="@+id/icon"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:contentDescription="@string/icon"

        android:src="@drawable/icon"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="@+id/guideline2"

       />



    <EditText

        android:id="@+id/emailField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/icon"

         />



    <EditText

        android:id="@+id/passwordField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/emailField"

        />



    <Button

        android:id="@+id/loginButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:text="Button"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/passwordField"

      />



    <android.support.constraint.Guideline

        android:id="@+id/guideline2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        app:layout_constraintGuide_percent="0.5" />



</android.support.constraint.ConstraintLayout>





share|improve this answer


























  • This should be the approach. Its the right and most efficient way of doing it.

    – codeFood
    Nov 26 '18 at 20:43











  • from some reason when I copy paste it the view is blank (nothing appears in the design tab)

    – Stackpile
    Nov 26 '18 at 22:03













  • But the guideline you mentions talks aboust the percentage of height, I was talking about making the text views at width of 70% for example

    – Stackpile
    Nov 27 '18 at 9:13











  • sometimes you need to build the project first, before anything appears on the design tab. Also, the guidelines can be horizontal or vertical, just change the orientation attribute and adjust the percentage. If the line changes orientation though, the views that are constraint by it, will need to be adjusted as well

    – Nikos Hidalgo
    Nov 27 '18 at 9:38
















2














add the views in a constraint layout and add a horizontal guideline at the percentage of the screen that you want your views to begin. Then just constrain your views underneath that, one after the other, and constrain their sides to match the parent: 



<android.support.constraint.ConstraintLayout

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="3"

    android:gravity="center_horizontal"

    android:orientation="vertical">



    <ImageView

        android:id="@+id/icon"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:contentDescription="@string/icon"

        android:src="@drawable/icon"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="@+id/guideline2"

       />



    <EditText

        android:id="@+id/emailField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/icon"

         />



    <EditText

        android:id="@+id/passwordField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/emailField"

        />



    <Button

        android:id="@+id/loginButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:text="Button"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/passwordField"

      />



    <android.support.constraint.Guideline

        android:id="@+id/guideline2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        app:layout_constraintGuide_percent="0.5" />



</android.support.constraint.ConstraintLayout>





share|improve this answer


























  • This should be the approach. Its the right and most efficient way of doing it.

    – codeFood
    Nov 26 '18 at 20:43











  • from some reason when I copy paste it the view is blank (nothing appears in the design tab)

    – Stackpile
    Nov 26 '18 at 22:03













  • But the guideline you mentions talks aboust the percentage of height, I was talking about making the text views at width of 70% for example

    – Stackpile
    Nov 27 '18 at 9:13











  • sometimes you need to build the project first, before anything appears on the design tab. Also, the guidelines can be horizontal or vertical, just change the orientation attribute and adjust the percentage. If the line changes orientation though, the views that are constraint by it, will need to be adjusted as well

    – Nikos Hidalgo
    Nov 27 '18 at 9:38














2












2








2







add the views in a constraint layout and add a horizontal guideline at the percentage of the screen that you want your views to begin. Then just constrain your views underneath that, one after the other, and constrain their sides to match the parent: 



<android.support.constraint.ConstraintLayout

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="3"

    android:gravity="center_horizontal"

    android:orientation="vertical">



    <ImageView

        android:id="@+id/icon"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:contentDescription="@string/icon"

        android:src="@drawable/icon"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="@+id/guideline2"

       />



    <EditText

        android:id="@+id/emailField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/icon"

         />



    <EditText

        android:id="@+id/passwordField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/emailField"

        />



    <Button

        android:id="@+id/loginButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:text="Button"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/passwordField"

      />



    <android.support.constraint.Guideline

        android:id="@+id/guideline2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        app:layout_constraintGuide_percent="0.5" />



</android.support.constraint.ConstraintLayout>





share|improve this answer















add the views in a constraint layout and add a horizontal guideline at the percentage of the screen that you want your views to begin. Then just constrain your views underneath that, one after the other, and constrain their sides to match the parent: 



<android.support.constraint.ConstraintLayout

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="3"

    android:gravity="center_horizontal"

    android:orientation="vertical">



    <ImageView

        android:id="@+id/icon"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:contentDescription="@string/icon"

        android:src="@drawable/icon"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="@+id/guideline2"

       />



    <EditText

        android:id="@+id/emailField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/icon"

         />



    <EditText

        android:id="@+id/passwordField"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:ems="10"

        android:inputType="textPersonName"

        android:text="Name"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/emailField"

        />



    <Button

        android:id="@+id/loginButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:text="Button"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/passwordField"

      />



    <android.support.constraint.Guideline

        android:id="@+id/guideline2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        app:layout_constraintGuide_percent="0.5" />



</android.support.constraint.ConstraintLayout>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 26 '18 at 17:29

























answered Nov 26 '18 at 17:14









Nikos HidalgoNikos Hidalgo

1,3132418




1,3132418













  • This should be the approach. Its the right and most efficient way of doing it.

    – codeFood
    Nov 26 '18 at 20:43











  • from some reason when I copy paste it the view is blank (nothing appears in the design tab)

    – Stackpile
    Nov 26 '18 at 22:03













  • But the guideline you mentions talks aboust the percentage of height, I was talking about making the text views at width of 70% for example

    – Stackpile
    Nov 27 '18 at 9:13











  • sometimes you need to build the project first, before anything appears on the design tab. Also, the guidelines can be horizontal or vertical, just change the orientation attribute and adjust the percentage. If the line changes orientation though, the views that are constraint by it, will need to be adjusted as well

    – Nikos Hidalgo
    Nov 27 '18 at 9:38



















  • This should be the approach. Its the right and most efficient way of doing it.

    – codeFood
    Nov 26 '18 at 20:43











  • from some reason when I copy paste it the view is blank (nothing appears in the design tab)

    – Stackpile
    Nov 26 '18 at 22:03













  • But the guideline you mentions talks aboust the percentage of height, I was talking about making the text views at width of 70% for example

    – Stackpile
    Nov 27 '18 at 9:13











  • sometimes you need to build the project first, before anything appears on the design tab. Also, the guidelines can be horizontal or vertical, just change the orientation attribute and adjust the percentage. If the line changes orientation though, the views that are constraint by it, will need to be adjusted as well

    – Nikos Hidalgo
    Nov 27 '18 at 9:38

















This should be the approach. Its the right and most efficient way of doing it.

– codeFood
Nov 26 '18 at 20:43





This should be the approach. Its the right and most efficient way of doing it.

– codeFood
Nov 26 '18 at 20:43













from some reason when I copy paste it the view is blank (nothing appears in the design tab)

– Stackpile
Nov 26 '18 at 22:03







from some reason when I copy paste it the view is blank (nothing appears in the design tab)

– Stackpile
Nov 26 '18 at 22:03















But the guideline you mentions talks aboust the percentage of height, I was talking about making the text views at width of 70% for example

– Stackpile
Nov 27 '18 at 9:13





But the guideline you mentions talks aboust the percentage of height, I was talking about making the text views at width of 70% for example

– Stackpile
Nov 27 '18 at 9:13













sometimes you need to build the project first, before anything appears on the design tab. Also, the guidelines can be horizontal or vertical, just change the orientation attribute and adjust the percentage. If the line changes orientation though, the views that are constraint by it, will need to be adjusted as well

– Nikos Hidalgo
Nov 27 '18 at 9:38





sometimes you need to build the project first, before anything appears on the design tab. Also, the guidelines can be horizontal or vertical, just change the orientation attribute and adjust the percentage. If the line changes orientation though, the views that are constraint by it, will need to be adjusted as well

– Nikos Hidalgo
Nov 27 '18 at 9:38













0














How about a RelativeLayout and android:layout_centerInParent="true"



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/grey_100">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center_horizontal"

        android:orientation="vertical"

        android:layout_centerInParent="true">



        <ImageView

            android:id="@+id/icon"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/icon"

            android:src="@drawable/icon" />



        <EditText

            android:id="@+id/emailField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <EditText

            android:id="@+id/passwordField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <Button

            android:id="@+id/loginButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />



    </LinearLayout>

</RelativeLayout>





share|improve this answer
























  • Is it possible to "play" with the width of the button and edit texts as percentage? for example if I want the width of the button and the edit texts to be 70 percent of the width, what can I do?

    – Stackpile
    Nov 26 '18 at 22:21
















0














How about a RelativeLayout and android:layout_centerInParent="true"



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/grey_100">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center_horizontal"

        android:orientation="vertical"

        android:layout_centerInParent="true">



        <ImageView

            android:id="@+id/icon"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/icon"

            android:src="@drawable/icon" />



        <EditText

            android:id="@+id/emailField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <EditText

            android:id="@+id/passwordField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <Button

            android:id="@+id/loginButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />



    </LinearLayout>

</RelativeLayout>





share|improve this answer
























  • Is it possible to "play" with the width of the button and edit texts as percentage? for example if I want the width of the button and the edit texts to be 70 percent of the width, what can I do?

    – Stackpile
    Nov 26 '18 at 22:21














0












0








0







How about a RelativeLayout and android:layout_centerInParent="true"



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/grey_100">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center_horizontal"

        android:orientation="vertical"

        android:layout_centerInParent="true">



        <ImageView

            android:id="@+id/icon"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/icon"

            android:src="@drawable/icon" />



        <EditText

            android:id="@+id/emailField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <EditText

            android:id="@+id/passwordField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <Button

            android:id="@+id/loginButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />



    </LinearLayout>

</RelativeLayout>





share|improve this answer













How about a RelativeLayout and android:layout_centerInParent="true"



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/grey_100">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center_horizontal"

        android:orientation="vertical"

        android:layout_centerInParent="true">



        <ImageView

            android:id="@+id/icon"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/icon"

            android:src="@drawable/icon" />



        <EditText

            android:id="@+id/emailField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <EditText

            android:id="@+id/passwordField"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:ems="10"

            android:inputType="textPersonName"

            android:text="Name" />



        <Button

            android:id="@+id/loginButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Button" />



    </LinearLayout>

</RelativeLayout>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 26 '18 at 17:15









forpasforpas

19.9k4830




19.9k4830













  • Is it possible to "play" with the width of the button and edit texts as percentage? for example if I want the width of the button and the edit texts to be 70 percent of the width, what can I do?

    – Stackpile
    Nov 26 '18 at 22:21



















  • Is it possible to "play" with the width of the button and edit texts as percentage? for example if I want the width of the button and the edit texts to be 70 percent of the width, what can I do?

    – Stackpile
    Nov 26 '18 at 22:21

















Is it possible to "play" with the width of the button and edit texts as percentage? for example if I want the width of the button and the edit texts to be 70 percent of the width, what can I do?

– Stackpile
Nov 26 '18 at 22:21





Is it possible to "play" with the width of the button and edit texts as percentage? for example if I want the width of the button and the edit texts to be 70 percent of the width, what can I do?

– Stackpile
Nov 26 '18 at 22:21


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53485728%2fhow-to-center-2-edit-texts-and-a-button-below-horizontally%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Wiesbaden

Image
Wappen Deutschlandkarte 50.0825 8.24 117 Koordinaten: 50° 5′  N , 8° 14′  O Basisdaten Bundesland: Hessen Regierungsbezirk: Darmstadt Höhe: 117 m ü. NHN Fläche: 203,93 km 2 Einwohner: 278.654 (31. Dez. 2017) [1] Bevölkerungsdichte: 1366 Einwohner je km 2 Postleitzahlen: 65183–65207, 55246, 55252 Vorlage:Infobox Gemeinde in Deutschland/Wartung/PLZ enthält Text Vorwahlen: 0611, 06122, 06127, 06134 Kfz-Kennzeichen: WI Gemeindeschlüssel: 06 4 14 000 LOCODE: DE WIB NUTS: DE714 Stadtgliederung: 26 Ortsbezirke Adresse der Stadtverwaltung: Schlossplatz 6 65183 Wiesbaden Webpräsenz: www.wiesbaden.de Oberbürgermeister: Sven Gerich (SPD) Lage der Landeshauptstadt Wiesbaden in Hessen und im Regierungsbezirk Darmstadt Offizielles Logo der Landeshauptstadt Wiesbaden Flagge der Landeshauptstadt Wiesbaden Wiesbaden is
Read more

Marschland

Image
Kilometerweite Marsch in den Vier- und Marschlanden am Elbdeich Die Wedeler Marschlandschaft in Schleswig-Holstein Der Hadelner Kanal zur Entwässerung der Marsch Die tief gelegene Marsch und ein Entwässerungskanal Das Schöpfwerk Otterndorf im Land Hadeln zur Entwässerung der Medem verfügte damals bereits über die größte Kreiselpumpe Europas. Das Schöpfwerk in Neuhaus für die Aue und des Neuhaus-Bülkauer Kanals Als Marsch(land) (v. niederdt., altsächs. mersc ) – auch Masch , Mersch oder Schwemmland genannt – bezeichnet man eine nacheiszeitlich entstandene geomorphologische Landform im Gebiet der nordwestdeutschen Küsten und Flüsse sowie vergleichbare Landformen weltweit. Inhaltsverzeichnis 1 Landschaft 2 Entstehung 3 Marschböden 4 Nutzung 5 Marschgebiete in Deutschland 6 Siehe auch 7 Literatur 8 Weblinks 9 Einzelnachweise Landschaft | Marschen sind generell flache Landstriche ohne natürliche Erhebungen. Si
Read more

Dieringhausen

Image
Dieringhausen Stadt Gummersbach 50.982777777778 7.5316666666667 165 Koordinaten: 50° 58′ 58″  N , 7° 31′ 54″  O Höhe: 165  (160–245)  m Einwohner: 5055  (30. Jun. 2016) Postleitzahl: 51645 Vorwahl: 02261 Lage von Dieringhausen in Gummersbach Im Hohl ca. 1927–1930 Ansicht von Südwesten bei Bünghausen Dieringhausen (im örtlichen Dialekt Dierkesen ) ist ein Ortsteil von Gummersbach im Oberbergischen Kreis, Regierungsbezirk Köln, Nordrhein-Westfalen (Deutschland). Inhaltsverzeichnis 1 Geographie 2 Geschichte 3 Kultur 3.1 Sehenswürdigkeiten 3.2 Regelmäßige Veranstaltungen 4 Infrastruktur und Wirtschaft 4.1 Verkehr 4.1.1 Schienen- und Busverkehr 4.1.2 Straßen 4.2 Öffentliche Einrichtungen 4.2.1 Schulen und Bildungseinrichtungen 4.2.2 Kirchliche Einrichtungen 5 Persönlichkeiten 5.1 In Dieringhausen geboren 5.2 In Dieringhausen gelebt 6 Einzelnachweise 7
Read more