How to align 2 images left and right inside LinearLayout in android - android

I want to show two images by side by side below of google map.Image showing is working. But the image showing the same side. I want to show some text middle of the 2 two images.
The 2nd image I want to show in right side of the view, and the text in middle.
Current code
<?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:orientation="vertical">
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/bt_white">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="5dp"
android:src="#drawable/ic_menu_camera"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:text="#string/action_settings"/>
</LinearLayout>
<ImageView
android:id="#+id/imageView12"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="right"
android:src="#drawable/ic_menu_camera" />
</LinearLayout>
</LinearLayout>


Here is your 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="match_parent"
android:orientation="vertical">
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/bt_white"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_marginStart="5dp"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="First Text View"
android:textColor="#color/black" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Second Text view"
android:textColor="#color/black" />
</LinearLayout>
<ImageView
android:id="#+id/imageView12"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentRight="true"
android:src="#android:drawable/ic_menu_camera" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Here is how it looks


Add gravity center and weightSum with weights for LinearLayout as in
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity ="center" //--- add this
android:weightSum =" 3" //--add this
android:background="#color/bt_white">
<ImageView
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_marginStart="5dp"
android:layout_weight = "1" //---add this
android:src="#drawable/ic_menu_camera"/>
<LinearLayout
android:layout_width="0dp" //--0
android:layout_weight = "1" //---add this
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:text="#string/action_settings"/>
</LinearLayout>
<ImageView
android:id="#+id/imageView12"
android:layout_weight = "1" //---add this
android:layout_width="0dp" //-- make it to zero
android:layout_height="80dp"
android:gravity="right"
android:src="#drawable/ic_menu_camera" />
</LinearLayout>


Try this: Done by passing weights.
<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:orientation="vertical">
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_logo" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:text="#string/action_settings"
android:textColor="#android:color/black" />
<ImageView
android:id="#+id/imageView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_logo" />
</LinearLayout>
</LinearLayout>


replace your .xml with below code
<?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:orientation="vertical">
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/bt_white">
<ImageView
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_weight="1"
android:layout_marginStart="5dp"
android:src="#drawable/ic_menu_camera"/>
<TextView
android:layout_width="0dp"
android:layout_height="80dp"
android:gravity="center"
android:layout_weight="1"
android:textColor="#color/black"
android:text="#string/action_settings"/>
<ImageView
android:id="#+id/imageView12"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_weight="1"
android:gravity="right"
android:src="#drawable/ic_menu_camera" />
</LinearLayout>
</LinearLayout>


You can try using RelativeLayout like following-
<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:orientation="vertical">
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
ndroid:background="#fff">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentStart="true"
android:layout_marginStart="5dp"
android:src="#drawable/ic_menu_camera" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/imageView1"
android:layout_toStartOf="#+id/imageView2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:text="#string/action_settings"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:text="#string/action_settings"/>
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentEnd="true"
android:layout_marginEnd="5dp"
android:src="#drawable/ic_menu_camera" />
</RelativeLayout>
</LinearLayout>


/***You can use RelativeLayout instead of LinearLayout****/
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#+id/map">
<ImageView
android:id="#+id/imageView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_toStartOf="#+id/textView"
android:layout_toLeftOf="#+id/textView"
android:src="#drawable/ic_menu_camera"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:gravity="center"
android:text="#string/action_settings"/>
<ImageView
android:id="#+id/imageView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_toRightOf="#+id/textView"
android:layout_toEndOf="#+id/textView"
android:src="#drawable/ic_menu_camera" />
</RelativeLayout>

Related

Dividing and positioning custom layouts equally in android relative layout

