Aligning Text and Icons in a TextView Android

Aligning Text and Icons in a TextView Android - java

i am working on a ui design assignment in android studio. i have been able to get this
here is my code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".MainActivity">
<ImageView
android:id="#+id/topImage"
android:src="#drawable/shebaartist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop" />
<TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
android:drawableLeft="#drawable/about"
android:layout_below="#+id/topImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-black"
android:background="#F0E68C"
android:id="#+id/descText" />
<TextView android:text="150 Alimi Rd, Alore, Ilorin, Kwara State"
android:drawableLeft="#drawable/marker"
android:layout_below="#+id/descText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-light"
android:id="#+id/addrText"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView android:text="shebaeventss#gmail.com"
android:drawableLeft="#drawable/message"
android:layout_below="#+id/addrText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:background="#F0E68C"
android:textSize="16dp"
android:fontFamily="sans-serif-black"
android:id="#+id/emailText"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView android:text="07055393673"
android:drawableLeft="#drawable/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-light"
android:id="#+id/mobilenoText"
android:layout_below="#+id/emailText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
I want to align the icons and text in the text views on the same line and with the same size. my question is that how do i do this? please point out my errors and help me with fixing this.

If this is what you want, then you just need change gravity from
android:gravity="center" to android:gravity="center_vertical"

Please add gravity property to your TextView with center alignment and
icon size change with 24dp.
<TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
android:drawableLeft="#drawable/about"
android:layout_below="#+id/topImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:gravity="center"
android:fontFamily="sans-serif-black"
android:background="#F0E68C"
android:id="#+id/descText" />

It seems you want to use a compound drawable, see this answer:
How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView

Related

LinearLayout not responsive in small devices

I have a layout file in my Android application:
<?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="match_parent"
android:layout_height="match_parent"
android:background="#color/player_background"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".Fragments.PlayerFragment">
<ProgressBar
android:id="#+id/progress_bar_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:theme="#style/ProgressBarStyle"
android:visibility="invisible" />
<TextView
android:id="#+id/title_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Title"
android:textColor="#color/white"
android:textSize="24dp" />
<ImageView
android:id="#+id/view_imageview"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_marginTop="10dp"
android:background="#color/white" />
<TextView
android:id="#+id/status_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="20dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/play_pause_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/play_btn" />
<ImageButton
android:id="#+id/sleep_timer_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/sleep_btn" />
<ImageButton
android:id="#+id/share_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/share_btn" />
<TextView
android:id="#+id/sleep_timer_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sleep_timer_btn"
android:layout_alignLeft="#+id/sleep_timer_btn"
android:layout_alignRight="#+id/sleep_timer_btn"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="15dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="#style/Volume_Seekbar"
android:paddingStart="30dp"
android:paddingEnd="30dp"/>
</LinearLayout>
It's working perfectly in most of the devices but in a small screen device I can't see the SeekBar because it's out from the screen. Any idea how I can fix it?

You are using very large fixed sizes on your views, and because different phones got different screen sizes what seems to work on some device will actually not work on another
For example - in a smaller device with height of 300dp with views summing up to total of 400dp you will not have enough room for some views because of the small screen size and that's why you are not seeing your view.
You can use ConstraintLayout to make your screen responsive, or if you want to keep your current layout structure you can use the following libraries for scaling size of dp:
ssp and sdp to get a scalable size unit for your views and texts.
Another option is to wrap your layout with ScrollView, giving your screen the option to be scrollable and by that you will be able to "see" all of your views on your screen - note that this may not be intuitive to your user.

It is because the fixed sizes you are using to build your layout is getting summed up eventually being too big for small screen size. You can try the following to fix this:
Create a layout specially for small screen size by using smallest width qualifier
Make your layout scrollable
Use constraint layout
Using the ssp and sdp size units
NOTE that you will have to specify the smallest width qualifier to your current layout in such a way that the smallest width qualifer excludes the small screen devices and include the devices in which your layout fits properly.

