androidandroid-layoutandroid-linearlayouttextviewandroid-scrollview
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?
Solution
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
- Getting Error while Dexing. after upgrading flutter to 3.19.0
- TextView will not center its content
- Check internet connectivity android in kotlin
- SyntaxError: node_modules\react-native\Libraries\Components\ActivityIndicator\ActivityIndicator.js: Missing initializer in const declaration. (156:41)
- Gradle could not start your build
- Android TTS doesn't speak
- Android doesn't resolve mDNS address in local network, but does so in another
- How to use html webpages content in android Applications
- App not installed for this user
- In-memory caching on repository level for Kotlin Flows on Android
- How to draw a state diagram, and which drawing software or online drawing website can I use?
- Android version release warning message: This App Bundle contains Java/Kotlin code, which might be obfuscated
- How to pop multiple screens back to a screen that receives a parameter in Jetpack Compose with type safety?
- Urbanairship customise push notification message content
- Android gradle plugin(7.0.0-alpha15) removed variantFilter property, how to restore functionality?
- Rxandroid What's the difference between SubscribeOn and ObserveOn
- new BasicTextField: How to react to IME actions
- Is anko commons no longer available for use in Android projects?
- Room - Not sure how to convert a Cursor to this method's return type (java.lang.Object)
- Jetpack Compose NavigationBarItem Icon
- set layout background and heigh
- How can I fix the Execution failed for task ':expo-image-picker:compileReleaseKotlin' error in react-native Expo android build?
- My scrollView compnent is not working despite all the online solutions
- Limitations of secure storage - KeyChain and KeyStore
- Logcat crashes with error: unexpected EOF
- Why ListDetailPaneScaffold needs a custom Parcelable class?
- Jetpack Compose Fullscreen Dialog
- Android App prevent from being modified
- Android 12 Splash Screen Icon Not Showing From Notification
- Flutter - How to make a column screen scrollable