This question already has answers here:
Center-align items in Gridview
(2 answers)
Closed 4 years ago.
I have a dynamic GridView which is supposed to display data fetched from the server. The length of this data is variable. I have set android:numColumns="4". Now, if the length of the data is divisible by 4, then my layout looks like:
which is how it's supposed to be. But, if the length of the data is not divisible by 4 but is even (of the form 4k+2), then the layout looks like:
I had a look at this StackOverflow question and a lot of people suggested insertion of dummy elements to trick the GridView into leaving empty space. This seemed like a hack but I did achieve the layout I wanted:
Now, the problem arises when the length of the data is odd. The layout I get by default looks like:
What I would like is to get something like this:
Notice that the previous workaround will not work here since there isn't a complete extra cell where a dummy could be inserted.
One solution I could come up with was to change the number of columns to 7 and replace every alternate cell with a dummy node, except for the last row where the first cell is a dummy too. This gave me something like:
Even after getting rid of the horizontalSpacing, these cells are too far apart, and the code readability has been severely compromised. Now, I am not looking for workarounds where the size of dummy cells could be reduced. Instead, I would like to get rid of the dummy cells as well because that's not an efficient way to do this, in my opinion.
I have gone through the documentation for GridView where I could not find anything related to my problem. I have also looked at this and this StackOverflow questions in addition to the one linked above but none of them seem to have a valid answer. I also found this GitHub repository where the author claims to have fixed this, but I could not reproduce it.
I would be happy to provide code snippets from my project, but I don't think they'll be useful because:
I'm looking for a generic solution, not specific to my particular case.
My project is not as simple as placing alphabets in a GridView and it includes a lot of extra details which are not relevant to this problem and hence have been removed in order to avoid confusion.
Below linear layout file dynamically changes like the grid layout. You can try this when grid layout is not supported for your requirement. You can find the pattern and create any kind of alignment with this weightSum and layout_weight attribute which are dynamically changing according to android devices.
**I removed some android:layout_width="match_parent"
android:layout_height="match_parent" attributes in this code because maximum word count exceeds. please put this two attribute in all missing places in linear layout tags.
<?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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="6">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="5">
<!-- first row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:weightSum="5">
<LinearLayout
android:orientation="vertical"
android:layout_weight="4">
<!-- second row -->
<LinearLayout
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="3">
<!-- third row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="vertical"
android:layout_weight="2">
<!-- fourth row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<!-- fifth row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<!-- sixth row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="2"
android:background="#color/colorPrimaryDark">
<!-- first column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="U"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:background="#color/colorAccent">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="V"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:background="#color/colorPrimary">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="W"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Related
I am using a RatingBar in my app and assigning Numbers for Stars for the ease of user but alignment of these Numbers change whenever the device is changed. Although i've used different layouts for different screens but still on some mobile it is not formatting well.
What i want
what's showing on some mobiles
Use constraint layout as a parent and fit a linear layout. That should work fine.
<?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">
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="38dp"
tools:layout_editor_absoluteY="192dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/ratingBar"
app:layout_constraintEnd_toEndOf="#+id/ratingBar"
app:layout_constraintStart_toStartOf="#+id/ratingBar">
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:text="1"
android:textAlignment="center" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:text="2"
android:textAlignment="center" />
<TextView
android:id="#+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:text="3"
android:textAlignment="center" />
<TextView
android:id="#+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:text="4"
android:textAlignment="center" />
<TextView
android:id="#+id/textView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:text="5"
android:textAlignment="center" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Use below type of dynamically changin layout. I added example below. You can add your elements for relevent columns. It will change according to device
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tempo_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<!-- first row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="7">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="5">
<!-- first column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="2"
android:weightSum="5">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="4">
<!-- second column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="3">
<!-- third column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="2">
<!-- fourth column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- fifth column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- sixth column (name) -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<!-- second row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="7">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="5">
<!-- first column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="2"
android:weightSum="5">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="4">
<!-- second column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="3">
<!-- third column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="2">
<!-- fourth column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- fifth column (name) -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- sixth column (name) -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I would like to have a tablellayout with 3 rows and 4 columns.
The first two rows are ok but the last one is far too small then the others.
I tried it with a 5.5 screen size phone (Samsung Galaxy Note 2), where the rows are almost the same height, but on a 9.6 inch tablet (Samsung Galaxy Tab E), the last row is very small. What am I doing wrong?
I have also attached my Layout file and a screenshot with the actual layout.
My code:
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/domestic"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="5sp"
android:gravity="center"
android:background="#drawable/rounded_corner_start">
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:measureWithLargestChild="true"
android:stretchColumns="*">
<!-- Row with 4 columns -->
<TableRow
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
<!--Kutya-->
<LinearLayout
android:id="#+id/lnDog"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="3sp"
android:orientation="vertical"
android:background="#drawable/rounded_corner_elements"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:src="#drawable/dog"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fontFamily="sans-serif-thin|bold"
android:text="#string/dog"
android:gravity="center"
android:layout_weight="0.2" />
</LinearLayout>
<!--Macska-->
<LinearLayout
android:id="#+id/lnCat"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="3sp"
android:orientation="vertical"
android:background="#drawable/rounded_corner_elements"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:src="#drawable/cat2"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fontFamily="sans-serif-thin|bold"
android:text="#string/cat"
android:gravity="center"
android:layout_weight="0.2" />
</LinearLayout>
<!--Diszno-->
<LinearLayout
android:id="#+id/lnPig"
android:layout_width="0dp"
android:layout_margin="3sp"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/rounded_corner_elements"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:src="#drawable/pig"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fontFamily="sans-serif-thin|bold"
android:text="#string/pig"
android:gravity="center"
android:layout_weight="0.2" />
</LinearLayout>
<!--Tyuk-->
<LinearLayout
android:id="#+id/lnChicken"
android:layout_width="0dp"
android:layout_margin="3sp"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/rounded_corner_elements"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:src="#drawable/chicken"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fontFamily="sans-serif-thin|bold"
android:text="#string/chicken"
android:gravity="center"
android:layout_weight="0.2" />
</LinearLayout>
</TableRow>
....
4 times
</TableLayout>
</LinearLayout>
</LinearLayout>
So, finally I figured it out that all images should have the same height, and then all rows have the same height. It's strange because I would have expected that by setting the tablerow's weight the inner content would automatically resize itself.
I'm trying to create a responsive layout using weights but I also need to use a scroll view in this case.
This is my code at this moment:
<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=".EncyclopediaFragment">
<!--Linear Container-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<!--Title Box-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:orientation="horizontal"
android:weightSum="100">
<!--Empty Space-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5">
</LinearLayout>
<!--Text Box-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="95">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/encyclopedia_mosntersLabel"
android:gravity="center"
android:textAlignment="viewStart"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40">
</LinearLayout>
</LinearLayout>
but it needs to be like this.
That layout is suppose to be responsive with weights but at the same time I need to make it possible to scroll.
So my question is: how can I create a layout responsive with weights and at the same time a layout that can scroll down, just like in the picture?
If you have a determined number of 6 Monsters and 8 Towers, here is how you should organize your layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Monsters"/>
<!-- the following LinearLayout should be repeated twice for 6 Monsters -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
...
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Towers"/>
<!-- the following LinearLayout should be repeated twice for 6 Towers -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
...
<!-- attention here for two Towers in the last row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
The content inside your ScrollView should use wrap_parent, and if you want to stretch the content inside it set android:fillViewport="true". Try this:
<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=".EncyclopediaFragment">
<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">
<!--Linear Container-->
</RelativeLayout>
</ScrollLayout>
</RelativeLayout>
<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=".EncyclopediaFragment">
<!--Toolbar-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Linear Container With Weights-->
</RelativeLayout>
</ScrollLayout>
</RelativeLayout>
I am newbie to android development and learning it to my own. I have a very strange problem of having strange space that comes in between every item of my recycler view. I have the following:
My recycler view is vertical with grid view layout of 2 spans(columns). What I have been trying is:
Code for 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="wrap_content"
android:layout_marginLeft="#dimen/size_five"
android:layout_marginRight="#dimen/size_five"
android:layout_marginTop="#dimen/size_fifteen"
android:background="#color/blackColor"
android:clickable="true"
android:focusable="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
<ImageView
android:id="#+id/album_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blackColor"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/lowerline"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15"
android:background="#color/hotpinkColor"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/size_ten">
<TextView
android:id="#+id/album_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="left"
android:text="Album Title"
android:textColor="#color/whiteColor"
android:textSize="#dimen/size_eight"
android:textStyle="bold"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/size_ten"
android:layout_weight="5"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/downloader"
android:layout_width="#dimen/size_thirty_six"
android:layout_height="#dimen/size_thirty_six"
android:layout_centerInParent="true"
android:src="#drawable/donwloaderimager"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/setteraswall"
android:layout_width="#dimen/size_fourty"
android:layout_height="#dimen/size_fourty"
android:layout_centerInParent="true"
android:src="#drawable/setteras"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Screen Shot
The Black space is showing the extra strange space that I want to remove.
Change:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
<ImageView
android:id="#+id/album_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blackColor"
/>
</LinearLayout>
to
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
<ImageView
android:id="#+id/album_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blackColor"
/>
</LinearLayout>
That is change the height of the second parent linear layout to wrap_content
I'm trying to design something like that :
Currently i'm having issue putting the button at "the middle" of the two layouts reunion point. Is there a way i do this ?
Thanks.
Here is a way to do it
<?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:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#FF0000">
<!-- TO ADD CONTENT HERE -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#FFFF00"
android:weightSum="0.5">
<!-- TO ADD CONTENT HERE -->
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#000000"
android:text="TEST"
android:textColor="#FFFFFF"/>
</RelativeLayout>
OUTPUT:
You can change the layout height from android:layout_weight="0.5"
you can use RelativeLayout for your parent and try adding twoLinearLayouts , one below another and set their heights, now place a Button in your RelativeLayout and set android:layout_centerInParent="true" for your Button .
and if you want to use weight for layouts, instead of adding two LinearLayout to your RelativeLayout, add one LinearLayout with weightSum=100 and then add two LinearLayouts to it with custom weights.
for your case , you have to do sth like this :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:background="#f00" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80"
android:background="#0f0" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="test" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>