2017-07-14 8 views
0

Ich versuche, einen Rahmen um meine Android-Login-Box zu machen. Hier sind zwei Bilder, die erklärt, was ich habe und was ich suche:Rahmen um Login-Box

enter image description here enter image description here

Meine login.xml Datei:

<?xml version="1.0" encoding="utf-8"?> 
<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:fitsSystemWindows="true"> 

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <!-- Logo --> 
     <ImageView 
      android:id="@+id/imageViewLogo" 
      android:layout_width="wrap_content" 
      android:layout_height="72dp" 
      android:layout_gravity="center_horizontal" 
      android:layout_marginBottom="24dp" 
      android:layout_marginTop="24dp" 
      android:src="@drawable/logo" /> 
     <!-- //Logo --> 

     <!-- Login form --> 
     <TableLayout 
      android:id="@+id/tableLayoutFrame" 
      android:background="@color/colorGray" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_horizontal"> 
      <TableRow 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_horizontal"> 
       <TableLayout 
        android:id="@+id/tableLayoutLogin" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal"> 

        <!-- Email --> 
        <TableRow 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_marginLeft="12dp" 
         android:layout_marginRight="12dp" 
         android:layout_marginTop="12dp" 
         android:background="@color/colorWhite"> 

         <ImageView 
          android:id="@+id/imageViewEmail" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_marginEnd="6dp" 
          android:layout_marginTop="12dp" 
          android:src="@drawable/ic_mail_outline_black" /> 

         <EditText 
          android:id="@+id/editTextEmail" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_gravity="center_horizontal" 
          android:ems="10" 
          android:inputType="textEmailAddress" 
          android:text="@string/blank" /> 
        </TableRow> 
        <!-- // Email --> 

        <!-- Password --> 
        <TableRow 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_marginLeft="12dp" 
         android:layout_marginRight="12dp" 
         android:layout_marginTop="12dp" 
         android:background="@color/colorWhite"> 

         <ImageView 
          android:id="@+id/imageViewPassword" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_marginEnd="6dp" 
          android:layout_marginTop="12dp" 
          android:src="@drawable/ic_lock_black" /> 

         <EditText 
          android:id="@+id/editTextPassword" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_gravity="center_horizontal" 
          android:ems="10" 
          android:inputType="textWebPassword" /> 

        </TableRow> 
        <!-- //Password --> 

        <!-- Login button --> 
        <TableRow 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_marginLeft="12dp" 
         android:layout_marginRight="12dp" 
         android:layout_marginTop="8dp"> 

         <Button 
          android:id="@+id/buttonLogin" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_span="2" 
          android:background="@drawable/btn_primary" 
          android:text="@string/login" 
          android:textAllCaps="false" 
          android:textAppearance="?android:attr/textAppearanceMedium" 
          android:textColor="@color/colorWhite" /> 

        </TableRow> 
        <!-- //Login button --> 

        <!-- Forgot password --> 
        <TableRow 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_marginBottom="12dp" 
         android:layout_marginLeft="12dp" 
         android:layout_marginRight="12dp" 
         android:layout_marginTop="8dp"> 


         <TextView 
          android:id="@+id/textViewForgotPassword" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_span="2" 
          android:layout_gravity="center_horizontal" 
          android:text="@string/forgot_password_question_mark" /> 
        </TableRow> 
        <!-- //Forgot password --> 

       </TableLayout> 
      </TableRow> 
     </TableLayout> 
     <!-- //Login form --> 

     <!-- New user --> 
     <Button 
      android:id="@+id/buttonSignUp" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="22dp" 
      android:textAllCaps="false" 
      android:text="@string/new_user_sign_up" /> 
     <!-- //New user --> 
    </LinearLayout> 
</ScrollView> 

Ist es möglich, die graue Rahmen Füllung zu machen der horizontale Teil des Designs? Maby Ich brauche dafür gar keine Tabellenlayouts?

