Android LinearLayout overlapping imageView - android

I am trying to use a cardview to have an imageview and to the right of it a linearlayout, the problem i am having is the linearlayout is getting drawn on top of my imageview.
I am using a listview to get items and display each item on the menu.
The blue square is my linearlayout, the image is the highlighted part
axml code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="8dp"
android:layout_margin="5dp"
android:background="#drawable/listitemshadow"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">
<ImageView
android:id="#+id/menuItemImageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="5dp"
android:src="#drawable/picking" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dip">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_marginLeft="0.0dp">
<TextView
android:id="#+id/menuItemNameTextView"
android:layout_width="200dp"
android:textSize="16dp"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:layout_alignParentLeft="true"
android:textStyle="bold"
android:gravity="left" />
<TextView
android:id="#+id/shortDescriptionTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:textSize="12dp"
android:textColor="#android:color/black"
android:layout_below="#+id/menuItemNameTextView" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

You should use RelativeLayout otherwise you will have to use too many layouts that are bad for performance. And also don't use cardView as a parent because it will overlap the elements. Use it inside a RelativeLayout or a constraintLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/listitemshadow"
android:padding="8dp">
<ImageView
android:id="#+id/menuItemImageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="5dp"
android:src="#drawable/picking" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/menuItemImageView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical"
android:paddingLeft="10dip">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0.0dp"
android:paddingLeft="10dip">
<TextView
android:id="#+id/menuItemNameTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:textColor="#android:color/black"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:id="#+id/shortDescriptionTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/menuItemNameTextView"
android:gravity="left"
android:textColor="#android:color/black"
android:textSize="12dp" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

don't use card view as the main layout, always use another layout inside cardview because cardview works as frame layout, the whole thing put under another layout and that layout should under cardview
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:background="#drawable/ic_launcher_background"
android:padding="8dp"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/menuItemImageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:background="#color/colorPrimary"
android:padding="5dp"
android:src="#drawable/ic_launcher_foreground" />
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/menuItemImageView"
android:background="#color/colorAccent"
android:orientation="vertical"
android:paddingLeft="10dip">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0.0dp"
android:paddingLeft="10dip">
<TextView
android:id="#+id/menuItemNameTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:textColor="#android:color/black"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:id="#+id/shortDescriptionTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/menuItemNameTextView"
android:gravity="left"
android:textColor="#android:color/black"
android:textSize="12dp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>

Try putting your linearlayout and image in another horizontal linearlayout instead of putting them directly inside cardview.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="8dp"
android:layout_margin="5dp"
android:background="#drawable/listitemshadow"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/menuItemImageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="5dp"
android:src="#drawable/picking" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dip">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_marginLeft="0.0dp">
<TextView
android:id="#+id/menuItemNameTextView"
android:layout_width="200dp"
android:textSize="16dp"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:layout_alignParentLeft="true"
android:textStyle="bold"
android:gravity="left" />
<TextView
android:id="#+id/shortDescriptionTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:textSize="12dp"
android:textColor="#android:color/black"
android:layout_below="#+id/menuItemNameTextView" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

In the card view, use a list view.
After that, make a custom layout for the list item i.e, make an XML file for the list item layout. After that create a custom adapter for adapting the list item to the list layout in the card view.
You can take the reference from this video:-
https://youtu.be/A-_hKWMA7mk

Related

Button height custom list view

I'm trying to create a custom listview with 4 columns. Everything works fine, except for the height of each row, it's too big.
Here the result I have:
The problem comes from my button, because android take a weird height, that doesn't match the height of my image (I already check my image and it have the right proportion).
Here an example:
And I would like the "zone" of my image to just be the size of my image.
Here's my code:
<?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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<TextView
android:id="#+id/txtAudioNom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="17sp"
android:textColor="#color/black"
android:layout_weight="25"
android:text="Audio 1"/>
<TextView
android:id="#+id/txtAudioDate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="17sp"
android:textColor="#color/black"
android:layout_weight="18" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginEnd="10dp"
android:layout_weight="29">
<ImageView
android:id="#+id/imgAudioNote"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/icon_star"
app:tint="#color/purple_500"
android:contentDescription="#string/txt_content_desc"/>
<TextView
android:id="#+id/txtAudioNote"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20sp"
android:textColor="#color/white" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginEnd="5dp"
android:layout_weight="29">
<ImageButton
android:id="#+id/btnAudioPlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:gravity="center"
android:background="#android:color/transparent"
android:src="#drawable/icon_play"
app:tint="#color/purple_500"
android:contentDescription="#string/txt_content_desc" />
</RelativeLayout>
</LinearLayout>
If you have any idea on how I can change that, thank you
EDIT:
I found a solution, I needed to add this line of code to my ImageButton:
android:adjustViewBounds="true"
Needed changes:
wrap_content all the views.
android:layout_centerInParent="true" the txtAudioNote
Extra:
No need to the RelativeLayout at the bottom.
<?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="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:id="#+id/txtAudioNom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="25"
android:gravity="center"
android:text="Audio 1"
android:textColor="#color/black"
android:textSize="17sp" />
<TextView
android:id="#+id/txtAudioDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="18"
android:gravity="center"
android:textColor="#color/black"
android:textSize="17sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_weight="29"
android:gravity="center">
<ImageView
android:id="#+id/imgAudioNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
app:src="#drawable/icon_star"
android:contentDescription="#string/txt_content_desc"
app:tint="#color/purple_500" />
<TextView
android:id="#+id/txtAudioNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#null"
android:gravity="center"
android:text="4"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
<ImageButton
android:id="#+id/btnAudioPlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:layout_weight="29"
android:background="#android:color/transparent"
android:gravity="center"
android:scaleType="fitCenter"
android:contentDescription="#string/txt_content_desc"
android:src="#drawable/icon_play"
app:tint="#color/purple_500" />
</LinearLayout>
He has found a solution which he states in the EDIT:
android:adjustViewBounds="true"
But I want to add for those who want to do it programmatically.
//add in onCreate
view.setAdjustViewBounds(true);

Use layout as background of another layout

Couldn't find this even though seems simple.
My question is simple, I have the following login layout:
<?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=".SignupActivity"
android:orientation="vertical"
android:background="#android:color/transparent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sign Up"
android:textSize="48sp"
android:textColor="#color/white"
android:layout_gravity="center"
android:paddingTop="30dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All fields are required."
android:layout_gravity="center"
android:paddingTop="100dp"/>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
app:cardElevation="20dp"
app:cardCornerRadius="15dp"
android:layout_gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Username"
android:layout_gravity="center"
android:id="#+id/usernametext"
android:padding="15dp"
android:ems="10"
android:textAlignment="center"/>
<EditText
android:id="#+id/passwordtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:layout_gravity="center"
android:padding="15dp"
android:inputType="textPassword"
android:textAlignment="center"/>
<EditText
android:id="#+id/emailtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:padding="15dp"
android:hint="Email"
android:textAlignment="center"
android:inputType="textEmailAddress" />
</LinearLayout>
</android.support.v7.widget.CardView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_gravity="center"
android:layout_marginTop="50dp"
android:id="#+id/submitButton"/>
</LinearLayout>
And I made another layout with just takes an ImageView and put it to the center with certain alpha.
<?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:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/mtrigenicon"
android:alpha="0.25"
android:scaleX="3"
android:scaleY="3" />
</RelativeLayout>
Question is, It is possible to use the second layout as background of the first?, I mean, to use the ImageView below all the EditText and TextViews of the first layout, even integrating the ImageView on the first layout can work as a solution, but I don't know how to make it to be on the background and below all the other objects.
First you can include the imageview directly as background of login layout. Otherwise if you want to use second layout as background for any layout you can use <include tag in android xml.
Simply set your root layout to FrameLayout in which layout you want include background layout.
Like this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#android:color/transparent">
<include
layout="#layout/activity_background" /> //Here is the include part. Below as same as previous.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sign Up"
android:textSize="48sp"
android:textColor="#android:color/white"
android:layout_gravity="center"
android:paddingTop="30dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All fields are required."
android:layout_gravity="center"
android:paddingTop="100dp"/>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
app:cardElevation="20dp"
app:cardCornerRadius="15dp"
android:layout_gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Username"
android:layout_gravity="center"
android:id="#+id/usernametext"
android:padding="15dp"
android:ems="10"
android:textAlignment="center"/>
<EditText
android:id="#+id/passwordtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:layout_gravity="center"
android:padding="15dp"
android:inputType="textPassword"
android:textAlignment="center"/>
<EditText
android:id="#+id/emailtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:padding="15dp"
android:hint="Email"
android:textAlignment="center"
android:inputType="textEmailAddress" />
</LinearLayout>
</android.support.v7.widget.CardView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_gravity="center"
android:layout_marginTop="50dp"
android:id="#+id/submitButton"/>
</LinearLayout>
</FrameLayout>
activity_background.xml (Same as your layout)
<?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:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/canoe_water_nature_480_670"
android:alpha="0.25"
android:scaleX="3"
android:scaleY="3" />
OUTPUT
Yes, it is possible. Try using this layout.
In xml views are drawn in the order you put them, so just put the image view first, and draw the linear layout on top. Like this:
<?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">
<ImageView
android:layout_width="wrap_content"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/mtrigenicon"
android:alpha="0.25"
android:scaleX="3"
android:scaleY="3" />
Put your linear layout here
<LinearLayout></LinearLayout>
</RelativeLayout>
Instead of LinearLayout use RelativeLayout in your first layout and add your ImageView to it.
<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=".SignupActivity"
android:background="#android:color/transparent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:src="#drawable/mtrigenicon"
android:alpha="0.25"
android:scaleX="3"
android:scaleY="3" />
<TextView
android:id="+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sign Up"
android:textSize="48sp"
android:layout_below="id/your_imageview_id"
android:textColor="#color/white"
android:layout_gravity="center"
android:paddingTop="30dp"/>
<TextView
android:id="+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All fields are required."
android:layout_gravity="center"
android:layout_below="id/text1"
android:paddingTop="100dp"/>
<-- your rest of the layout -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:alignParentBottom="true"
android:layout_gravity="center"
android:layout_marginTop="50dp"
android:id="#+id/submitButton"/>
</RelativeLayout>
Make sure to configure your layout according to your requirement because LinearLayout does that automatically, but in RelativeLayout you have to do it on your own.

