Develop Reference

ImageView not showing in linear layout that is inside a scrollview

I am trying to have two scrollable items inside my scrollview so I put a linear layout into the scroll view and inside the linear layout I put an imageview and a textview. The textview shows up but the imageview does not. What is the issue here?
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingStart="#dimen/layout_padding"
android:paddingEnd="#dimen/layout_padding"
tools:context=".MainActivity">
<TextView
android:id="#+id/name_text"
style="#style/NameStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/name"
android:textAlignment="center" />
<ImageView
android:id="#+id/star_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:contentDescription="#string/yellow_star"
app:srcCompat="#android:drawable/btn_star_big_on" />
<ScrollView
android:id="#+id/bio_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/profile_picture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/layout_margin"
android:contentDescription="#string/profile_picture"
tools:srcCompat="#mipmap/image" />
<TextView
android:id="#+id/bio_text"
style="#style/NameStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineSpacingMultiplier="1.2"
android:text="#string/bio" />
</LinearLayout>
</ScrollView>
</LinearLayout>

Solved: I was missing this line: app:srcCompat="#mipmap/image"
I feel dumb

Android Studio layer below each other while orientation is horizontal

doing this layer work and can't figure out how to put layers below ones I made when the android orientation is horizontal, it keeps pushing my layer to the outsidie I have a pics what I have done and how it has to look, if you have any ideas would be nice to hear, thank you in advance.How it has to look
and What I have done
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity2">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#FA0000" />
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#03ED0F" />
<TextView
android:id="#+id/blue"
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#0027C3"
/>
<TextView
android:layout_below="#id/blue"
android:layout_width="100dp"
android:layout_height="10dp"
android:background="#000000" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

If you are using
you should use these attribute to control the position
app:layout_constraintTop_toBottomOf
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toStartOf
app:layout_constraintTop_toRightOf
based on what it should look like, you can try
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/ll_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#FA0000" />
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#03ED0F" />
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#0027C3"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/ll_horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FA0000" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#03ED0F" />
<TextView
android:id="#+id/blue"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#0027C3"
/>
</LinearLayout>
it should look like this

Use 2 seperate LinearLayout one below other in root.
One for horigontal views. Second for vertical views.
And use weight_sum property in LinearLayout, along with weight property in child views to distribute child views eqally.

How to make Android xml Linerlayout at the bottom of the activity in Android Studio?

How do I make LinearLayout in Android Studio at the bottom of the page. The result from the code below
I want the highlighted darken layout to be at the bottom of the page.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainPage"
android:orientation="vertical"
android:background="#ffffff">
<Button
android:id="#+id/taptoscan"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/barcode"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tap to Scan"
android:fontFamily="#font/antic"
android:layout_gravity="center"
android:textSize="18sp"/>
<!--here is the layout i want to put at the bottom of the page-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:gravity="bottom">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RelativeLayout>
</LinearLayout>
In the above code I tried the below and did not worked.
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:gravity="bottom"

You can use RelativeLayout at the outside. Something like this, and then ADD new one LinearLayout after that.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
tools:context=".MainPage">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/taptoscan"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:background="#drawable/barcode" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/antic"
android:text="Tap to Scan"
android:textSize="18sp" />
</LinearLayout>
<!--here is the layout i want to put at the bottom of the page-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:gravity="bottom"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>

Use Frame Layout as base layout to do it in the best way, it's gonna work definitely
Just use layout_gravity="bottom" in the LinearLayout which you want at bottom and
Just like this :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="#ffffff"
android:orientation="vertical"
tools:context=".MainPage">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/taptoscan"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:background="#drawable/barcode" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/antic"
android:text="Tap to Scan"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>