Antwort

1

Sie Linearlayout definieren kann kurz vor Tablelayout Farbe Eigenschaft, versuchen Sie oben Code

<?xml version="1.0" encoding="utf-8"?> 

<ScrollView 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:fitsSystemWindows="true"> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:orientation="vertical" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

    <!-- Logo --> 
    <ImageView 
     android:id="@+id/imageViewLogo" 
     android:layout_width="wrap_content" 
     android:layout_height="72dp" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginBottom="24dp" 
     android:layout_marginTop="24dp" 
     android:src="@drawable/logo" /> 
    <!-- //Logo --> 

    <!-- Login form --> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" 
     android:background="@color/colorGray"> 
    <TableLayout 
     android:id="@+id/tableLayoutFrame" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal"> 
     <TableRow 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_horizontal"> 
      <TableLayout 
       android:id="@+id/tableLayoutLogin" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_horizontal"> 

       <!-- Email --> 
       <TableRow 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_marginLeft="12dp" 
        android:layout_marginRight="12dp" 
        android:layout_marginTop="12dp" 
        android:background="@color/colorWhite"> 

        <ImageView 
         android:id="@+id/imageViewEmail" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_marginEnd="6dp" 
         android:layout_marginTop="12dp" 
         android:src="@drawable/ic_mail_outline_black" /> 

        <EditText 
         android:id="@+id/editTextEmail" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal" 
         android:ems="10" 
         android:inputType="textEmailAddress" 
         android:text="@string/blank" /> 
       </TableRow> 
       <!-- // Email --> 

       <!-- Password --> 
       <TableRow 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_marginLeft="12dp" 
        android:layout_marginRight="12dp" 
        android:layout_marginTop="12dp" 
        android:background="@color/colorWhite"> 

        <ImageView 
         android:id="@+id/imageViewPassword" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_marginEnd="6dp" 
         android:layout_marginTop="12dp" 
         android:src="@drawable/ic_lock_black" /> 

        <EditText 
         android:id="@+id/editTextPassword" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal" 
         android:ems="10" 
         android:inputType="textWebPassword" /> 

       </TableRow> 
       <!-- //Password --> 

       <!-- Login button --> 
       <TableRow 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_marginLeft="12dp" 
        android:layout_marginRight="12dp" 
        android:layout_marginTop="8dp"> 

        <Button 
         android:id="@+id/buttonLogin" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_span="2" 
         android:background="@drawable/btn_primary" 
         android:text="@string/login" 
         android:textAllCaps="false" 
         android:textAppearance="?android:attr/textAppearanceMedium" 
         android:textColor="@color/colorWhite" /> 

       </TableRow> 
       <!-- //Login button --> 

       <!-- Forgot password --> 
       <TableRow 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_marginBottom="12dp" 
        android:layout_marginLeft="12dp" 
        android:layout_marginRight="12dp" 
        android:layout_marginTop="8dp"> 


        <TextView 
         android:id="@+id/textViewForgotPassword" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_span="2" 
         android:layout_gravity="center_horizontal" 
         android:text="@string/forgot_password_question_mark" /> 
       </TableRow> 
       <!-- //Forgot password --> 

      </TableLayout> 
     </TableRow> 
    </TableLayout> 

    </LinearLayout> 

    <!-- //Login form --> 

    <!-- New user --> 
    <Button 
     android:id="@+id/buttonSignUp" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="22dp" 
     android:textAllCaps="false" 
     android:text="@string/new_user_sign_up" /> 
    <!-- //New user --> 
</LinearLayout> 

0

linken und rechten Rand zum Tabellenlayout hinzufügen, um den grauen Teil zu verkleinern. Passen Sie dann die Ränder der Bearbeitungstexte entsprechend an.

0

die layout_width des Tablelayout Set match_parent:

<TableLayout 
     android:id="@+id/tableLayoutFrame" 
     android:background="@color/colorGray" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal">