Creating an overlay in Android studio - android

I'm currently making an Android app and I'm seeking inspiration in the picture as seen below. I'm trying to create the overlay in the top right corner of the first device in the picture and I have no idea how it is done.

Use alpha property
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:background="#FFFF33"
android:layout_width="match_parent"
android:layout_height="200dp">
<TextView
android:textAlignment="textEnd"
android:text="Sample Text View Sample Text View Sample Text View"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<RelativeLayout
android:alpha="0.5"
android:background="#color/colorPrimary"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_width="100dp"
android:layout_height="200dp">
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
The output will be like
*********** EDITED AS PER OP'S REQUIREMENT ***********
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:background="#FFFF33"
android:layout_width="match_parent"
android:layout_height="200dp">
</LinearLayout>
<RelativeLayout
android:alpha="0.5"
android:background="#color/colorPrimary"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_width="100dp"
android:layout_height="200dp">
</RelativeLayout>
<TextView
android:textAlignment="textEnd"
android:text="Sample Text View Sample Text View Sample Text View"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>

add two layout one for background and another for top of it.
then add top layout background color white transparent.
example XML layout given below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#c11316">
<TextView
android:text="25"
android:textColor="#ffffff"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="30dp"
android:textSize="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginEnd="150dp"
android:background="#33e4e4e4">
<TextView
android:text="Your Things"
android:textColor="#ffffff"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textSize="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

Related

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.

set background color as white of recyclerview and divider line's color as same as background image

I am new in android app development.I am making a project in android-studio. I want to set color of listview as white and divider line's color as same as background image.My code is below
activity_main.xml
<?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"
android:background="#android:color/transparent"
tools:context="com.example.litifer.litiferdemo.MainActivity">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:src="#drawable/images1"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView</android.support.constraint.ConstraintLayout>
list_item.xml
<?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.support.v7.widget.CardView
android:layout_margin="#dimen/cardview_default_radius"
android:layout_width="match_parent"
android:background="#FFFFFF"
android:layout_height="wrap_content"></android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textViewHead"
android:text="Heading"
android:textSize="20dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="40dp"
android:textAppearance="#android:style/TextAppearance.Large"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textViewDesc"
android:layout_marginTop="10dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="40dp"
android:text="Description"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="40dp"
android:id="#+id/textViewDate"
android:text="Date"/>
</LinearLayout></LinearLayout>
you can do using itemdecoration like as link attached link
or
you can add view at last to your layout
<View
android:layout_width="match_parent"
android:layout_height="#dimen/normal_margin1"
android:layout_marginTop="#dimen/normal_margin8"
android:background="#color/black12" />

How do I get an imageView and textview to both fill the layout when setting bitmap programmatically?

What I want is for qrcodetext to fit and display all the text in qrcode_layout and have qrimageView to fill the rest of qrcode_layout? But my layout below has the entire qrimageView cover qrcode_layout. I tried a bunch of other variations but without success.
Here is what it looks like.
Here is what I want it to look like.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:id="#+id/qrcodelayout">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/qrimageView"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/qrcodetext"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="4dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</RelativeLayout>
Use following code. Align your textview to bottom and then align your Qrcode Image above text:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/qrcodetext"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_marginTop="4dp" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/qrimageView"
android:layout_gravity="center_horizontal"
android:layout_above="#id/qrcodetext"
android:layout_alignParentTop="true"
android:layout_marginTop="8dp" />
</RelativeLayout>
I think what i have understand you want is below: Plz check and tell me:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:id="#+id/qrcodelayout">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/qrcodetext"
android:gravity="center"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="4dp" />
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/qrimageView"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp" />
</LinearLayout>
</LinearLayout>
<!--<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>-->
</RelativeLayout>

android layout image at left and two text block at right

I want a layout like this
Layout where an image at the bottom and two text block at right
It's a very simple layout with an image at left and two text blocks at right. I know how to do this in html and CSS but no idea how to do this in XML. What are the properties to float elements left or right? Right now if I add an image and two text blocks, the second text block is not shown.
Try this code, I've tested it:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"/>
</LinearLayout>
<?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="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent" />
</LinearLayout>
Edit it on your own :)
You can use a relative layout for this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ImageView android:id="#+id/img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/ic_clear"/>
<TextView android:id="#+id/text1"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/img"
android:layout_toRightOf="#+id/img"
android:layout_width="match_parent"
android:text="text 1"/>
<TextView android:layout_below="#+id/text1"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/img"
android:layout_toRightOf="#+id/img"
android:layout_width="match_parent"
android:text="text 2"/>
</RelativeLayout>

How to put Text View above the Image and at the bottom of Layout

I have tried almost everything from Gravity to alignParentTop and layout_above but nothing seems to be working here.
I have an ImageView and a TextView I am using ViewPager to display different images and their respective text.
The Problem is that, its displaying Text at the top and image after it.
I want it to display Image and beneath it display TextView.
This is what i am getting after adding following xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<TextView
android:id="#+id/image_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Image Text"
/>
</RelativeLayout>
Kindly guide me how to put Text after the Image
Try this it may help you
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="300sp"
android:src="#drawable/wallpaper"
android:scaleType="centerCrop"
android:id="#+id/imageView" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is test"
android:textColor="#000"
android:textSize="20dp"
android:gravity="center"
android:layout_alignBottom="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
Using the android:layout_below attribute should solve your problem:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<TextView
android:id="#+id/image_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_below="#+id/image_view"
android:text="Image Text"
/>
</RelativeLayout>
Add android:layout_below="#+id/image_view" in your TextView
Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="200dp"
/>
<TextView
android:id="#+id/image_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/image_view"
android:paddingBottom="8dp"
android:text="Image Text"
/>
</RelativeLayout>
Hope it helps you!!
You can define this structure tow way, first one define Textview property android:layout_below as ImageView id like bellow
<?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:orientation="vertical">
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<TextView
android:id="#+id/image_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/image_view"
android:layout_gravity="bottom"
android:text="Image Text" />
</RelativeLayout>
And other one use LineLinearLayout and define orientation vertical like following
<?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">
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<TextView
android:id="#+id/image_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Image Text" />
</LinearLayout>

Categories

Resources