This is continuation from my previous question. Layout is changed as given below:
<?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="#color/black_70_opacity"
android:weightSum="100"
tools:context="com.dell.eventapp.ui.activity.HomeActivity">
<LinearLayout
android:id="#+id/top_image"
android:layout_width="match_parent"
android:layout_height="#dimen/img_height"
android:background="#drawable/activity_background"
android:contentDescription="#string/top_image"
android:orientation="horizontal"
android:scaleType="centerCrop"
android:weightSum="25">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:paddingBottom="#dimen/margin_8dp"
android:text="#string/cio_summit_monaco_2015"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_image"
android:layout_below="#id/top_image"
android:orientation="vertical"
android:weightSum="65">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginStart="#dimen/margin_20dp"
android:layout_marginTop="#dimen/margin_30dp"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="#+id/agenda"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_weight="1"
android:background="#drawable/activity_background"
android:gravity="center|bottom"
android:paddingBottom="#dimen/margin_10dp"
android:text="#string/agenda"
android:textColor="#android:color/white"
android:textSize="#dimen/medium_font" />
<TextView
android:id="#+id/sessions"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_weight="1"
android:background="#drawable/activity_background"
android:gravity="center|bottom"
android:paddingBottom="#dimen/margin_10dp"
android:text="#string/sessions"
android:textColor="#android:color/white"
android:textSize="#dimen/medium_font" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginStart="#dimen/margin_20dp"
android:layout_marginTop="#dimen/margin_30dp"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="#+id/speaker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_weight="1"
android:background="#drawable/activity_background"
android:gravity="center|bottom"
android:paddingBottom="#dimen/margin_10dp"
android:text="#string/speakerbio"
android:textColor="#android:color/white"
android:textSize="#dimen/medium_font" />
<TextView
android:id="#+id/venues"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_weight="1"
android:background="#drawable/activity_background"
android:gravity="center|bottom"
android:layout_gravity="center"
android:paddingBottom="#dimen/margin_10dp"
android:text="#string/venues"
android:textColor="#android:color/white"
android:textSize="#dimen/medium_font" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/bottom_image"
android:layout_width="match_parent"
android:layout_height="#dimen/img_height1"
android:layout_alignParentBottom="true"
android:background="#drawable/activity_background"
android:contentDescription="#string/top_image"
android:scaleType="centerCrop"
android:weightSum="10">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:paddingBottom="#dimen/margin_8dp"
android:text="#string/home_content"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font" />
</RelativeLayout>
</RelativeLayout>
In root Relativelayout, I've used android:weightSum="100", in top Linearlayout, I've used android:weightSum="25". In 2nd LinearLayout, I've used android:weightSum="65". In nested LinearLayout, I've used android:weightSum="2". In 3rd LinearLayout, I've used android:weightSum="2". In bottom RelativeLayout, I've used android:weightSum="10". Resulting UI is as given below:
Custom layouts used aren't spaced evenly at top and bottom. How can I do that by using android:weightsum and android:layout_weight?

Please have a look. I hope it will work for you.
<?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:id="#+id/imageview_1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageview_1"
android:gravity="center"
android:text="CIO Summit Monaco 2015"
android:textColor="#000000"
android:textSize="18sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/imageview_2"
android:layout_below="#+id/imageview_1"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview_11"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
<ImageView
android:id="#+id/imageview_12"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview_21"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
<ImageView
android:id="#+id/imageview_22"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageview_2"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
</RelativeLayout>

Align 2 linear layouts and image view inside Relative layout

I am working on an android app where I want to align 2 linear layouts in a row with image view in between these 2 layouts.I am not able to use android studio layout editor to achieve this.
Code for the layout is:
<?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:background="#android:color/white"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner"
android:orientation="vertical"
android:layout_marginEnd="17dp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true">
<TextView
android:text="DEFG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView8"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView16"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/rounded_corner"
android:layout_marginEnd="30dp"
android:layout_toStartOf="#+id/profile_image">
<TextView
android:text="ABCD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView3"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView13"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<ImageView
android:id="#+id/profile_image"
android:layout_width="60dp"
android:src="#drawable/face"
android:layout_height="60dp"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"/>
</LinearLayout>
Current Output:
Expected Output:
2 linear layouts in a row with Image view at the center of a relative layout (With Green background)
Am I doing something wrong with the arrangement of layout? How to implement such scenario?

Change the RelativeLayout to LinearLayout (Horizontal)
set width to 0dp and weight to 1 thus they will have the same width. And use gravity to put things in the center
<?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:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/rounded_corner"
android:orientation="vertical"
android:layout_marginEnd="17dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:text="DEFG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView8"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView16"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<ImageView
android:id="#+id/profile_image"
android:layout_width="0dp"
android:src="#drawable/rounded_corner"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/rounded_corner"
android:layout_marginEnd="30dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:text="ABCD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView3"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView13"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"/>
</LinearLayout>

