making all checkboxes in same vertical column - android

I am trying to make all my checkboxes in the same vertical column in my XML file of the android project.
The result and code is given;
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<CheckBox
android:id="#+id/cannamon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cinnamon"
android:textSize="18sp" />
<CheckBox
android:id="#+id/nutmeg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nutmeg"
android:textSize="18sp" />
<CheckBox
android:id="#+id/nutella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nutella"
android:textSize="18sp" />
<CheckBox
android:id="#+id/whipped_cream"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Whipped Cream"
android:textSize="18sp" />
</LinearLayout>
I think the constraints of the linear layout are correct.
Or should I use the Grid layout?

You should use ConstraintLayout. I think you wanted to achieve something like below:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="CheckBox"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<CheckBox
android:id="#+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="CheckBoxTest"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/checkBox" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout
>

Plenty of ways to do it. Here's an example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="left">
<CheckBox
android:id="#+id/cannamon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cinnamon"
android:textSize="18sp" />
<CheckBox
android:id="#+id/nutmeg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nutmeg"
android:textSize="18sp" />
<CheckBox
android:id="#+id/nutella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nutella"
android:textSize="18sp" />
<CheckBox
android:id="#+id/whipped_cream"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Whipped Cream"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>

What you are currently doing is aligning the center of each CheckBox view to the center. Since each CheckBox is not the same width, the boxes will not line up. What you can do is align everything to the left, then wrap this LinearLayout in another which centers it. Here is an example:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<CheckBox
android:id="#+id/cannamon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cinnamon"
android:textSize="18sp"/>
<CheckBox
android:id="#+id/nutmeg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nutmeg"
android:textSize="18sp"/>
<CheckBox
android:id="#+id/nutella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nutella"
android:textSize="18sp"/>
<CheckBox
android:id="#+id/whipped_cream"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Whipped Cream"
android:textSize="18sp"/>
</LinearLayout>

Remove android:gravity="center" from linearlayout from your xml code

Related

How to use margin on checkboxes so they will be on each other

I have the following code:
<LinearLayout
android:id="#+id/availability_sunday"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tile_divider"
android:orientation="horizontal">
<TextView
android:id="#+id/text_sunday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sunday:" />
<CheckBox
android:id="#+id/checkbox_sunday_morning"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
android:layout_width="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp" />
<TextView
android:id="#+id/text_sunday_morning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Morning"/>
<CheckBox
android:id="#+id/checkbox_sunday_evening"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
android:layout_width="wrap_content" />
<TextView
android:id="#+id/text_sunday_evening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Evening"/>
</LinearLayout>
In a RelativeLayout. I would like the layout to be:
Sunday [] Morning [] Evening
Monday [] Morning [] Evening
...
Thursday [] Morning [] Evening
But If I add the same block for monday I will get:
Because the work android:layout_marginStart and android:layout_marginLeft. I want the checkbox to be above each other. How can I do it?
Try below code:
<LinearLayout
android:layout_below="#+id/tile_divider"
android:id="#+id/availability_sunday"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/text_sunday"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Sunday:" />
<CheckBox
android:id="#+id/checkbox_sunday_morning"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
android:layout_width="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp" />
<TextView
android:id="#+id/text_sunday_morning"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Morning"/>
<CheckBox
android:id="#+id/checkbox_sunday_evening"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
android:layout_width="wrap_content" />
<TextView
android:id="#+id/text_sunday_evening"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Evening"/>
</LinearLayout>
I do not know a lot about Android Studio but try this:
-- Create a TableLayout
-- Put all your data (textView etc) inside it.
The goal is to keep your data symmetrical (i think).
Also check out this
try Constraint layout it will be easier..
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--For sunday-->
<TextView
android:id="#+id/text_sunday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Sunday:"
app:layout_constraintBottom_toBottomOf="#id/checkbox_sunday_morning"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/checkbox_sunday_morning" />
<CheckBox
android:id="#+id/checkbox_sunday_morning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:drawSelectorOnTop="true"
app:layout_constraintStart_toEndOf="#id/text_sunday"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_sunday_morning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:text="Morning"
app:layout_constraintBottom_toBottomOf="#id/checkbox_sunday_morning"
app:layout_constraintStart_toEndOf="#id/checkbox_sunday_morning"
app:layout_constraintTop_toTopOf="#id/checkbox_sunday_morning" />
<CheckBox
android:id="#+id/checkbox_sunday_evening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:drawSelectorOnTop="true"
app:layout_constraintStart_toEndOf="#id/text_sunday_morning"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_sunday_evening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Evening"
app:layout_constraintBottom_toBottomOf="#id/checkbox_sunday_evening"
app:layout_constraintStart_toEndOf="#id/checkbox_sunday_evening"
app:layout_constraintTop_toTopOf="#id/checkbox_sunday_evening" />
<!--for monday-->
<CheckBox
android:id="#+id/checkbox_monday_morning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:drawSelectorOnTop="true"
app:layout_constraintStart_toStartOf="#id/checkbox_sunday_morning"
app:layout_constraintTop_toBottomOf="#id/checkbox_sunday_morning" />
<TextView
android:id="#+id/text_monday_morning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:text="Morning"
app:layout_constraintBottom_toBottomOf="#id/checkbox_monday_morning"
app:layout_constraintStart_toEndOf="#id/checkbox_monday_morning"
app:layout_constraintTop_toTopOf="#id/checkbox_monday_morning" />
<CheckBox
android:id="#+id/checkbox_monday_evening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:drawSelectorOnTop="true"
app:layout_constraintStart_toStartOf="#id/checkbox_sunday_evening"
app:layout_constraintTop_toBottomOf="#id/checkbox_sunday_evening" />
<TextView
android:id="#+id/text_Monday_evening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Evening"
app:layout_constraintBottom_toBottomOf="#id/checkbox_monday_evening"
app:layout_constraintStart_toEndOf="#id/checkbox_monday_evening"
app:layout_constraintTop_toTopOf="#id/checkbox_monday_evening" />
<TextView
android:id="#+id/text_monday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Monday:"
app:layout_constraintBottom_toBottomOf="#id/checkbox_monday_morning"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/checkbox_monday_morning" />

