Android layout design

Question

I'm sorry if I asking a stupid question here.

I'm looking for android layout design. Is there has a web easy for us to design the android layout and finally generate xml code to android studio.

I wanted to have a layout design as image below, however I don't think it is possible to do using android studio layout.

@Destro Do i need to plug in anything ? I'm just learning myself by dragging and dropping palette items in screen... — , Nov 26 '15 at 06:17
no plugin are use for design this layoute. it is design for layoute. — Abhinav singh, Nov 26 '15 at 06:20
It is possible . the only thing confusing is that 9 patch image background is used. — Arslan Ashraf, Nov 26 '15 at 06:21
@NigamPatro how to achieve this ? I only see a line for textfield, not rectangular textBox — , Nov 26 '15 at 06:31
That depends on device. The image which you posted is I think its on API level 10 — Nigam Patro, Nov 26 '15 at 06:35
You can set a background to your edittext. You just have to make shape. see this link http://stackoverflow.com/questions/10124919/can-i-draw-rectangle-in-xml — Arslan Ashraf, Nov 26 '15 at 06:39

score 0 · Answer 1 · answered Nov 26 '15 at 06:32

You need to divide the layout in smaller elements. e.g. Choose station will be a TextView having a background image and text on it "Choose Station". Below that there will be a Relativelayout with image background and a EditText. There will be a search button with magnifying glass as background drawable. This will be aligned to right of parent so that it be on top of Edittext.

Vimal Gajera · Accepted Answer · 2015-11-26T07:43:12.897

Try this xml code..

Screenshot

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/value_10"
android:orientation="vertical">

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

    <TextView
        android:id="@+id/title1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_corner_up"
        android:padding="@dimen/value_10"
        android:text="Choose Station"
        android:textColor="@color/black"
        android:textSize="@dimen/txt_large" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title1"
        android:layout_marginTop="-15dp"
        android:background="@drawable/round_corner_up">

        <EditText
            android:layout_width="350dp"
            android:layout_height="70dp"
            android:layout_margin="@dimen/value_10"
            android:background="@drawable/round_corner_square" />
    </LinearLayout>
</RelativeLayout>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/value_10">

    <TextView
        android:id="@+id/title2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_corner_up"
        android:padding="@dimen/value_10"
        android:text="Within Next"
        android:textColor="@color/black"
        android:textSize="@dimen/txt_large" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title2"
        android:layout_marginTop="-15dp"
        android:background="@drawable/round_corner_up">
  <Spinner
    android:layout_width="350dp"
    android:layout_height="70dp"></Spinner>

    </LinearLayout>
</RelativeLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/value_20"
    android:orientation="horizontal">
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:text="Arrivals"
        android:textSize="20sp"
        android:drawableLeft="@drawable/drawable1"
        android:layout_height="@dimen/value_70" />
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:text="Departures"
        android:textSize="20sp"
        android:drawableLeft="@drawable/drawable2"
        android:layout_height="@dimen/value_70" />
</LinearLayout>

round_corner_up.xml

<?xml version="1.0" encoding="utf-8"?><!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#7B7D7B" />
<stroke
    android:width="3dip"
    android:color="#7B7D7B" />
<corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />

round_corner_square.xml

<?xml version="1.0" encoding="utf-8"?><!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="@color/white" />
<stroke
    android:width="3dip"
    android:color="@color/light_gray" />
<corners
    android:bottomLeftRadius="15dp"
    android:bottomRightRadius="15dp"
    android:topLeftRadius="15dp"
    android:topRightRadius="15dp" />

Thanks a lot !! May I Know how you put the dimen value ? – Nov 26 '15 at 08:32 — , Nov 26 '15 at 08:32
Replace dimen value with dp (Ex. @dimen/value_10 with 10dp) – Vimal Gajera Nov 26 '15 at 08:48 — Vimal Gajera, Nov 26 '15 at 08:48
@ Seng use light_gray = #C2C8CE – Vimal Gajera Nov 26 '15 at 08:49 — Vimal Gajera, Nov 26 '15 at 08:49
Thanks :D where you find all the color source code ? – Nov 26 '15 at 08:51 — , Nov 26 '15 at 08:51
@Seng You can use android color chooser for all color code. – Vimal Gajera Nov 26 '15 at 08:58 — Vimal Gajera, Nov 26 '15 at 08:58

Android layout design

2 Answers2