By using weight to the LinearLayout you can achieve this.
Check this code, but before copy pasting learn the logic of weight in LinearLayout:
<?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:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#ffffff"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/rounded_corner" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="DEFG" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView8"
android:layout_centerHorizontal="true"
android:text="TextView"
android:textColorLink="?attr/colorBackgroundFloating"
android:textSize="30sp"
tools:text="1250" />
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:gravity="center">
<ImageView
android:id="#+id/profile_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:src="#drawable/face" />
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/rounded_corner" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="ABCD" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView3"
android:layout_centerHorizontal="true"
android:text="TextView"
android:textColorLink="?attr/colorBackgroundFloating"
android:textSize="30sp"
tools:text="1250" />
</RelativeLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp" />
</LinearLayout>

what is the name of this part of android screen?

first : what is official name of the black bar at bottom of the screen ?
second :
i have two layout merged together problem is part of my second layout will hide behind this bar there is red bar behind this but is hidden this problem is in those devices has this bar
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_opina" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginRight="16dp"
android:layout_marginBottom="52dp"
android:src="#drawable/ic_add_24dp" />
<?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"
android:paddingTop="5dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="opina.android.ri4n.sir.opina.Opina"
tools:showIn="#layout/activity_opina">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shadow"
android:layout_margin="5dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:padding="5dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/avator"
android:layout_margin="10dp" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.8">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="20dp"
android:hapticFeedbackEnabled="false"
android:layout_marginTop="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Username ..."
android:id="#+id/username"
android:textColor="#000000"
android:gravity="center_vertical" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="15dp"
>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Question ... "
android:id="#+id/question"
android:textColor="#757575"
android:gravity="center_vertical" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.2">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="2W"
android:id="#+id/textView"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingRight="5dp"
android:paddingLeft="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="There is no such attribute in Android, to show a shadow. But possible ways to do it ... Have a 9-patch image with a shadow and set it as the background to your"
android:id="#+id/textView2" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="40dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="70dp"
android:layout_height="match_parent">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:id="#+id/imageView"
android:src="#drawable/ic_favorite_24dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="124"
android:textSize="12dp"
android:id="#+id/textView3"
android:gravity="left|center_vertical" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="70dp"
android:layout_height="match_parent">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:id="#+id/imageView2"
android:src="#drawable/gesture"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="124"
android:textSize="12dp"
android:id="#+id/textView4"
android:gravity="left|center_vertical" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="70dp"
android:layout_height="match_parent">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:id="#+id/imageView3"
android:src="#drawable/ic_comment_24dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="124"
android:textSize="12dp"
android:id="#+id/textView5"
android:gravity="left|center_vertical" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="70dp"
android:layout_height="match_parent">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:id="#+id/imageView4"
android:src="#drawable/ic_visibility_24dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="124"
android:textSize="12dp"
android:id="#+id/textView6"
android:gravity="left|center_vertical" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/bshadow"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:orientation="horizontal"
android:background="#d2d2d2">
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="#+id/imageView10"
android:layout_gravity="center"
android:src="#drawable/ic_home_24dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="#+id/imageView11"
android:layout_gravity="center"
android:src="#drawable/ic_dns_24dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="#+id/imageView12"
android:layout_gravity="center"
android:src="#drawable/ic_notifications_24dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="#+id/imageView13"
android:layout_gravity="center"
android:src="#drawable/ic_people_24dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Android Navigation Buttons. You can also able to change it's color or hide/show them

The Name of this bar is "Navigation Bar"

How to align TextView in image center

I am try to display a textview in image center, but not working in LinearLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/kurtis"
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5"
android:scaleType="fitXY"
android:src="#mipmap/kurtis" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing" />
<ImageView
android:id="#+id/salwars"
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_marginLeft="10dp"
android:layout_weight="0.5"
android:scaleType="fitXY"
android:src="#mipmap/salwar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
Any one have idea please help me.
I edited my question, this is my problem.

You could, for example, use RelativeLayout to center your TextView over the ImageView:
<?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="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5">
<ImageView
android:id="#+id/kurtis"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/salwar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5">
<ImageView
android:id="#+id/salwars"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/salwar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
</RelativeLayout>
</LinearLayout>