Having a textview below another textview that is centered?

I currently have a textview that is centered, and would like to add another textview below the centered textview, but it just places it at the same place as the previous textview, is there a way to fix this?
Code:
<FrameLayout
android:layout_width="350dp"
android:layout_height="500dp"
android:background="#color/white">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
</FrameLayout>
Your are setting gravity in 2nd textview as center remove it or use your desire gravity there
Use Linear layout with android: orientation then you got your center layout
<LinearLayout
android:layout_width="350dp"
android:layout_height="500dp"
android:orientation="vertical"
android:background="#color/white">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
</FrameLayout>
Instead of using FrameLayout use LinearLayout
<LinearLayout
android:gravity="center"
android:layout_width="350dp"
android:layout_height="500dp"
android:background="#color/white"
android:orientation="vertical">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
</LinearLayout>
Output:
I hope this will work for you.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<TextView
android:id="#+id/info_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
<TextView
android:id="#+id/info_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
</FrameLayout>
Always use match_parent and wrap_content instead of dimensions in dp.
Place two text view inside relative layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="350dp"
android:layout_height="500dp"
android:background="#android:color/darker_gray">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Name"
android:textSize="18sp"
android:textStyle="normal" />
<TextView
android:layout_below="#+id/info_name"
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Test"
android:textSize="18sp"
android:textStyle="normal" />
</RelativeLayout>
</FrameLayout>
I see in your file that you have android:layout_gravity="center" and android:gravity="center" for both textviews. This will make them sit on top of each other. You could try putting some padding on the bottom of the info_name and on the top of the info_text like so:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="350dp" android:layout_height="500dp">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="60dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="60dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
</FrameLayout>
While this will add some space it is basically just stretching the textview itself and the textviews will still be overlapping. You could use the linear layout as suggested above but I prefer to use the constraint layout as it makes placing items and providing spacing so much easier. You can right click on the FrameLayout in the component Tree and convert it to ConstraintLayout. Then you can place the info_name and have its constraint handles set to 50 in the constraint widget, Android Studio ConstraintLayout Widget and then hook the other textview to it and set it where you like placing second textview.
Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/info_name"
app:layout_constraintVertical_bias="0.100000024" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can find out more information in the documentation here.

How to turn this LinearLayout and RelativeLayout into ConstraintLayout?

