Arranging elements in xml in Android Studio

Question

I used

drawerlayout

in my xml. I can able to align properly in Relative layout but I am struggling with this drawer layout.

Cant use most of the feature which i used in Relative layout.

But i somewhat managed to align elements in the places where i want . But it gave me another problem.

• In Android Studio's XML Preview it was perfectly aligned ,

• In Emulator (while Compiling) I can't see the elements Textview and Button.

• When i installed in my Mobile , these elements were little above from the bottom.

You can see three pictures below ,

Q1. So why these different types of alignment i am getting .

Q2. How can i code so that UI should look same in all the devices

Q3. What mistake i did in my XML Code (Posted Below) and what is the replacement code to get same UI in all devices.

XML Code :

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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:fitsSystemWindows="true">
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"/>
    </android.support.design.widget.AppBarLayout>
        <android.support.v7.widget.RecyclerView
            android:id="@+id/dbListrv"
            android:layout_width="match_parent"
            android:layout_height="450dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="55dp"
            />
        <EditText
            android:layout_width="300dp"
            android:layout_height="62dp"
            android:id="@+id/et"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="0dp"
            android:layout_marginTop="505dp"
            />
        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="62dp"
            android:text="New Button"
            android:id="@+id/addButton"
            android:padding="0dp"
            android:layout_marginLeft="300dp"
           android:layout_marginTop="505dp"
            android:layout_marginBottom="0dp" />
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

I also request you to say some tips to arrange elements flexibily. Thanks in advance. (:

You should really reconsider your design because giving fixed height to `RecyclerView` is not a nice thing. — Sufian, Dec 09 '15 at 12:08
It it might be why you are facing the problem. Try by changing height of `RecyclerView` to, say, 100dp. — Sufian, Dec 09 '15 at 12:09
I want my recycler list tat much height... i cant reduce it. I want it in whole page nd leaving small space below for text view nd button — Ganesh, Dec 09 '15 at 15:50

score 1 · Answer 1 · answered Dec 09 '15 at 16:08

1

I believe your issue is because you are using a fixed height for your RecyclerView.

It takes up more space on some screens than it does on others giving the effect you are seeing.

Try putting your RecyclerView inside a RelativeLayout and set its height to MATCH_PARENT.

Also use the RelativeLayout to align your button and textview to the bottom of the screen which is what I think you are trying to achieve.

answered Dec 09 '15 at 16:08

Kuffs

35,581
10
79
92

You mean, two relative layouts?? one for recycler view and another for TV and button? – Ganesh Dec 09 '15 at 16:39
If you have time, can you correct my code and paste it as answer here..? – Ganesh Dec 09 '15 at 16:42
I dont have time right now but have a look at this which should help you along. http://stackoverflow.com/questions/2386866/how-to-align-views-at-the-bottom-of-the-screen – Kuffs Dec 09 '15 at 16:53
They used Relative layout whereas I used Drawer Layout..... There i can use many functions such as " android:layout_alignParentTop" and layout_leftOf sumting lik tat..... but in Drawer Layout I can't able to use any of these... that's why I asked this question.... Hope u understand and u give me solution once u get time... – Ganesh Dec 09 '15 at 17:22

score 1 · Accepted Answer · answered Dec 10 '15 at 04:31

I got a solution for my question. Using a fixed height for the elements may look perfect in your xml . But they will differ among different mobiles which have different screen size.

Hence providing fixed height is not a good idea.

So, Use LinearLayout (Nested LinearLayout if needed) and set Weight of each elements.

Set orientation as Horizontal if you want to align your elements as Columns.

Set orientation as Vertical if you want to align your elements as Rows.

Weight will matter how much space an element should occupy in the defined layout.

Here is my code without using fixed heights,

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"/>
    </android.support.design.widget.AppBarLayout>
    </LinearLayout>
        <LinearLayout
            android:id="@+id/FirstRL"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/dbListrv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_weight="1" />

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="horizontal"
                android:layout_weight="10">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/et"
            android:layout_alignParentBottom="true"
            android:layout_weight="2" />
        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:text="New Button"
            android:id="@+id/addButton"
            android:layout_weight="5" />
            </LinearLayout>
        </LinearLayout>

</LinearLayout>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

Finally i found solution for my own question. Hope it will help others too..

Arranging elements in xml in Android Studio

2 Answers2