I would suggest you to use constraint layout, but if you still want to go ahead with your current view then it will be good practice if you add scrollview to your parent layout, so that your layout won't get cropped on smaller devices:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/player_background"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".Fragments.PlayerFragment">
<ProgressBar
android:id="#+id/progress_bar_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:theme="#style/ProgressBarStyle"
android:visibility="invisible" />
<TextView
android:id="#+id/title_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Title"
android:textColor="#color/white"
android:textSize="24dp" />
<ImageView
android:id="#+id/view_imageview"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_marginTop="10dp"
android:background="#color/white" />
<TextView
android:id="#+id/status_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="20dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/play_pause_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/play_btn" />
<ImageButton
android:id="#+id/sleep_timer_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/sleep_btn" />
<ImageButton
android:id="#+id/share_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/share_btn" />
<TextView
android:id="#+id/sleep_timer_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sleep_timer_btn"
android:layout_alignLeft="#+id/sleep_timer_btn"
android:layout_alignRight="#+id/sleep_timer_btn"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="15dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingStart="30dp"
android:paddingEnd="30dp"
android:theme="#style/Volume_Seekbar" />
</LinearLayout>
</ScrollView>

How can I conditionally 'remove' or hide a button?

I have a fragment containing a recyclerView.
When an item is clicked on in the recyclerView I set the recyclerview item background to green and change the "saveBtn" text to "Update".
I need to also be able to remove the "deletebtn" every time a user clicks on a recyclerView item, or hide it so that the UI looks somewhat like this:
How could this be done?
Method I am using to update UI on recyclerView click
public void onExerciseClicked(int position) {
saveBtn.setText("Update");
clearBtn.setText("Delete");
}
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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradientfrozen"
android:id="#+id/constraint_layout21">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#292929"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView5"
android:layout_width="327dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:paddingLeft="20dp"
android:layout_marginTop="10dp"
android:text="WEIGHT (kgs)"
android:textColor="#android:color/background_light"
android:textSize="16dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="horizontal">
<Button
android:id="#+id/dec_weight"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_weight="0.5"
android:background="#drawable/down22"
android:textColor="#color/design_default_color_background" />
<EditText
android:id="#+id/editTextWeight"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:backgroundTint="#color/green"
android:ems="10"
android:gravity="center"
android:hint="0.0"
android:inputType="numberDecimal"
android:singleLine="false"
android:textColor="#color/design_default_color_background"
android:textColorHint="#color/light_grey"
android:textSize="30sp" />
<Button
android:id="#+id/inc_weight"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_weight="0.5"
android:background="#drawable/up22" />
</LinearLayout>
<TextView
android:id="#+id/textView8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:text="REPS"
android:textColor="#android:color/background_light"
android:textSize="16dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="horizontal">
<Button
android:id="#+id/dec_reps"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_weight="1.6"
android:background="#drawable/down22"
android:shadowColor="#color/design_default_color_background" />
<EditText
android:id="#+id/editTextReps"
android:layout_width="161dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:backgroundTint="#color/green"
android:ems="10"
android:gravity="center"
android:hint="0"
android:inputType="number"
android:textColor="#color/design_default_color_background"
android:textColorHint="#color/light_grey"
android:textSize="30sp" />
<Button
android:id="#+id/inc_reps"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_weight="1.6"
android:background="#drawable/up22" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="horizontal">
<Button
android:id="#+id/save_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/my_small_green_shape"
android:text="Save"
android:textColor="#ffffff"
android:textSize="20sp" />
<Button
android:id="#+id/clear_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/my_small_red_shape"
android:text="Clear"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Set"
android:textColor="#android:color/holo_green_light" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Kgs"
android:textColor="#android:color/holo_green_light" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Reps"
android:textColor="#android:color/holo_green_light" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/completed_exercise_ListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:background="#292929"
tools:listitem="#layout/completed_exercise_item" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Using LinearLayout as a direct child of ConstraintLayout defeats the whole purpose of using ConstraintLayout. It is not a good practice to use nested layout from the performance point of view. Besides, if deleteBtn is direct child of ConstraintLayout, then setting the layout_width of saveBtn to match_constraint will enable it to take up the whole space if we change the visibility of deleteBtn to gone.

