Terance Wijesuriya
Reputation: 1986
Android: How to align TextView with upper and lower elements?
Please have a look at the below UI (please ignore the comment in red)
Below is my attempt in making it
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/content_id_target_ranges"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".activities.TargetRangesActivity"
tools:showIn="@layout/app_bar_target_ranges">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/target_ranges_title_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="12dp"
android:text="@string/my_settings_target_ranges"
android:textSize="20sp" />
<TextView
android:id="@+id/target_ranges_sub_heading_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="6dp"
android:text="@string/target_ranges_sub_heading"
android:textSize="14sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="12dp"
android:background="@drawable/linear_border"
android:orientation="vertical">
<TextView
android:id="@+id/target_ranges_blood_glucose_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="12dp"
android:text="@string/target_ranges_blood_glucose_text"
android:textSize="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="15dp"
android:layout_marginTop="6dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/target_ranges_blood_glucose_pre_meal_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/target_ranges_blood_glucose_pre_meal"
android:textAlignment="center"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:id="@+id/target_ranges_blood_glucose_pre_meal_unit_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:text="@string/target_ranges_blood_glucose_unit"
android:textAlignment="center"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_marginTop="6dp"
android:layout_weight="1">
<android.support.design.widget.TextInputLayout
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="@drawable/edit_text_style">
<EditText
android:id="@+id/target_ranges_blood_glucose_first_edit"
style="@style/EditTextStyle"
android:focusable="true" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="6dp"
android:layout_weight="1">
<android.support.design.widget.TextInputLayout
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="@drawable/edit_text_style">
<EditText
android:id="@+id/target_ranges_blood_glucose_second_edit"
style="@style/EditTextStyle"
android:focusable="true" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="6dp"
android:layout_weight="1">
<android.support.design.widget.TextInputLayout
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="@drawable/edit_text_style">
<EditText
android:id="@+id/target_ranges_blood_glucose_third_edit"
style="@style/EditTextStyle"
android:focusable="true" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:layout_width="34dp"
android:layout_height="48dp"
android:textSize="16sp"
android:textColor="@color/colorWhite"
android:background="@drawable/gray_colour_style"
android:layout_weight="1.46" />
<TextView
android:layout_width="90dp"
android:layout_height="48dp"
android:textSize="16sp"
android:background="@drawable/green_colour_style"
android:textColor="@color/colorWhite"
android:layout_weight="0.15" />
<TextView
android:layout_width="60dp"
android:layout_height="48dp"
android:textSize="16sp"
android:background="@drawable/yellow_colour_style"
android:textColor="@color/colorWhite" />
<TextView
android:layout_width="70dp"
android:layout_height="48dp"
android:textSize="16sp"
android:background="@drawable/red_colour_style"
android:textColor="@color/colorWhite"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="12dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="10dp"
android:layout_marginTop="6dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/target_ranges_blood_glucose_post_meal_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/target_ranges_blood_glucose_post_meal"
android:textAlignment="center"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:id="@+id/target_ranges_blood_glucose_post_meal_unit_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:text="@string/target_ranges_blood_glucose_unit"
android:textAlignment="center"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_marginTop="6dp"
android:layout_weight="1">
<android.support.design.widget.TextInputLayout
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="@drawable/edit_text_style">
<EditText
android:id="@+id/target_ranges_blood_glucose_four_edit"
style="@style/EditTextStyle"
android:focusable="true" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="6dp"
android:layout_weight="1">
<android.support.design.widget.TextInputLayout
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="@drawable/edit_text_style">
<EditText
android:id="@+id/target_ranges_blood_glucose_five_edit"
style="@style/EditTextStyle"
android:focusable="true" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="6dp"
android:layout_weight="1">
<android.support.design.widget.TextInputLayout
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="@drawable/edit_text_style">
<EditText
android:id="@+id/target_ranges_blood_glucose_six_edit"
style="@style/EditTextStyle"
android:focusable="true" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="24dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
However it generated the below UI
Notice how the colorfull bar is not aligned properly with the upper and lower text boxes, as the first image indicated via a dotted line (the dotted line shows the where the edge of each colourful tile should be, in aligned with the textboxes.
Also notice my text boxes are different than what is expected.
How can I make it as displayed in the first image?
Upvotes: 0
Views: 144
Answers (1)
Ranjan
Reputation: 1356
Here I have fix your inner layout, change drawable and color.., etc
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/content_id_target_ranges"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/down_shadow"
android:orientation="vertical"
android:weightSum="20">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Texttttttttttttttttttttttttttttttttt"
android:textColor="#000" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="horizontal"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:weightSum="10">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:id="@+id/pre_meal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="kkk lkjl" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/pre_meal"
android:gravity="center"
android:text="sd/sd" />
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:orientation="horizontal"
android:weightSum="6">
<EditText
android:id="@+id/one"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="#999698"
android:focusable="true" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<EditText
android:id="@+id/two"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="#999698"
android:focusable="true" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<EditText
android:id="@+id/three"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="#999698"
android:focusable="true" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="horizontal"
android:weightSum="9">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1.5"
android:background="#8c9393"
android:gravity="center"
android:text="Low"
android:textColor="#fff" />
<TextView
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="2.4"
android:background="#1dea12"
android:gravity="center"
android:text="Normal"
android:textColor="#fff" />
<TextView
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="2.2"
android:background="#f5d904"
android:gravity="center"
android:text="High"
android:textColor="#fff" />
<TextView
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1.9"
android:background="#ea0c05"
android:gravity="center"
android:layout_marginRight="2dp"
android:text="Very High"
android:textColor="#fff" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="horizontal"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:weightSum="10">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:id="@+id/pre_meals"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="kkk lkjl" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/pre_meals"
android:gravity="center"
android:text="sd/sd" />
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:orientation="horizontal"
android:weightSum="6">
<EditText
android:id="@+id/four"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="#999698"
android:focusable="true" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<EditText
android:id="@+id/five"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="#999698"
android:focusable="true" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<EditText
android:id="@+id/six"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="#999698"
android:focusable="true" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Instead of Edittext use your TextInput layout. It is giving error while compiling so i changed it to Edittext
Upvotes: 1
Related Questions
- Align TextViews in specific way
- Line up text under each other in Layout
- How to vertically align text within TextView
- how to align textview to the upper right of the screen
- How to align textview at the bottom of the screen inside a scroll view android
- How set Text Align?
- Android - How to align a TextView text
- Android - Text in TextView doesn't align left/vertically
- Align textviews in linearlayout
- Aligning textviews