Best way to center content in android linear layout - android

I've created the following splash screen layout using android developer studio. I wanted to center the content which consist of two text views and an image view. The following is the XML.
<?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:background="#drawable/splash_gradient">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView id="#+id/splashscreen"
android:layout_width="100dp"
android:layout_height="250dp"
android:paddingBottom="100dp"
android:layout_centerInParent="true"
android:gravity="center_vertical|center_horizontal"
android:src="#drawable/splash_logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample"
android:layout_centerInParent="true"
android:fontFamily="#string/font_family_thin"
android:paddingTop="90dp"
android:paddingRight="90dp"
android:textSize="35dp"
android:textColor="#fff"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App"
android:layout_centerInParent="true"
android:fontFamily="#string/font_family_regular"
android:textSize="35dp"
android:paddingTop="90dp"
android:paddingLeft="100dp"
android:textColor="#fff"
/>
</RelativeLayout>
This will look as following image.
Is this the correct way to center my content or is there a better way to achieve what I'm looking for? Please guide me. Thanks in advance.

If you are using padding to center the elements, it is the wrong way because you will get different results with different screens.
See this alternative, it is not the only one.
<?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:background="#drawable/splash_gradient"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="#+id/splashscreen"
android:layout_width="100dp"
android:layout_height="250dp"
android:paddingBottom="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/splash_logo" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/splashscreen"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample"
android:textSize="35dp"
android:textColor="#fff"
android:layout_marginEnd="15dp"
android:layout_marginRight="10dp"
android:fontFamily="#string/font_family_thin"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App"
android:layout_centerInParent="true"
android:textSize="35dp"
android:textColor="#fff"
android:fontFamily="#string/font_family_regular"
/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>

first DO NOT use padding or margin to align Views with respect to siblings views or layout, it will look great in 1 device but won't in other devices with different screen sizes. Use layout_align attribute. Learn Linear layout properties here. Then you will able to discover best way by your self.
my solution
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="100dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
/>
<LinearLayout
android:layout_centerInParent="true"
android:layout_below="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/sample"
android:layout_alignBottom="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample"
android:layout_centerInParent="true"
android:textSize="35dp"
android:textColor="#000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" App"
android:textSize="35dp"
android:textColor="#000"
/>
</LinearLayout>
</RelativeLayout>

Related

Removing space between recyclerview items

I have searched around and they all mention about changing the layout_height to wrap_content but mine is already in wrap_content. I really can't identify any error. Any help is welcome. Thanks in advance!
Screenshot of problem
<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="wrap_content"
tools:context="com.fyp.ipptapp.UI.StandardFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Age" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Gender" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Spinner
android:id="#+id/spinner_Age"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="5dp"
android:dropDownWidth="50dp" />
<Spinner
android:id="#+id/spinner_Gender"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="5dp"
android:dropDownWidth="50dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Voc" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:padding="15dp"
android:text="Pop Gp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Spinner
android:id="#+id/spinner_Voc"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="5dp"
android:dropDownWidth="200dp" />
<Spinner
android:id="#+id/spinner_PopGp"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="5dp"
android:dropDownWidth="120dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/test"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Exemption" />
<CheckBox
android:id="#+id/pushUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Push Up" />
<CheckBox
android:id="#+id/sitUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sit Up" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayout2">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayout2" />
</LinearLayout>
</RelativeLayout>
In your adapter xml parent layout height might be set to match_parent. Check it once
In your item.xml(or where you have the structure for each item in recycler) check whether the android:layout_width="wrap_content" and android:layout_height="wrap_content" like this.
Something like this :
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
This will set the height and width according to the content within the item.
Hope this helped!
give some top margin to your layout.
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayout2" />
</LinearLayout>
you are looking for the wrong xml file, add you inside item xml the one used at your Adapter not the RecyclerView one
I think #MinnuKaAnae has answered the question, but I still want to use some layout UIs to show the answer. I simulate the issue on my side.
Obviously, the owner provided the wrong layout file, we need the item layout.

How to put one view over another relativelayout in xml

I searched a lot but nothing seems to work in my case. Here is what I want to achieve using relative layout.
below is my xml code for it.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:focusable="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/microphone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/white"
android:padding="#dimen/padding_16">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:drawableRight="#drawable/arrow"
android:text="#string/next"
android:textAllCaps="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/arrow"
android:text="#string/previous"
android:textAllCaps="true" />
</RelativeLayout>
By doing this the microphone is hidden behind the Next-Previous Strip. I guess there is some parameter to control the view height in z-axis but I don't remember that and will it work below Lolipop too. Please help.
If you want to show your "Microphone Layout", you don't have to do much with your current layout(xml)
Just put your "Microphone Relative Layout" after "Previous and Next Relative Layout", like below
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/white"
android:padding="#dimen/padding_16">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:drawableRight="#drawable/arrow"
android:text="#string/next"
android:textAllCaps="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/arrow"
android:text="#string/previous"
android:textAllCaps="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:focusable="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/microphone"/>
</RelativeLayout>
</RelativeLayout>
Hope this helps you.

