Horizontal LinearLayout not showing any elements after nested Vertical LinearLayout - android

Following the Udacity Android for Beginners course, I want to add an audio icon button to a list_item view. Now the list_item.xml has a parent Horizontal Linear Layout and a nested Vertical Linear Layout. The course instructor added the audio icon by changing to a Relative Layout but i want to see how I could do this with a Linear Layout.
<?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="wrap_content"
android:background="#color/tan_background"
android:minHeight="#dimen/list_item_height"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="#dimen/list_item_height"
android:layout_height="#dimen/list_item_height"/>
<LinearLayout
android:id="#+id/text_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="16dp">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#android:color/white"
android:textStyle="bold"
tools:text=""/>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:textColor="#android:color/white"
tools:text=""/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/baseline_play_arrow_white_24"/>
</LinearLayout>
My problem now is that when i add any element after the nested Vertical Linear Layout, nothing will show. I'm trying different things but I just can't understand. All i can think of is that this is the cause:
android:layout_width:"match_parent"
Please let me know how i can add the audio icon to the right and in the center while keeping this a LinearLayout.
This is the output i am trying to achieve

<?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/apptool"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#android:drawable/btn_star"
android:tint="#color/black"
android:background="#ebed54"
android:layout_weight=".1"/>
<LinearLayout
android:id="#+id/text_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorPrimary"
android:layout_weight=".3"
android:paddingLeft="16dp">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#android:color/white"
android:textStyle="bold"
tools:text="sdfdsfdsf"/>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:textColor="#android:color/white"
tools:text="sdfdsfdsf"/>
</LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".1"
android:background="#color/colorPrimary"
android:src="#android:drawable/ic_media_play"/>
</LinearLayout>
</LinearLayout>
output

You make width of linear layout match_parent so it consumes all remain place so you need to first change match_parent to wrap_content like below :
<?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="wrap_content"
android:background="#color/tan_background"
android:minHeight="#dimen/list_item_height"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="#dimen/list_item_height"
android:layout_height="#dimen/list_item_height"/>
<LinearLayout
android:id="#+id/text_container"
android:layout_width="wrap_conten"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="16dp">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#android:color/white"
android:textStyle="bold"
tools:text=""/>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:textColor="#android:color/white"
tools:text=""/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/baseline_play_arrow_white_24"/>
</LinearLayout>

Related

How place overlay imageview on two layouts?

I want to build the following screen which contains app logo, success/failure icon image, information message and ok button.
Here this the code. I am using linear layout to achieve this.
<LinearLayout
android:id="#+id/statusLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#android:color/white"
android:weightSum="2"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/statusTopRelativeLayout"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/client_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/no_image_description"
android:src="#drawable/client_logo"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/statusBottomRelativeLayout"
android:background="#android:color/holo_blue_light"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/statusText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/statusText"
android:textSize="50sp"/>
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/statusText"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:clickable="true"
android:focusable="true"
android:onClick="goToHomeScreen"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#string/ok"
android:textColor="#ffffff"
android:textSize="40sp"/>
</RelativeLayout>
How to place success/failure icon image on top of the two layouts?
You can use constraint to make it easy
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:id="#+id/center"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/center"
android:background="#ffffff"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#00ffff"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff8801"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="#id/center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
Output:
Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nilu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:orientation="vertical"
android:paddingBottom="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
<LinearLayout
android:id="#+id/nilu2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/nilu"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>
</RelativeLayout>
OUTPUT
Parent RelativeLayout
add child LinearLayout as fillParent and assign weightsum 2. add two
layouts with 1 weight each. (add individual implementation for each
layout according to your requirements.)
add second child in relative
layout as imageview/button for that good sign and set it center in
parent.
This will fix your problem

Equal vertical spacing in linear layout not working

Running the below code in ANDROID studio is not giving me the desired result: Please help? I would like the 3 TextViews to be equally spaced out vertically in the screen of the device.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Debanshu"
android:textSize="24sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Chakraborty"
android:textSize="24sp"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Voltas"
android:textSize="24sp"
android:layout_weight="1"/>
</LinearLayout>
I believe you want this (added gravity just for the fun of it):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Debanshu"
android:gravity="center"
android:textSize="24sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Chakraborty"
android:textSize="24sp"
android:gravity="center"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Voltas"
android:textSize="24sp"
android:gravity="center"
android:layout_weight="1"/>
</LinearLayout>
As you LinearLayout height equal to wrap_content its working but as height wrapping view you are not getting desired view
try below making LinearLayout height equal to match_parent
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Debanshu"
android:textSize="24sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Chakraborty"
android:textSize="24sp"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Voltas"
android:textSize="24sp"
android:layout_weight="1"/>
</LinearLayout>
you can try this its work for me
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Debanshu"
android:background="#ffa905"
android:textSize="24sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Chakraborty"
android:textSize="24sp"
android:background="#ffffff"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Voltas"
android:textSize="24sp"
android:background="#008000"
android:layout_weight="1"/>
enjoy!!!