cgb_pandey's answer is great and it is the recommended approach since your root viewgroup is ConstraintLayout. However, I wanted to present you an alternative way to do this using your current LinearLayout approach.
All you need to do is to set the width of both bottoms to 0dp. This way, their weight would determine how much space they occupy. If both view are visible, each of them would have 50% of the total width of the screen. If only one of the buttons is visible, it would occupy the entire screen. Here's a code snippet to guide you:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="horizontal">
<Button
android:id="#+id/save_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/my_small_green_shape"
android:text="Save"
android:textColor="#ffffff"
android:textSize="20sp" />
<Button
android:id="#+id/clear_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/my_small_red_shape"
android:text="Clear"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
Not that this approach involves nesting layouts and this might affect performance in the long run and also complicate your layout code pretty fast.

Can't center the TextView using RelativeLayout

I've got an issue with my TextView, I just can't center it. Here's what it should look like :
And it's actually look like that
Here's my XML code
<?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">
<TextView
android:id="#+id/magnitudeTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/dateTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:textSize="15sp" />
</RelativeLayout>

Using a LinearLayout with horizontal orientation along with a weightsum of 3 for the children text view would give you a light and more reliable solution, doing it like the following:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3"
android:orientation="horizontal">
<TextView
android:id="#+id/magnitudeTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:text="test"
android:textSize="15sp" />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test"
android:gravity="center"
android:layout_weight="1"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/dateTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="10dp"
android:textSize="15sp" />
</LinearLayout>
Now each of your text views will take exactly 1/3 of the whole screen width, if you want the center one to be bigger you can play with the layout_weight value in each of the text view to match your desired design.

Instead of RelativeLayout you can use LinearLayout in which you can set the weightsum to 3 that will give you more reliable solution. Every TextView will get the equal amount of space in a row.