You can use FrameLayout for that. It centers all its childs, like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal">
<FrameLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_marginRight="10dp"
android:layout_weight="1">
<ImageView
android:id="#+id/kurtis"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#mipmap/kurtis" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Testing"
android:textSize="18sp" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="1">
<ImageView
android:id="#+id/salwar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#mipmap/salwar" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Testing"
android:textSize="18sp" />
</FrameLayout>
</LinearLayout>

Showing Loading Bar lib

Hi there I am trying to use this lib into my app
https://github.com/jlmd/AnimatedCircleLoadingView
I want it to on top of that layout, can someone please show me ho it is done?
I trying adding it but it either covered the whole screen or it would occupy a part of layout completly
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="match_parent"
android:background="#color/postBg"
android:orientation="vertical"
tools:ignore="ContentDescription">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar"/>
<LinearLayout
android:id="#+id/newStatusHeader"
style="#style/newStatusHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/postOwnerImage"
android:layout_width="60dp"
android:layout_height="60dp"/>
<LinearLayout
android:id="#+id/headerInfoContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:orientation="vertical"
android:padding="#dimen/postsItemMargin">
<TextView
android:id="#+id/postOwnerName"
style="#style/postOwnerName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/postPrivacy"
style="#style/postPublishDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/publicPrivacy"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#E9E9E9"/>
<LinearLayout
android:id="#+id/newStatusBody"
style="#style/newStatusBody"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white"
android:orientation="vertical">
<ImageView
android:id="#+id/imagePreview"
android:layout_width="match_parent"
android:layout_height="170dp"
android:scaleType="centerCrop"
android:visibility="gone"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.jlmd.animatedcircleloadingview.AnimatedCircleLoadingView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/circle_loading_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
app:mainColor="#color/primaryColor"
app:secondaryColor="#color/primaryColorDark"
android:layout_gravity="top" />
</LinearLayout>
<EditText
android:id="#+id/statusEdittext"
style="#style/statusEditText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="top|left"
android:hint="#string/urStatus"
android:inputType="textMultiLine"
android:padding="5dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:id="#+id/placePreviewLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/ic_place_black"/>
<TextView
android:id="#+id/placeValuePreview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Rue Ibn ElArabi, Agadir 80000, Morocco"
android:textColor="#color/primary_high_light"/>
<TextView
android:id="#+id/removePlace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="4dp"
android:textStyle="bold"
android:textColor="#android:color/holo_red_light"
android:text="X"/>
</LinearLayout>
<LinearLayout
android:id="#+id/urlPreviewLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/ic_insert_link_black"/>
<TextView
android:id="#+id/urlValuePreview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="https://www.atouchlab.com"
android:textColor="#color/primary_high_light"/>
<TextView
android:id="#+id/removeLink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="4dp"
android:textStyle="bold"
android:textColor="#android:color/holo_red_light"
android:text="X"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#E9E9E9"/>
<LinearLayout
android:id="#+id/newStatusFooter"
style="#style/newStatusFooter"
android:layout_width="match_parent"
android:layout_height="65dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="65dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/addPhoto"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_camera_button"
android:layout_gravity="center" />
<ImageButton
android:id="#+id/addPlace"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_place_button"
android:layout_gravity="center" />
<ImageButton
android:id="#+id/addLink"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_insert_link_button"
android:layout_gravity="center" />
<ImageButton
android:id="#+id/changePrivacy"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_privacy_button"
android:layout_gravity="center" />
</LinearLayout>
<ImageButton
android:id="#+id/sendStatus"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_publish_button"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
lib layout
<com.github.jlmd.animatedcircleloadingview.AnimatedCircleLoadingView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/circle_loading_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#color/background"
android:layout_centerInParent="true"
app:mainColor="#color/main_color"
app:secondaryColor="#color/secondary_color"
/>

Your problem can be solved using an relative layout that wraps the view where you want the LoadingView to be on top of, ex:
<RelativeLayout>
<com.github.jlmd.animatedcircleloadingview.AnimatedCircleLoadingView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/circle_loading_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
app:mainColor="#color/primaryColor"
app:secondaryColor="#color/primaryColorDark"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/circle_loading_view">
//the view on top of witch the loading bar should be
</LinearLayout>
</RelativeLayout>

Categories

Resources