I want to create this UI in android

Question

I want to create this UI in android.

I am confuse in Linear Layout and Relative layout in android.I have done this UI.

 <RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="match_parent"
 android:layout_width="match_parent"
 android:background="#ffffff">


 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
   >
 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20dp"
    android:text="S "
   />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" M T W T F S"
        android:textSize="20dp"
        android:textStyle="bold"/>
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="09:00am-06:00pm"
        android:textSize="20dp"
       />
   </LinearLayout>


</RelativeLayout>

I am not able to move next line and also shadow text "S" like in "WORK" UI.

Youre only working with 1 line because you have a linearlayout and your orientation is set to horizontal, so everything you add will just move horizontally. You need to nest multiple linearlayouts, and use your relativelayout to control their positioning — Simon, May 01 '17 at 23:09
Can u tell me Which layout I use to add icon and text in next line?Please tell me with dummy ImageView and TextView with correct layout positioning and alignment. — KIRTI, May 02 '17 at 00:30

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

To move next line just insert a new linear layout below the one you already have.

And for the shadow I guess this question might help you.

edited May 23 '17 at 11:54

Community

1
1

answered May 01 '17 at 23:23

score 0 · Accepted Answer · answered May 02 '17 at 01:11

Try this

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

<!--1st row here-->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_margin="5dp">

    <!--Your days here-->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:gravity="left"
        android:layout_gravity="left">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="S"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="M"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="T"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="W"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TH"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="F"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="S"
            android:layout_margin="5dp"/>

    </LinearLayout>

    <!--Your time here-->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:gravity="right"
        android:layout_gravity="right">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your time here"
            android:layout_margin="5dp"/>

    </LinearLayout>


</LinearLayout>

<!--2nd row-->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:layout_margin="5dp">

    <!--For icon with text below-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_delete"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="icon label"/>

    </LinearLayout>

    <!--For icon with text on side-->

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_delete"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="icon label"/>

    </LinearLayout>

</LinearLayout>

Simon · Answer 3 · 2017-05-02T01:18:12.857

You can achieve multiple rows with something like this:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
    <LinearLayout
        android:id="@+id/dates"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="S "
            android:textSize="20dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" M T W T F S"
            android:textSize="20dp"
            android:textStyle="bold"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="09:00am-06:00pm"
            android:textSize="20dp"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/dates"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_menu_camera"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_menu_call"/>
    </LinearLayout>
</RelativeLayout>

You have a separate LinearLayout for each row. Importantly, you should give each LinearLayout an id so that you can set the layout_below attribute of the bottom layout with the id of the layout above it

Then in your second LinearLayout you can just add your icons horizontally like you did originally

That will give you something that looks like this:

I want to create this UI in android

3 Answers3