How to set Layout weight for Widgets in android?

Hi I am very new for android and in my app I want to set Textviews like my below image and for this I wrote the code below, then all Textviews widths become equal.
But I want to set Textviews like my below image.
Please help me.
code:-
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Color"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text=":"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
/>
</LinearLayout>
</LinearLayout>
You need to pass weightSum to Root layout.
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Color"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text=":"/>
<TextView
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
/>
</LinearLayout>
</LinearLayout>
A 2:1:7 ratio might work better
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Color"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text=":"/>
<TextView
android:layout_width="0dp"
android:layout_weight="7"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
/>

wrap_content leaving extra white space at bottom of screen for ViewPager

enter image description here
Wrap_content inside 2nd linearlayout leaving the extra white space at bottom of screen but if give hardcoded value it's working fine. any issue with wrap_content ? Here I am using this .xml on viewPager anyone have idea about this issue.
<?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"
android:background="#drawable/white_noround">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/canceledPesananTgl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABCDEFGHI"
android:textSize="14sp"
android:padding="10dp"
android:textStyle="bold"
android:textColor="#999999"
android:fontFamily="sans-serif-light"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="-15dp"
android:text="29 JAN 2016"
android:textSize="14sp"
android:padding="10dp"
android:textStyle="bold"
android:textColor="#999999"
android:id="#+id/canceledDate"
android:fontFamily="sans-serif-light"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical"
android:visibility="visible"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/image_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".9"
android:orientation="vertical"
android:layout_marginLeft="10dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/canceled_dummuyImage1"
android:background="#drawable/imageview_border"
android:layout_gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:src="#drawable/empty_photo"/>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/canceled_dummuyImage2"
android:background="#drawable/imageview_border"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:src="#drawable/empty_photo"/>
<LinearLayout
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_marginTop="20dp"
android:background="#drawable/imageview_border">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/canceledImage"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:src="#drawable/empty_photo"/>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight=".4"
android:paddingBottom="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SONY Memory Card Playstation 2"
android:textSize="16sp"
android:id="#+id/productName"
android:fontFamily="sans-serif-light"
android:textColor="#333333"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:id="#+id/productStatus"
android:textSize="14dp"
android:text="Dalam pengiriman"
android:textStyle="normal"
android:fontFamily="sans-serif"
android:textColor="#f7931e"/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
The Problem is here. see this Parent LinearLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight=".4"
android:paddingBottom="10dp">
In this You have used android:paddingBottom="10dp" so the child' element work fine but The Extra white Space is for it's parent layout to Solve your problem remove android:paddingBottom="10dp" line.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical"
android:visibility="visible"
>
in the above linear layout instead of layout_height as 150dp try giving wrap_content
What I was doing with above .xml was to populate list of items using listView on ViewPager. So the above .xml is listItem .xml so we should always go with below code.This line worked for me android:layout_height="wrap_content".
<?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="wrap_content"
android:background="#drawable/white_noround"/>

Prevent recycler view from taking up whole space

I am using RecyclerView in a fragment and have set it's height to wrap_content and with a button below it. But the problem is RecyclerView takes up the whole space and button is not visible. What is going wrong?
This is my xml file -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="17sp"
android:layout_marginTop="20dp"
android:visibility="gone"
android:text="You haven't added any names yet!"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/names_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"/>
<Button
android:id="#+id/add_name"
android:layout_width="203dp"
android:layout_height="wrap_content"
android:layout_below="#+id/recycler_view"
android:padding="15dp"
android:textColor="#F3F3F3"
android:textSize="17sp"/>
</LinearLayout>`
You should set weight to the RecyclerView and change the height to 0dp
<android.support.v7.widget.RecyclerView
android:id="#+id/names_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical"/>
Wrap the RecyclerView and the Button in a LinearLayout, than add
android:layout_height="0dp"
android:layout_weight="1"
to RecyclerView.
Your code should look like:
<?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="#fff"
android:orientation="vertical">
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="You haven't added any names yet!"
android:textSize="17sp"
android:visibility="gone"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_alignParentEnd="true"
android:layout_below="#+id/empty_view"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/names_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical"/>
<Button
android:id="#+id/add_name"
android:layout_width="203dp"
android:layout_height="wrap_content"
android:layout_below="#+id/recycler_view"
android:padding="15dp"
android:textColor="#F3F3F3"
android:textSize="17sp"/>
</LinearLayout>
</LinearLayout>

Categories

Resources