How to align imageview, and two text at center of screen android?

Hi I have parent layout as LinearLayout and I need to place an imageview at center and after that two textview one after another at center of screen. At bottom of the screen is an icon.
I placed everything but imageview and two textview are not aligning at center of screen. Here is 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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/bg"
android:orientation="vertical">
//this image and two textview, i need to place at center of screen
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/seat_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/on_logo"
android:layout_marginBottom="#dimen/dp_size20"
/>
<TextView
android:id="#+id/seat_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test1"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16dp"
android:gravity="center"/>
<TextView
android:id="#+id/another_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/dp_size10"
android:paddingBottom="#dimen/dp_size10"
android:text="TEst 2"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16dp"
android:gravity="center"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dp_size10">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true">
<ImageView
android:id="#+id/on_boarding_circle_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/circle_arrow" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
I really couldn't figure out what mistake I am doing in this design. ImageView, and two text are placing at top of screen and not in center of screen.
I have changed some dimensions and images, correct those and you are good to go.
try this..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:id="#+id/seat_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_marginBottom="20dp" />
<TextView
android:id="#+id/seat_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test1"
android:textAllCaps="false"
android:textSize="16dp"
android:gravity="center"/>
<TextView
android:id="#+id/another_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/dp_size10"
android:paddingBottom="#dimen/dp_size10"
android:text="TEst 2"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16dp"
android:gravity="center"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="#dimen/dp_size10">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true">
<ImageView
android:id="#+id/on_boarding_circle_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#mipmap/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<LinearLayout
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:id="#+id/seat_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
/>
<TextView
android:id="#+id/seat_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test1"
android:textAllCaps="false"
android:textColor="#color/Grey"
android:textSize="16dp"
android:gravity="center"/>
<TextView
android:id="#+id/another_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:text="TEst 2"
android:textAllCaps="false"
android:textSize="16dp"
android:gravity="center"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<ImageView
android:id="#+id/on_boarding_circle_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/acircle" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
The problem is that you are using linear layout so it is aligning the layouts one after another.So you need to use relative layout and it will work
Try this code
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/bg"
android:orientation="vertical">
//this image and two textview, i need to place at center of screen
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/seat_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/on_logo"
android:layout_marginBottom="#dimen/dp_size20"
/>
<TextView
android:id="#+id/seat_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test1"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16dp"
android:gravity="center"/>
<TextView
android:id="#+id/another_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/dp_size10"
android:paddingBottom="#dimen/dp_size10"
android:text="TEst 2"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16dp"
android:gravity="center"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dp_size10">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true">
<ImageView
android:id="#+id/on_boarding_circle_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/circle_arrow" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
The RelativeLayout at the bottom is the problem. And add android:gravity="center" to your parent LinearLayout
Just add android:gravity="center" in your root LinearLayout and remove last RelativeLayout and see
cut the 'layout_gravity' and 'gravity' parameters from child LinearLayout and paste this to Parent LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/seat_icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
Your code....
>

Android ScrollView not scrolling at all