The approach below would help you achieve your design specifications with zero overlappings. Basically, there are four key steps:
Change your root layout to a RelativeLayout.
Inside the RelativeLayout, add a LinearLayout that would contain your Button and your TextView.
Inside the same RelativeLayout, add the LinearLayout that you intend to pin to the bottom of the screen.
Make sure yoU set the first LinearLayout on top of the second by using the android:layout_above="" attribute.
Now, here's the code:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainPage">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
android:layout_above="#+id/bottomView">
<Button
android:id="#+id/taptoscan"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/barcode"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tap to Scan"
android:fontFamily="#font/antic"
android:layout_gravity="center"
android:textSize="18sp"/>
</LinearLayout>
<!--here is the layout i want to put at the bottom of the page-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/bottomView"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:gravity="bottom">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I hope this helps.

How to center a progressbar in screen

The progress bar is appearing on the left of the screen. I would want it centered, like in the example.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:gravity="center"
android:background="#drawable/semi_circle"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="50dp"
android:layout_gravity="center_horizontal"
android:id="#+id/relative">
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="visible" />
<LinearLayout android:layout_width="match_parent"
android:id="#+id/lilPolicy"
android:layout_height="match_parent"
android:layout_marginBottom="20dp">
</LinearLayout>

You should get the ProgressBar outside the ScrollView, because logically you can know the height of the ScrollView at Runtime, so you can't figure out where the ProgressBar will place until running your app.
So, get out the ProgressBar from the ScrollView, create another root layout, wrap both ProgressBar & ScrollView in it; I picked RelativeLayout as the root, you can decide another layout manager if you wish.
layout_centerInParent attribute is used to center a view within a RelativeLayout
<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:background="#drawable/semi_circle"
android:gravity="center">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp">
<LinearLayout
android:id="#+id/lilPolicy"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp">
</LinearLayout>
</RelativeLayout>
</ScrollView>
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="visible" />
</RelativeLayout>
Note: I don't know what you're going to accomplish, so I left android:background="#drawable/semi_circle in the root layout

Inside your scrollView
Using RelativeLayout:
<?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">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
Using ConstraintLayout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Add ConstraintLayout to your project, Build a Responsive UI with ConstraintLayout
You can easily implement it.
The way I would have done it is:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/item_1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_above="#id/item_2"
android:background="#0000FF"
android:layout_marginTop="10dp"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/item_2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_below="#id/item_1"
android:background="#FF0000"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#id/item_1" />
<LinearLayout
android:id="#+id/item_3"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_below="#id/item_2"
android:background="#FFFF00"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#id/item_2" />
</android.support.constraint.ConstraintLayout>
>
</ScrollView>
</android.support.constraint.ConstraintLayout>

If you have used relative layout as a parent layout . so we need to add this attribute android:layout_centerInParent="true" to align view in parent center. and scroll view by default remove extra spacing in view . add android:fillViewport="true" to make scroll view match parent
Try this code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:gravity="center"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="50dp"
android:layout_gravity="center_horizontal"
android:id="#+id/relative">
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="visible" />
<LinearLayout android:layout_width="match_parent"
android:id="#+id/lilPolicy"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
</ScrollView>

use android:layout_centerInParent="true" as you are using RelativeLayout.

Android Imageview on top of LinearLayout

I want to display an image on top of linearlayout
I have tried wrapping it in Framelayout and Relative layout but it doesn't seem to work.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/cricle" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="20dp"
android:background="#color/blue"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:gravity="center"/>
</LinearLayout>
</FrameLayout>

You can use ConstraintLayout for this. You'll have to add a constraint to the LinearLayout for its top, depending on what else you have in there.
<?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">
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#ffffff80"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#drawable/your_drawable"
app:layout_constraintBottom_toTopOf="#id/linear_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/linear_layout" />
</android.support.constraint.ConstraintLayout>

make your relative layout width match_parent and set margin top for linear layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="#color/blue"
android:orientation="vertical"
android:padding="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/cricle"/>
</RelativeLayout>

Try to use match_parent and layout_marginTop
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#aaaaaa"
android:orientation="vertical"
android:padding="20dp"
android:layout_marginTop="70dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:gravity="center"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_gravity="center_horizontal"
android:src="#drawable/circle" />
</RelativeLayout>
</FrameLayout>