I am trying to start using ConstrainLayout, but find it difficult to use. I have a layout for setting like screen, and it is using LinearLayout and RelativeLayout, very simple and easy to implement. Here is the layout:
<?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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_stay_awake"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stay awake"
android:padding="10dp"/>
<Switch
android:id="#+id/switch_stay_awake"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable Notification"
android:padding="10dp"/>
<Switch
android:id="#+id/switch_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable location"
android:padding="10dp"/>
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
</LinearLayout>
and this is how it looks:
Now I want to build the same settings UI, but using ConstrainLayout, and here is the ConstrainLayout I have for this settings UI.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/tv_stay_awake"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Stay awake"/>
<Switch
android:id="#+id/switch_stay_awake"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/tv_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Enable Notification"
app:layout_constraintTop_toBottomOf="#+id/tv_stay_awake"/>
<Switch
android:id="#+id/switch_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/switch_stay_awake"/>
<TextView
android:id="#+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Enable location"
app:layout_constraintTop_toBottomOf="#+id/tv_notification"/>
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/switch_notification"/>
</android.support.constraint.ConstraintLayout>
and it turns out like this:
As you can see, the Switch buttons are not aligned with the TextView. How can I align them with the TextView on the same line level, so it will look the same as the one I did with LinearyLayout and RelativeLayout? I know I can put the TextView and Switch button in a RelativeLayout for each line, but if I do that, there is no reason to use the ConstrainLayout.
You can try this .
Add app:layout_constraintBaseline_toBaselineOf="#+id/tv_notification" in your Switch XML code .
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_stay_awake"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Stay awake"/>
<Switch
android:id="#+id/switch_stay_awake"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_stay_awake"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:id="#+id/tv_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Enable Notification"
app:layout_constraintTop_toBottomOf="#+id/tv_stay_awake"/>
<Switch
android:id="#+id/switch_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_notification"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/switch_stay_awake"/>
<TextView
android:id="#+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Enable location"
app:layout_constraintTop_toBottomOf="#+id/tv_notification"/>
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_location"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/switch_notification"/>
</android.support.constraint.ConstraintLayout>
OUTPUT

Bottom Sheet Design Issue with FAB

i achieved the following Layout for my bottom sheet:
but i am not satisfied about the implementation. I used a dummy fab which is invisible so that the title can align to it. The visible fab is outside of the layout with the title.
Without the dummy fab the title is too long (sometimes) and is placed under the fab. I couldn't figure out how to get this layout without the dummy fab.
Here is my layout.xml by far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/titleLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary">
<TextView
android:id="#+id/markerTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/bottom_sheet_navigation_dummy"
android:layout_toStartOf="#+id/bottom_sheet_navigation_dummy"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#color/white"
android:padding="#dimen/defaultPadding"
android:maxLines="1"/>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/bottom_sheet_navigation_dummy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_navigation_white_24dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:visibility="invisible"
android:theme="#style/MenuButtonsStyle"/>
</RelativeLayout>
<TextView
android:id="#+id/markerAdressLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="#string/address"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/markerAdress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:textSize="14sp" />
<TextView
android:id="#+id/markerTelephoneNumberLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="#string/telephone"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/markerTelephoneNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:textSize="14sp" />
<TextView
android:id="#+id/markerOpeningHoursLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="#string/opening_hours"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/markerOpeningHours"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:textSize="14sp" />
<TextView
android:id="#+id/markerWebsiteLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="#string/website"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/markerWebsiteLabel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="#string/more_information"
android:textSize="14sp" />
<TextView
android:id="#+id/markerWebsite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:textSize="14sp" />
</LinearLayout>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/bottom_sheet_navigation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_navigation_white_24dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:theme="#style/MenuButtonsStyle"/>
Can anyone share a smarter solution for my layout?
Thanks in advance!
I would take the RelativeLayout with the title and the title itself out of the LinearLayout and make them siblings of the Fab Button.
This way you can tell the TextView to be "layout_toLeftOf="#+id/bottom_sheet_navigation". Then you will need to make sure, that the background of the text (your RelativeLayout) still stretches all the way to the right. Unfortunately you will still need an invisible dummy TextView for this, which needs to have the same parameters (padding, textSize) as your title.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Title background-->
<RelativeLayout
android:id="#+id/titleLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent">
<!--Dummy Textview which is required to provide the correct height for the background
"#id/titleLayout"
It has the same parameters as ""#id/markerTitle""-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textStyle="bold"
android:padding="#dimen/defaultPadding"
android:maxLines="1"
android:background="#color/colorAccent"
android:visibility="invisible"/>
</RelativeLayout>
<!--The title with the correct allignment-->
<TextView
android:id="#+id/markerTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#color/white"
android:padding="#dimen/defaultPadding"
android:maxLines="1"
android:background="#color/colorAccent"
android:layout_toLeftOf="#+id/bottom_sheet_navigation"
android:text="This is a super long title. 123456"/>
<!--The info LinearLayout needs to be placed below the title-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/markerTitle"
android:orientation="vertical">
<!--...-->
</LinearLayout>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/bottom_sheet_navigation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_navigation_white_24dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:theme="#style/MenuButtonsStyle"/>
</RelativeLayout>