Below is my XML code, I want the whole view to scroll, but it's just not working, please help, with what's wrong;
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/app_icon"
android:layout_marginTop="20dp"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/textView_app_version"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_gravity="center"/>
<TextView
android:id="#+id/textView_content"
android:layout_width="match_parent"
android:layout_marginTop="15dp"
android:layout_height="386dp"
android:gravity="center"></TextView>
</LinearLayout>
</ScrollView>
I've tried using,
android:fillViewport="true"
but of no help.
A ScrollView is a FrameLayout, meaning you should place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects.
So here you have to take LinearLayout or RelativeLayout and then you have to put different hierarchy of component.
Android : buttons not visible in scrollview
here i have given answer of Some problem so you can follow this for solve your problem with clearing your concept.
Try like this ,Scrolling will work till End
<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">
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/app_icon"
android:layout_marginTop="20dp"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/textView_app_version"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_gravity="center"/>
<TextView
android:id="#+id/textView_content"
android:layout_width="match_parent"
android:layout_marginTop="15dp"
android:layout_height="386dp"
android:gravity="center"/>
</LinearLayout>
</ScrollView>
</Relativelayout>
If ScrollView fits to your device screen it would not be scrollable, so make sure content inside ScrollView takes space larger than your screen size.
systematix Try this,here you getting scroll.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView_app_version1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="hello" />
<TextView
android:id="#+id/textView_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center"
android:text="fahfhahffshfs fsfhshf fshfs sflshf sflsh fhsfhslfh fshflshf hslfh slfhslfhslfhs fhslhf"></TextView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView_app_version"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="hello" />
<TextView
android:id="#+id/textView_content1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center"
android:text="fahfhahffshfs fsfhshf fshfs sflshf sflsh fhsfhslfh fshflshf hslfh slfhslfhslfhs fhslhf"></TextView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView_app_version2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="hello" />
<TextView
android:id="#+id/textView_content3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center"
android:text="fahfhahffshfs fsfhshf fshfs sflshf sflsh fhsfhslfh fshflshf hslfh slfhslfhslfhs fhslhf"></TextView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView_app_version4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="hello" />
<TextView
android:id="#+id/textView_content4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center"
android:text="fahfhahffshfs fsfhshf fshfs sflshf sflsh fhsfhslfh fshflshf hslfh slfhslfhslfhs fhslhf"></TextView>
</LinearLayout>

Text overlay over imageview in android

I am trying to have textviews overlay over imageviews. Something like this
Can someone help me with the code.
Wrap a TextView and ImageView into FrameLayout, put the TextView in FrameLayout after ImageView. Then, wrap the FrameLayout into RelativeLayout OR LinearLayout. Make some position setup (as per the needs).
<RelativeLayout>
<FrameLayout>
<ImageView />
<TextView />
</FrameLayout>
</RelativeLayout>
You can create a frame layout and within the frame layout keep an imageview and a linearlayout(with a translucent background and a textview).
The translucent color can be placed in the colors file as : #80000000
Here is a snippet :)
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:foregroundGravity="bottom"
android:orientation="vertical" >
<ImageView
android:id="#+id/ivFullScreenAd"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="8dp"
android:src="#drawable/home_page_ad" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/translucent"
android:orientation="vertical" >
<TextView
android:id="#+id/detailTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dip"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Please swipe up"
android:textColor="#color/white"
android:textIsSelectable="true"
android:textSize="20sp" />
</LinearLayout>
</FrameLayout>
I had the same problem and solved it using a custom gridView. You must apply this in getView.
Custom gridView XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_practitioner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/item_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:contentDescription="#string/contentDescriptionContent"
/>
<LinearLayout
android:id="#+id/layout_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:background="#CC515116"
android:visibility="gone"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:text="#string/text_enter_pass_password"
android:paddingBottom="7dp"
android:textSize="20sp"
/>
<EditText
android:id="#+id/edit_practitioner_pin"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#drawable/edittext_shape"
android:ems="6"
android:gravity="center"
android:inputType="numberPassword"
android:maxLength="4"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:visibility="visible"
/>
<Button
android:id="#+id/pract_button"
android:layout_width="70dp"
android:layout_height="30dp"
android:background="#drawable/buton_shape"
android:layout_marginBottom="35dp"
android:text="#string/btn_ok"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom"
android:background="#bbffffff"
android:focusable="false"
android:focusableInTouchMode="false" >
<TextView android:id="#+id/item_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:textColor="#color/text_black"
android:gravity="bottom|center"
android:textSize="20sp"
android:textAllCaps="true"
android:paddingBottom="0dp"
/>
<TextView
android:id="#+id/text_pratiotioner_group_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/sub_title_color"
android:visibility="visible"
android:gravity="bottom|center"
android:textAllCaps="true"
/>
</LinearLayout>
</FrameLayout>
Though an old question but should incase anyone is interested in the card view version of this question here you go...
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
android:layout_weight="0.5"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
android:clickable="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical"
android:layout_centerInParent="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="#89969F">
<ImageView
android:id="#+id/iv_overlay"
android:layout_width="196dp"
android:layout_height="196dp"
android:clickable="true"
android:src="#drawable/your_image"
android:layout_centerInParent="true" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#80000000"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textSize="22sp"
android:textStyle="bold"
android:gravity="center_vertical"
android:text="Settings"
android:textColor="#color/white"
android:layout_gravity="center"
android:layout_alignParentTop="false"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:padding="8dp" />
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
Please modify the layout accordingly, If you want to accommodate the images on an imageview only, then you can drop the below layout in a relative one including an imageview too.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/your_image"
android:orientation="vertical" >
<TextView
android:id="#+id/bottom_textview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<!-- layout_gravity="supply accordingly" -->
android:gravity="center"/>
</LinearLayout>

Categories

Resources