Ways to allocate space between a parent container and a child view group

Is there a way to build a layout with an image that covers 90% of the screen height, leaving the last 10% for three text views arranged horizontally without explicitly setting the height of the image? I have tried using layout_weight without success. Here is my end goal screenshot screenshot.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical"
    android:weightSum="2">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="500dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/martin" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <TextView
            android:text="Martin garrix"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <TextView
            android:text="Believe"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Imagine!!" />
    </LinearLayout>
</LinearLayout>

Answer №1

To properly set up your layout, you need to use android:height="0dp" and android:layout_height="9" for the image container, and android:layout_height="1" for the other container. Additionally, make sure the weightSum is set to 10. You can refer to examples of layout_weight at

   <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:orientation="vertical"
        android:weightSum="10" >

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="0dp"
            android:layout_weight="9"
            >

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:srcCompat="@drawable/martin" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            >

            <TextView
                android:text="Martin garrix"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                  />

            <TextView
                android:text="Beleive"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                 />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Imagine!!" />
        </LinearLayout>
    </LinearLayout>

Answer №2

To achieve this layout without having to use multiple weight values, you can follow the code snippet below:

<?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="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/descripcion_actividad"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/layout"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher"

        />

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:padding="10dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <TextView
            android:id="@+id/hora_inicio"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/descripcion_actividad"
            android:layout_alignParentBottom="false"
            android:layout_alignStart="@+id/descripcion_actividad"
            android:layout_below="@+id/descripcion_actividad"
            android:layout_weight="1"
            android:text="TextView" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/descripcion_actividad"
            android:layout_alignParentBottom="false"
            android:layout_alignStart="@+id/descripcion_actividad"
            android:layout_below="@+id/descripcion_actividad"
            android:layout_weight="1"
            android:text="TextView" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/descripcion_actividad"
            android:layout_alignParentBottom="false"
            android:layout_alignStart="@+id/descripcion_actividad"
            android:layout_below="@+id/descripcion_actividad"
            android:layout_weight="1"
            android:text="TextView" />

    </LinearLayout>


</RelativeLayout>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing the Dropdown Menu with Jquery

Looking for a way to create a reusable dropdown menu using css/jquery? Check out this codepen: https://codepen.io/anon/pen/NxXXPg Is there a method to reset the 'active' status when clicking on a blank space or another html element? Here's ...

Troubleshooting IE7's width problem with dynamic JQUERY data tables

We recently developed a JQUERY table that can dynamically adjust its columns based on the count value, and placed it in a DIV tag. Unfortunately, in IE7, we are encountering an issue where the thead and tbody elements are extending beyond the boundaries of ...

The reverse styling of text does not seem to be effective

Here is the theme configuration I am currently using: <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> ...

Trouble organizing a collection of destinations based on their geolocation and proximity

To address this issue, my approach has been to feed variables into the value attributes of an option list and then sort it based on these values. When manually assigning values, everything works smoothly, for example: <option id="link1" value="1">A& ...

Why does IE make elements disappear when rotated 90 degrees in CSS3?

Why is Image 2 not visible in IE when transformed 90 degrees with some perspective? It works fine in other browsers, but IE always keeps you guessing for hours for no reason. Html : <body> <div class="scene"> <div cl ...

What is the best way to add a centered progress spinner on top of an overlay?

Here is a code snippet that includes functionality to append a site overlay as needed. I am currently trying to implement the feature of also displaying an image progress spinner in the center of the screen over the overlay. I would prefer if this spinner ...

Ensure that the text input box is positioned at the bottom of the chatbox and enable scrolling

Is there a way to make the textbox stay fixed at the bottom of the chatbox, regardless of how many messages are present? Currently, it appears after the last message. Additionally, I would appreciate assistance in implementing a scroll feature that automat ...

Adjustment of Facebook button positioning in floating bar on Firefox

My floating bar currently has 5 social buttons, but I've noticed that the Facebook button is shifting about 20 pixels to the left. Could this be an issue with the CSS elements? After inspecting the elements, I found that when I remove position: absol ...

Using Selenium WebDriver to access values from the build.properties file and utilize them in another property file

Currently, I am working with Eclipse and Selenium WebDriver. In my project, I have set a URL to the variable 'webdriver.url' in the build.properties file. Additionally, I have created another property file named 'ExpectedResults.properties&a ...

Java's .stream() operation does not retain the sorting of List<> when using .toList(), resulting in blank output

-- I'm trying to use the method .stream() in order to filter a List based on the user's choice of name initials and display it, but I am facing an issue where the sorted list is only printing white space. It seems like the sorting is not being re ...

Would you like to store modified CSS properties in a cookie?

Currently, I am facing a challenge while working on an ASPX page where CSS is used to define DIV properties. Although these properties can be altered on the page, they do not reflect when attempting to print them. Is there a method to modify CSS properties ...

Conversation: darken all areas except for a specific zone

A part of my app showcases an image within a dialog box. When the user taps the button, the dialog pops up and occupies 80% of the screen. The default behavior of the Android Dialog dims the background behind it. Dialog dialog = new Dialog(ActQuiz.this); ...

Tips for integrating SASS from the Bulma package into an Angular application

I'm currently working on implementing Bulma into my project. The documentation suggests using NPM to obtain it. yarn add bulma Further in the documentation, there is an example provided with code snippets like the ones below. <link rel="styles ...

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed opti ...

Creating responsive divs on my webpage

Although I have browsed through various posts with similar questions, none of the solutions seem to work for me. I will make sure to include all relevant information related to my issue and explain why I am unable to resolve it on my own. Currently, I am ...

Tips for successfully loading images and text in multiple GridViews without encountering an out-of-memory error

I am facing an issue with my layout which contains 12 GridViews. I have a total of 150 images that need to be loaded into these GridViews, with each GridView containing around 12 images. Loading images and texts into 2 of the GridViews works fine, but when ...

Finding the URL link within a parent class - what you need to know

I need to extract all the href links from a specific parent class structure, illustrated as follows: <div class="parentClass"> <article class="className"> <a href="link1"> </a> </article> <article clas ...

Strategies for Managing Buttons on Widgets

I recently started working with widgets and found a helpful tutorial online. I was able to run the example perfectly, but when I attempted to customize it, I ran into some challenges. My main issue is that I'm trying to change the image displayed on ...

The functionality of Intersection Observer causes text to appear over the header

Hey everyone, I've been working on a scrolling animation to make text appear when it's at least 50% visible. So far, I have an animated header with an Onscroll Event and Intersection Observer for the text. It's all working well, except for ...

transferring information to a jsp webpage through ajax and displaying its contents

Is there a way to send data to a jsp page using the method below and also display the data to the user on the same page (test.jsp)? I want to open the page test.jsp while sending data with this method. How can I achieve this? function EditRule(i){ var u ...