Android Scrollview inside a tab not showing all content

I have two tabs and in the second tab I have content which is larger than the viewport, so I need ScrollView. However, I can't get ScrollView to show all content. It cuts the view at the last ~10/20dp. Here's my TabFragment.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dikte glas (mm)"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp" />
<TextView
android:id="#+id/seekBarValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_alignParentEnd="true">
</TextView>
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="200"
android:layout_marginTop="16dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#+id/seekBarValue"/>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="20dp"
android:layout_marginRight="8dp"
android:layout_below="#id/seekBar">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/soakTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Soak time"
android:textStyle="bold"
/>
<TextView
android:id="#+id/txtResultStep1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#id/card_view1">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/initialCooling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Initial Cooling"
android:textStyle="bold"
android:textSize="18sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#android:color/darker_gray"
android:layout_below="#id/initialCooling"/>
<TextView
android:id="#+id/rate1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rate"
android:layout_below="#id/initialCooling"
android:layout_marginTop="16dp"
/>
<TextView
android:id="#+id/txtResultStep2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/rate1"
/>
<TextView
android:id="#+id/range1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Range"
android:layout_below="#id/rate1"
android:layout_marginTop="8dp"
/>
<TextView
android:id="#+id/txtResultStep3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/range1"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#id/card_view2">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/secondCooling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2nd Cooling"
android:textStyle="bold"
android:textSize="18sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#android:color/darker_gray"
android:layout_below="#id/secondCooling"/>
<TextView
android:id="#+id/rate2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rate"
android:layout_below="#id/secondCooling"
android:layout_marginTop="16dp"
/>
<TextView
android:id="#+id/txtResultStep4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/rate2"/>
<TextView
android:id="#+id/range2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Range"
android:layout_below="#id/rate2"
android:layout_marginTop="8dp"
/>
<TextView
android:id="#+id/txtResultStep5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/range2"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#id/card_view3">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/thirdCooling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3rd Cooling"
android:textStyle="bold"
android:textSize="18sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#android:color/darker_gray"
android:layout_below="#id/thirdCooling"/>
<TextView
android:id="#+id/rate3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rate"
android:layout_below="#id/thirdCooling"
android:layout_marginTop="16dp"
/>
<TextView
android:id="#+id/txtResultStep6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/rate3"/>
<TextView
android:id="#+id/range3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Range"
android:layout_below="#id/rate3"
android:layout_marginTop="8dp"
/>
<TextView
android:id="#+id/txtResultStep7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/range3"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#id/card_view4">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/totalMinimumTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total minimum time"
android:textStyle="bold"
/>
<TextView
android:id="#+id/txtResultStep8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Above in the following image you can see what happens when I have my cursor in the ScrollView. The blue line is just above the navigation bar.
Under is what happens when I have my cursor in the RelativeLayout inside ScrollView (which is how it's supposed to be):
Android Studio
Could someone tell my why the ScrollView is not showing all my content?
This is how it is on the emulator.
Emulator
I've fixed it by using NestedScrollView instead of ScrollView, because the fragment is initiated in a CoordinatorLayout. I didn't know that only NestedScrollVew would work then.
Here's an answer to a year old question. But I had the same problem not being able to scroll for the last few dps. I also had a android:layout_marginTop on my top element with content. Changing that to a android:paddingTop on the ScrollView solved it for me.
I wanted to suggest this in a comment but my reputation isn't high enough. First of all, is the first screenshot what you see in the emulator or in android studio?
EDIT: Sorry just saw the names of the links. You already answer that question.
Try removing the scrollview from the RelativeLayout. If everything is contained in the scrollView, you shouldn't need the layout. I feel like the outside relativeLayout's "match_parent" fields for both width and height are problematic. Worth a shot.

Categories

Resources