CODEWITHSUNDEEP
androidandroid-layout
swathi
swathi

Reputation: 65

How to design responsive layout UI View?

I want to design login page which is similar to facebook login page.

I have tried the below layout view ,if i change the orientation of my screen there is no space at bottom and also fields those i have taken completely changed.Please advice how to fix this problem?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
  android:layout_height="fill_parent" >

   <ScrollView
       android:id="@+id/ScrollView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true" >

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="#7CACF5"
        android:orientation="vertical"
        android:padding="10dp"
        android:paddingBottom="30dp" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="70dp"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:text="Welcome"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="email or phone"
        android:inputType="textEmailAddress"
        android:paddingBottom="5dp" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="password"
        android:inputType="numberPassword"
        android:paddingBottom="5dp" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Log In" />

</LinearLayout>
</ScrollView>
</RelativeLayout>

Upvotes: 1

Views: 947

Answers (3)

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

// Try this way,hope this will help you to solve your problem...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:background="#7CACF5"
    android:gravity="center" >

    <ScrollView
        android:id="@+id/ScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/LinearLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:gravity="center"
                android:text="Welcome"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <EditText
                android:id="@+id/editText1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:hint="email or phone"
                android:inputType="textEmailAddress" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:ems="10"
                android:hint="password"
                android:inputType="numberPassword" >
            </EditText>

            <Button
                android:id="@+id/button1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Log In" />
        </LinearLayout>
    </ScrollView>

</LinearLayout>

Upvotes: 0

Giridharan
Giridharan

Reputation: 4462

Try this 

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        android:orientation="vertical"
        android:padding="10dp"
        android:paddingBottom="30dp" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:paddingBottom="5dp"
            android:text="Welcome"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:hint="email or phone"
            android:inputType="textEmailAddress"
            android:paddingBottom="5dp" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:ems="10"
            android:hint="password"
            android:inputType="numberPassword"
            android:paddingBottom="5dp" >

            <requestFocus />
        </EditText>

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
             android:layout_height="0dp"
            android:layout_weight="1"
            android:text="Log In" />
    </LinearLayout>

Upvotes: 1

Pratik Dasa
Pratik Dasa

Reputation: 7439

For this you need to create responsive layout, you must need to go through android development blog, who teaches us how to create responsive layout. In basic you need to implement different Drawables folders like Darawable-mdpi, Drawable-hdpi, Drawable-xhdpi, Drawable-xxhdpi and like wise, and you need to put your images in all the folders with same name, but with different sizes. Likewise, you need to create layout files as well but your xml must be designed with proper attributes as per your requirements.

Follow this Link

Upvotes: 0

Related Questions