The Below technique work for me.That is:
Use your first TextView as left orient and middle TextView as center oriented and last TextView as right oriented and apply weight for each TextView.
Your code it would be like this:
<?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"
orientation=vertical
weightsum=3
>
<TextView
android:id="#+id/magnitudeTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_margin="10dp"
android:textSize="15sp"
android:layout_weight=1 />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textSize="15sp"
android:layout_weight=1/>
<TextView
android:id="#+id/dateTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:textSize="15sp"
android:layout_weight=1/>
</LinearLayout>
`

A horizontal LinearLayout would provide a better and lighter solution for your problem. What you'd do is wrap your three textviews in it, then use layout_width=wrap_content for the ones to the left and right and layout_width=0dp
layout_weight=1
for the middle one

Generally, a linear layout with weights would suit these kinds of needs, the system will automatically divide the screen into parts depending on the weightsum you mentioned
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum = "5"
android:orientation = "horizontal"
/>
<TextView
android:id="#+id/magnitudeTV"
android:layout_width="0dp"
android:layout_weight = "1"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="0dp"
android:layout_weight = "3"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/dateTV"
android:layout_width="0dp"
android:layout_weight = "1"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:textSize="15sp" />
</LinearLayout>

You can achieve this by doing this :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/magnitudeTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="sdf34 "
android:textColor="#000000"
android:textSize="15sp" />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/magnitudeTV"
android:layout_margin="10dp"
android:text="dasdasdsadasdds"
android:textColor="#000000"
android:textSize="15sp" />
<TextView
android:layout_toRightOf="#id/cityNameTV"
android:id="#+id/dateTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="fg25111dfg"
android:textColor="#000000"
android:textSize="15sp" />
</RelativeLayout>
but according to me it is not a good solution for this you can con-catenate all the three strings and than set the final string to one single text view as mentioned below:
String final_string = distance +" "+string_2 +" "+string_3;
textView.setText(final_string);

Android TextView being cut off by gravity=center

I'm displaying a lot of textviews in a linear layout and setting gravity to center causes the words to be cut off. I'm runnning a Nexus S in the emulator.
<LinearLayout
android:layout_width="585dp"
android:layout_height="810dp"
android:orientation="vertical"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<TextView
android:id="#+id/TeamName4"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic"/>
<EditText
android:gravity="center"
android:id="#+id/TeamScore1"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number" />
<TextView
android:id="#+id/TeamName2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic" />
<EditText
android:gravity="center"
android:id="#+id/TeamScore2"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberSigned" />
That's a snippet of the code. I experience the same issue with all my other textViews. Any advice how to make the text appear in the center of the screen?

Don't use hardcoded height and width for linear layout
Use match_parent as height and width for LinearLayout for your particular code.
Always prefer to use match_parent or wrap_content, it will be helpful when your application runs on devices with different screen sizes
Go through below link for more understanding
https://developer.android.com/training/multiscreen/screensizes#TaskUseWrapMatchPar

Modify your LinearLayout Properties like:
(It will make your text appear in the center of the screen)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/TeamName4"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic"/>
.......
.......
</LinearLayout>

Use code like this:
Why you set a height and width Static/Fixed. Generally use a height and width "wrapcontent" or "matchparent"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<TextView
android:id="#+id/TeamName4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic" />
<EditText
android:id="#+id/TeamScore1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center"
android:inputType="number" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<TextView
android:id="#+id/TeamName2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic" />
<EditText
android:id="#+id/TeamScore2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center"
android:inputType="numberSigned" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Floating Action Button over Scrollview?

I'm revamping my app to follow look more "Material Design-ey", but have run into trouble with the FAB. I have a scrollview with two floating action buttons:
When I scroll to the bottom, the FABs cover my content. I want to be able to scroll a little past the bottom so the FABs can be align_parent_bottom without overlapping anything:
(should be able to scroll a little more for FABs to be aligned below)
(Before scrolling down)
How do I create extra space at the bottom of my app after scrolling down to the max for the FABs to rest?
<?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="wrap_content"
android:background="#68d9cc">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#68d9cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="20dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:id="#+id/back"
android:onClick="cancel"
android:src="#drawable/ic_arrow_back_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test example"
android:textSize="22sp"
android:id="#+id/header"
android:textColor="#color/textColorPrimary"
android:layout_gravity="center"
android:paddingRight="10dp"
/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/linear"
android:layout_marginBottom="55dp"
android:layout_below="#+id/textView12"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#android:color/black"
android:layout_below="#+id/textView12"
android:text="textview:"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView4"
android:layout_alignBottom="#+id/textView4"
android:layout_toEndOf="#+id/textView4"
android:layout_toRightOf="#+id/textView4"
android:imeOptions="actionDone"
android:inputType="text" />
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:choiceMode="singleChoice"
android:layout_height="300dp"
android:layout_below="#+id/toolbar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:elevation="9dp">
</ListView>
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="78dp"
android:gravity="center_horizontal"
android:text="textview"
android:textColor="#000000"
android:textSize="18sp"
android:layout_below="#+id/listview"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/cancel"
android:onClick="cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:clickable="true"
app:fabSize="normal"
app:srcCompat="#drawable/ic_close_black_24dp"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:clickable="true"
app:fabSize="normal"
app:srcCompat="#drawable/ic_done_black_24dp"
/>
</RelativeLayout>

If you are aiming for Material Design as you mentioned, then putting those Floating Action Button like that are not encouraged. Either stack them on top of each other on the right, or have one where it will open multiple mini FAB on click.
An easy fix however I can think of here would be to add paddingBottom to your layout so it would have more "content" and it would scroll up more.
I would read this section if you haven't already.
https://material.io/guidelines/components/buttons-floating-action-button.html#

Develop Reference

Java is a programming language and computing platform first released by Sun Microsystems in 1995.

Aligning Text and Icons in a TextView Android - java

If this is what you want, then you just need change gravity from android:gravity="center" to android:gravity="center_vertical"

It seems you want to use a compound drawable, see this answer: How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView

Related

LinearLayout not responsive in small devices

How can I conditionally 'remove' or hide a button?

Can't center the TextView using RelativeLayout

Android TextView being cut off by gravity=center

Floating Action Button over Scrollview?

Categories

Resources