I am new to android and learning. I am building form like UI and using linear layout. I have tried to put these in two vertical linear layouts inside a horizontal layout but couldn't manage to align label text elements with each input element. Below, I am using three linear layouts.
xml layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/linlaytop"
android:layout_marginLeft="#dimen/linlayleft"
android:layout_marginRight="#dimen/linlayleft"
android:layout_marginBottom="#dimen/linlaytop"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="#dimen/linlaytop">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/traffic"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
<Spinner
android:id="#+id/trafficSpinnerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/linlayleft">
</Spinner>
</LinearLayout>
<LinearLayout
android:layout_marginTop="#dimen/linlaytop"
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="#string/location"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
/>
<EditText
android:id="#+id/locationTxtView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:layout_marginLeft="#dimen/linlayleft"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="#dimen/linlaytop"
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="#string/date"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
<TextView
android:id="#+id/dateTxtView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/datetime"
android:layout_marginLeft="#dimen/linlayleft"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
</LinearLayout>
</LinearLayout>
Design Layout:
I want to align these three elements:
Please advise.
Give Weightsum to your linearLayout, nd give layout_weight to your views ( Textviews and spinner ). Change the width of views from wrap_content to 0dp. Do the same with all of three layouts like this.
Hope this is what you looking for.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100"
android:layout_marginTop="#dimen/linlaytop">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30"
android:text="#string/traffic"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
<Spinner
android:id="#+id/trafficSpinnerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="70"
android:layout_marginLeft="#dimen/linlayleft">
</Spinner>
</LinearLayout>
Here you go
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<TextView
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="wrap_content"
android:text="traffic"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
<Spinner
android:id="#+id/trafficSpinnerView"
android:layout_width="0dp"
android:layout_weight="40"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp">
</Spinner>
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="wrap_content"
android:text="location"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
/>
<EditText
android:id="#+id/locationTxtView"
android:layout_width="0dp"
android:layout_weight="40"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:layout_marginLeft="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="wrap_content"
android:text="date"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
<TextView
android:id="#+id/dateTxtView"
android:layout_width="0dp"
android:layout_weight="40"
android:layout_height="wrap_content"
android:hint="datetime"
android:layout_marginLeft="10dp"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
</LinearLayout>
</LinearLayout>
Related
I've one ImageView and 3 TextViews. I need to align the 3 text views below the imageview. the first on the left . the second in center. the 3rd on the right.
below code is working for normal and small screens. but for tablets and large screens, the first text view is not below the imageview. it's shifted too left. and the third TextView is shifted too Right.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Rel_wind2_img">
<ImageView
android:id="#+id/window2_image1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:id="#+id/window2_image1"/>
<TextView
android:id="#+id/TV1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/window2_image1"
android:layout_alignParentLeft="true"
android:textAlignment="center"/>
<TextView
android:id="#+id/TV2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/window2_image1"
android:layout_centerInParent="true"
android:textAlignment="center"/>
<TextView
android:id="#+id/TV3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/window2_image1"
android:layout_alignParentRight="true"
android:text="#string/info2_txt_moves"
android:textAlignment="center"/>
</RelativeLayout>
I can solve this problem grammatically. but i need a simple way using XML.
Give layout weight inside a linear layout. It will set the width equally between all textviews. try this
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Rel_wind2_img"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:id="#+id/window2_image1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/window2_image1"
>
<TextView
android:id="#+id/TV1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:textAlignment="center"/>
<TextView
android:id="#+id/TV2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:textAlignment="center"/>
<TextView
android:id="#+id/TV3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="info2_txt_moves"
android:layout_weight="1"
android:textAlignment="center"/>
</LinearLayout>
</RelativeLayout>
Best way to do this kind of UI design just divide the Layout into weights.
because if we divide the ui in weights it will automatically adjust according to divide size so there will be no problem on any device.
like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Rel_wind2_img">
<LinearLayout
android:id="#+id/tr"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/window2_image1"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="#color/black"
/>
</LinearLayout>
<LinearLayout
android:layout_below="#+id/tr"
android:weightSum="3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<TextView
android:id="#+id/TV1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dhshshs"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<TextView
android:id="#+id/TV2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fjkhajhjfha"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<TextView
android:id="#+id/TV3"
android:text="aoifoijoajoifjoajofjafafg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/window2_image1"
/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Use this One :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Rel_wind2_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/window2_image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="dfgf"
android:id="#+id/TV1"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAlignment="center" />
<TextView
android:id="#+id/TV2"
android:text="dfgf"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center" />
<TextView
android:id="#+id/TV3"
android:text="dfgf"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center" />
</LinearLayout>
</LinearLayout>
Hope this help you...if you need any help you can ask
I'm struggling with TextViews. I want them next to each other but in the opposite screen sides. First should be on the left of the screen and the second on the right. This is my code:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/unit"
android:textSize="22sp"
android:text="Unit"/>
<TextView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/unitName"
android:text="Km"
android:textColor="#android:color/darker_gray"
android:textSize="22sp"/>
</LinearLayout>
I tried layout_gravity and gravity and it doesn't work. I was experimenting with wrap_content and match_parent but still my TextViews are just next to each other. I want them in opposite screen sides. What should I do?
Change your width to Wrap_content and Linear layout to RelativeLayout and then set alignParent attributes
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/unit"
android:layout_alignParentLeft="true"
android:textSize="22sp"
android:text="Unit"/>
<TextView
android:id="#+id/unitName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right"
android:layout_alignParentRight="true"
android:text="Km"
android:textColor="#android:color/darker_gray"
android:textSize="22sp" />
</RelativeLayout>
Just add on both TextViews this line
android:layout_weight="0.5"
I have made some changes in your layout please take a look
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="0dp">
<TextView
android:id="#+id/unit"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".50"
android:text="Unit"
android:textSize="22sp" />
<TextView
android:id="#+id/unitName"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".50"
android:gravity="right"
android:text="Km"
android:textColor="#android:color/darker_gray"
android:textSize="22sp" />
</LinearLayout>
Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/unit"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="Unit"
android:textSize="22sp"/>
<TextView
android:id="#+id/unitName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:gravity="right"
android:text="Km"
android:textColor="#android:color/darker_gray"
android:textSize="22sp"/>
</LinearLayout>
try this use android:layout_weight="" and android:gravity=""
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="left"
android:layout_weight="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="left"
android:layout_weight="1"/>
</LinearLayout>
I want to create this UI in android.
Work
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.
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>
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.
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 try to do this layout but i got only echec until now:
- 2 textview vertical Align sharing 50% width with 1 button.
- all must be vertical centered.
Here is the mockup showing what i want:
Mockup
Here is my actual code :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/PanelName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:textColor="#color/colorBlack"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Parking Name"
android:textSize="14sp" />
<TextView
android:id="#+id/PanelAddress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:textColor="#color/colorBlack"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Parking Address blablabla Paris"
android:textSize="14sp" />
</LinearLayout>
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_go"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:textColor="#color/colorAccent"
android:layout_marginTop="30dp"
android:layout_marginBottom="24dp"
android:layout_marginRight="24dp"
android:padding="12dp"
android:text="GO !"/>
</LinearLayout>
Thanks for help :)
Remove Nested Linear Layouts it's bad for performance. I have made some changes in your Layout. Make your AppCompatButton Layout inside Relative Layout and make it's width to android:layout_width="wrap_content" and also Remove First Linear Layout inside Root Layout.
Refer this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/image_area"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btn_go"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/PanelName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Parking Name"
android:textColor="#000"
android:textSize="14sp" />
<TextView
android:id="#+id/PanelAddress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Parking Address blablabla Paris Parking Address blablabla Paris Parking Address blablabla Paris"
android:textColor="#000"
android:textSize="14sp" />
</LinearLayout>
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="30dp"
android:layout_weight="2"
android:background="#000"
android:padding="12dp"
android:text="GO !"
android:textColor="#FFF" />
</RelativeLayout>
Here is Screen.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/txtOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView One" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/txtTwo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView Two" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="#+id/btnSomething"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
I am trying to create a screen that shows the details of the students. The following is my xml code for that screen.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".PatientDetails">
<LinearLayout
android:id="#+id/ll1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="3"
android:background="#color/BackgroundColor">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Details"
android:textColor="#color/white"
android:textSize="30dp"
android:gravity="center"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ll2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#color/white">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Student Name"
android:textSize="20dp"
android:layout_weight="1"
android:textColor="#color/BackgroundColor"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/PatientName"
android:text="Joseph"
android:layout_weight="1"
android:textSize="20dp"
android:textColor="#color/BackgroundColor"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Age"
android:textSize="20dp"
android:layout_weight="1"
android:textColor="#color/BackgroundColor"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/age"
android:text="21"
android:layout_weight="1"
android:textSize="20dp"
android:textColor="#color/BackgroundColor"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sex"
android:textSize="20dp"
android:layout_weight="1"
android:textColor="#color/BackgroundColor"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Sex"
android:text="Female"
android:layout_weight="1"
android:textSize="20dp"
android:textColor="#color/BackgroundColor"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
</LinearLayout>
The output of the code is as follows:
Can someone tell me how to modify the code so that the values on the right hand side of each row are aligned properly.
Row example:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Student Name"
android:textColor="#color/BackgroundColor"
android:textSize="20dp" />
<TextView
android:id="#+id/PatientName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Joseph"
android:textColor="#color/BackgroundColor"
android:textSize="20dp" />
</LinearLayout>
Remove android:layout_weight="1" from row root. Change android:layout_width="wrap_content" to android:layout_width="0dp"
Sample
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Student Name"
android:textColor="#color/pika_bg"
android:textSize="20dp" />
<TextView
android:id="#+id/PatientName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="5dp"
android:text="Joseph"
android:textColor="#color/pika_bg"
android:textSize="20dp" />
</LinearLayout>
Here I am added android:weightSum="2"to the parent LinearLayout. So that the child views can get same width. Then we can adjust padding/gravity attributes according to your needs.
I think you use linear layout but linear layout have also one property its called layout_weight i think you should use this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Test" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Test" />
</LinearLayout>