CODEWITHSUNDEEP
androidandroid-layout
Red Cricket
Red Cricket

Reputation: 10470

Not happy with my Android UI layout

I am having a heck of time trying to get my UI to look the way I want. Here's what I've got ... Here's what I got ...

I would like the TextView, the XX:XX:XX, text font to be larger and centered between the EditText and Button. Also how come the user gets the phone keyboard instead of a qwerty keyboard to use to enter text?

Here's my layout XML:

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

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/new_bookmark_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="0.5"
        android:ems="10"
        android:inputType="text" />

    <TextView
        android:id="@+id/new_bookmark_clock"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="0.3"
        android:text="@string/xx_xx_xx" />

    <Button
        android:id="@+id/btn_add_new_bookmark"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="0.2"
        android:text="@string/add"/>
 </LinearLayout>

 <ListView
    android:id="@+id/bookmark_list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

 </LinearLayout>

Upvotes: 0

Views: 134

Answers (5)

Jitender Dev
Jitender Dev

Reputation: 6925

Please follow below, i have made a sample UI exactly what you have asked for using Relative Layout and by using minimum number of lines. Please have a look and check if can solve the purpose. I have also attached snapshot for the same.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <RelativeLayout
                android:padding="4dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                >

                <EditText
                    android:id="@+id/ed_name"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:inputType="number" />

                <TextView
                    android:id="@+id/tv_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_toRightOf="@+id/ed_name"
                    android:text="XX:XX:XX"
                    android:textSize="18dp" />

                <Button
                    android:id="@+id/btn_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:text=" add " />
            </RelativeLayout>
            </RelativeLayout>

About the keypad :Check it on actual device , the device will open its own default keypad.enter image description here

Upvotes: 1

Harshid Vasoya
Harshid Vasoya

Reputation: 5721

please refer this xml all the changes is done tested is also done.

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

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/new_bookmark_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:ems="10"
        android:inputType="number" />

    <TextView
        android:id="@+id/new_bookmark_clock"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:gravity="center_horizontal|center_vertical"
        android:textSize="18dp"
        android:layout_weight="1"
        android:text="hello" />

    <Button
        android:id="@+id/btn_add_new_bookmark"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:text="add"/>
 </LinearLayout>

 <ListView
    android:id="@+id/bookmark_list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

 </LinearLayout>

Upvotes: 1

Rishabh Srivastava
Rishabh Srivastava

Reputation: 3745

Use the following code to achieve what you want:......

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

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/new_bookmark_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:ems="10"
        android:inputType="text" />

    <TextView
        android:id="@+id/new_bookmark_clock"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="18dp"
        android:layout_weight="1"
        android:text="@string/xx_xx_xx" />

    <Button
        android:id="@+id/btn_add_new_bookmark"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:text="@string/add"/>
 </LinearLayout>

 <ListView
    android:id="@+id/bookmark_list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

 </LinearLayout>

Upvotes: 4

prijupaul
prijupaul

Reputation: 2086

Replace android:layout_gravity="center" by

android:gravity="center" in your TextView.

and regarding the keyboard layout, it looks like you are trying in the emulator. The emulator shows up 12pad keyboard in portrait mode. You can try in the device.

Upvotes: 1

Szymon
Szymon

Reputation: 43023

You can use relative layout to do that. You can change the font size with android:textSize

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <EditText
        android:id="@+id/new_bookmark_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:ems="10"
        android:inputType="text" />

    <TextView
        android:id="@+id/new_bookmark_clock"
        android:layout_width="wrap_content"
        android:layout_toRightOf="@id/new_bookmark_name"
        android:layout_toLeftOf="@+id/btn_add_new_bookmark"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="@string/xx_xx_xx" />

    <Button
        android:id="@id/btn_add_new_bookmark"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="@string/add"/>
 </RelativeLayout>

Upvotes: 1

Related Questions