Linear Layout is not properly showing the component when using android studio

This is code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
I want to practice a layout in android studio and I'm getting an error while implementing the code.
This is the text which goes outside the mobile screen:
Why does the blue box go outside the mobile screen?
You're not properly setting the layout. The childViews of your parentView(LinearLayout) was aligned horizontally without setting the layout weight. You should read the documentation on LinearLayout. However, to fix your layout, you can add another container to hold the first row of your layout to make the second row visible on the screen. Your current code contains all the childViews in a single row which makes the other views not visible. Try the code below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
You are setting the layout_width of each view yourself. You should know that there is a maximum width of screen that is available. Moreover, you are setting the width of button as match_parent that is not proper way when the neighbouring views have some fixed width. If your are using LinearLayout try layout_weight attribute. Play around and try to experiment.
For example:
<?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="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingLeft="0dp"
android:paddingTop="10dp"
android:text="Email:"
android:textSize="30dp" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="2"
android:singleLine="true" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingTop="10dp"
android:text="Login" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>

Put text and image on the same line

I'm trying to put text and an image on the same line but for one reason or another it's not working. The text is coming up fine but there is no sign of the image.
<LinearLayout
android:id="#+id/list_item3"
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_below="#+id/list_item"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:background="#DCDBDB" >
<TextView
android:id="#+id/TextView03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.00"
android:text="#string/quoteDevil"
android:textSize="21sp" />
<ImageView
android:layout_width="33dp"
android:layout_height="match_parent"
android:layout_marginRight="15dp"
android:src="#drawable/nextarrow" />
</LinearLayout>
FYI: There is a "tip" for displaying an image within a TextView.
In fact, any images stored in the drawable folders can actually be embedded within a TextView at several key locations in relation to the text using the android:drawableRight / android:drawableLeft and the android:drawablePadding property.
An example:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/my_contacts"
android:drawableRight="#drawable/ic_action_add_group"
android:drawablePadding="8dp"
/>
The result is:
Source: Link
The best way to have two things in one row is to use TableRow
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_item3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/list_item"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextView03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/quoteDevil"
android:textSize="21sp" />
<ImageView
android:layout_width="33dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="15dp"
android:src="#drawable/nextarrow" />
</TableRow>
</LinearLayout>
but if you want to use LinearLayout you have to define orientation as horizontal
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_item3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/list_item"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true">
<TextView
android:id="#+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/quoteDevil"
android:textSize="21sp" />
<ImageView
android:layout_width="33dp"
android:layout_height="match_parent"
android:layout_marginRight="15dp"
android:src="#drawable/nextarrow" />
</LinearLayout>
U need to add orientation property to LinearLayout:
android:orientation="horizontal"
and change the width property from the inside elements from match_parent to wrap_content, if you put match_parent only show one element
Change
android:layout_width="match_parent"
For
android:layout_width="wrap_content"
Example
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_item3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
In RelativeLayout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView2"
android:layout_width="80dp"
android:layout_height="80dp"
app:srcCompat="#drawable/centra_crm" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/imageView2"
android:padding="5dp"
android:singleLine="true"
android:text="Title" />
</RelativeLayout>

ImageView getting very small under a linear layout

In one of my screens, I expect to acheive this kind of a layout
Highest importance being the images correctly scaled. These images i am giving are of adequate resolution and works fine on another fragment layout.
My layout.xml looks 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"
android:background="#drawable/stadiumbg"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/listview_item"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:orientation="vertical" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/title1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="70%"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="80%"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:orientation="vertical" >
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/title2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/listview_item"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vote" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Down Vote" />
</LinearLayout>
</LinearLayout>
Everything else is great. The drawable listview_item is something that has been given to provided rounded corners, and tested in a listview with the above said images. Perfectly fine.
But in this layout, both the images gets super downscaled. It is like this.
wasting all that space for no reason.
What I have tried:
adjustViewBounds set to false
Scaletype as fitXY
Any idea to get What I want?
Change the width and height of the ImageView. Instead of:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Use:
android:layout_width="200dp"
android:layout_height="200dp"
Change the numbers to fit what you want.

Categories

Resources