Android layout design : Using LinearLayout and Relative layout - java

I want to have a layout exactly similar to one below in image.
I've tried the below code but it is not coming.
Can someone help me in getting this layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip" >
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Ali Connors"
android:textSize="12sp" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/firstLine"
android:gravity="center_vertical"
android:text="Brunch this weekend?"
android:textSize="16sp" />
<TextView
android:gravity="right"
android:id="#+id/rightTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="15m"
android:textSize="16sp" />
</RelativeLayout>

try the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#ED262A" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp">
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="26dp"
android:layout_alignParentLeft="true"
android:layout_marginTop="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Ali Connors"
android:textSize="18sp" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/firstLine"
android:gravity="center_vertical"
android:text="Brunch this weekend?"
android:textSize="15sp" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/secondLine"
android:drawablePadding="6dp"
android:drawableRight="#android:drawable/star_off"
android:gravity="center_vertical"
android:text="I will be in the place"
android:textColor="#A4A18E"
android:textSize="14sp" />
<TextView
android:id="#+id/rightTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_alignParentRight="true"
android:gravity="top|right"
android:text="15m"
android:textSize="16sp" />
</RelativeLayout>
</LinearLayout>

Try this.
<TextView
android:text="15m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/rightTime"
android:textSize="16sp"/>

Design your Layout as below:
<?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="vertical">
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#FF4081" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/rightTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="15m"
android:textSize="14sp"
android:textColor="#727272"/>
<TextView
android:id="#+id/firstLine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/rightTime"
android:layout_marginRight="8dp"
android:maxLines="1"
android:ellipsize="end"
android:text="Ali Connors"
android:textSize="16sp"
android:textColor="#000000"/>
<TextView
android:id="#+id/secondLine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/firstLine"
android:layout_marginTop="2dp"
android:text="Brunch this weekend?"
android:textSize="16sp"
android:textColor="#000000"
android:maxLines="1"
android:ellipsize="end" />
<ImageView
android:id="#+id/image_star"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_below="#id/secondLine"
android:layout_alignParentRight="true"
android:background="#android:drawable/star_big_off" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/secondLine"
android:layout_toLeftOf="#id/image_star"
android:layout_marginTop="4dp"
android:layout_marginRight="16dp"
android:text="I will be in your neighborhood doing some errands....."
android:textColor="#727272"
android:textSize="14sp"
android:maxLines="1"
android:ellipsize="end" />
</RelativeLayout>
</LinearLayout>
Output:

Related

how to center crop a background image of linear layout?

Hi i had to make a layout with card with recyclerview so for that i set an image as a background to linear layout but now i'm unable to center crop that image
My problem is that i cannot use imageview because using that the height of card increases as well and i don't want that so please if someone can assit me..
my xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/primary_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="19dp"
android:layout_marginRight="19dp"
android:layout_marginTop="15dp"
app:cardCornerRadius="115dp">
<ImageView
android:id="#+id/background_image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone" />
<LinearLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:background="#drawable/club1"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:src="#drawable/ellipse" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="John Doe"
android:textColor="#color/White"
android:textSize="15sp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="checked in to"
android:textColor="#color/White"
android:textSize="10sp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/third_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="W south"
android:textColor="#color/White"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/fourth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="9dp"
android:text="beach mumbai"
android:textColor="#color/White"
android:textSize="15sp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/fifth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/second_text"
android:layout_toRightOf="#+id/fourth_text"
android:text="30 mins ago."
android:textColor="#color/White"
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="85dp">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/sixth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:padding="10dp"
android:text="reply to abc............"
android:textColor="#color/White" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/favourite_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_favorite_border_black_24dp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/seventh_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text="40 likes"
android:textColor="#color/White" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
You can't center crop a background image of linear layout,
But you can achieve the same using these changes:
Replace you LinearLayout with RelativeLayout
Place a ImageView as a first child inside relative layout and use property for center crop.
<RelativeLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical">
<ImageView
android:scaleType="centerCrop"
android:src="#drawable/club1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
.....
......
</RelativeLayout>
If you Want to control The Image View Scale
you need to put it in ImageView As Src Not Background
You can use Frame layout To Achieve it
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/primary_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="19dp"
android:layout_marginRight="19dp"
android:layout_marginTop="15dp"
app:cardCornerRadius="115dp">
<ImageView
android:id="#+id/background_image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="210dp">
<ImageView
android:layout_width="match_parent"
android:src="#mipmap/ic_launcher"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/profile_image"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:src="#drawable/playstore_icon" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<TextView
android:id="#+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="John Doe"
android:textSize="15sp" />
<TextView
android:id="#+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="checked in to"
android:textSize="10sp" />
<TextView
android:id="#+id/third_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="W south"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/fourth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="9dp"
android:text="beach mumbai"
android:textSize="15sp" />
<TextView
android:id="#+id/fifth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/second_text"
android:layout_toRightOf="#+id/fourth_text"
android:text="30 mins ago."
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="85dp">
<TextView
android:id="#+id/sixth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:padding="10dp"
android:text="reply to abc............"
android:textColor="#color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/favourite_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_close" />
<TextView
android:id="#+id/seventh_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text="40 likes"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
CenterCrop logic is baked inside ImageView. The correct solution is to extract it into a Drawable which wraps another Drawable and centerCrops it.
If you use CoordinatorLayout, then just to put your ImageView with centerCrop parameter to top.
<CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:scaleType="centerCrop"
android:background="#drawable/background_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<include layout="#layout/header_main" />
<TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
android:background="#drawable/white_border_background"
app:tabIndicatorHeight="3dp"/>
</AppBarLayout>
<ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</CoordinatorLayout>

How do you arrange ImageViews and TextViews dynamically to Linear Layout in Android?

I've got a fragment from which users select features their rooms have (fig.1 below) and these are stored in the back-end as boolean values i.e. true if set and false otherwise.
The XML for the fragment:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
<!-- none core xml formatting and views -->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:weightSum="1"
android:layout_gravity="center_horizontal"
android:background="#drawable/border_bottom_top"
android:id="#+id/details_amenities_layout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_bic_imageview"
android:src="#mipmap/ic_bic"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_bic_amenity"
android:id="#+id/add_room_bic_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_below="#+id/add_room_bic_imageview" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_entrance_imageview"
android:src="#mipmap/ic_entrance"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_entrance_amenity"
android:id="#+id/add_room_entrance_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_toilet_imageview"
android:src="#mipmap/ic_toilet"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_toilet_amenity"
android:id="#+id/add_room_toilet_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_kitchen_imageview"
android:src="#mipmap/ic_kitchen"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_kitchen_amenity"
android:id="#+id/add_room_kitchen_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false"
android:layout_marginTop="8dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_parking_imageview"
android:src="#mipmap/ic_parking"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_parking_amenity"
android:id="#+id/add_room_parking_label"
android:textSize="16sp"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/add_room_parking_imageview" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_wifi_imageview"
android:src="#mipmap/ic_wi_fi"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_wifi_amenity"
android:id="#+id/add_room_wifi_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_secure_imageview"
android:src="#mipmap/ic_secure"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_secure_amenity"
android:id="#+id/add_room_secure_label"
android:textSize="16sp"
android:gravity="center"
android:layout_below="#+id/add_room_secure_imageview"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/add_room_furnished_imageview"
android:src="#mipmap/ic_furnished"
style="#style/amenities_image_style"
android:layout_width="wrap_content"
android:layout_height="38dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_furnished_amenity"
android:id="#+id/add_room_furnished_label"
android:textSize="16sp"
android:gravity="center"
android:layout_below="#+id/add_room_furnished_imageview"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false"
android:layout_marginTop="5dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_borehole_imageview"
android:src="#mipmap/ic_borehole"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_borehole_amenity"
android:id="#+id/add_room_borehole_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_prezesa_imageview"
android:src="#mipmap/ic_zesa"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_zesa_amenity"
android:id="#+id/add_room_prezesa_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/add_room_prezesa_imageview"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_wardrobe_imageview"
android:src="#mipmap/ic_wardrobe"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_wardrobe_amenity"
android:id="#+id/add_room_wardrobe_label"
android:textSize="16sp"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingTop="5dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="38dp"
android:id="#+id/add_room_prewater_imageview"
android:src="#mipmap/ic_prewater"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/add_room_water_amenity"
android:id="#+id/add_room_prewater_label"
android:textSize="16sp"
android:gravity="center"
android:layout_below="#+id/add_room_prewater_imageview"
android:layout_alignRight="#+id/add_room_prewater_imageview"
android:layout_alignEnd="#+id/add_room_prewater_imageview"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<!-- none core views -->
<android.support.design.widget.FloatingActionButton android:id="#+id/add_room_step3_fab"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="end"
android:src="#mipmap/ic_done_white_48dp"
android:layout_marginBottom="#dimen/fab_margin" />
</LinearLayout>
</ScrollView>
Naturally the selected features differ thus the number of views is not constant obtained from the back-end. I am able to retrieve the set features and instantiate the correct views in Java i.e. if there are 5 set features comprising BIC, Wifi, Kitchen etc, I am able to determine these and set the necessary Image resources and Text.
Question now is how do I arrange the views obtained to replicate the layout above using Java code as I can only know the features set after querying the back-end. Desired end result has to look like the image below. Hope it makes sense.

Android Listview SecondLine row

Im new to android development and trying to learn what i don't
get is how i can style the XML below.
All tips and help are very welcome.
I have the following ListView XML
I want to create the following XML
Current XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/LOC_IMAGE"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:width="38dp"
android:gravity="left"
android:src="#drawable/ondergrondse2" />
<TextView
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:width="60dp"
android:gravity="center"
android:id="#+id/LOC_CODE" />
<TextView
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:width="60dp"
android:gravity="center"
android:id="#+id/LOC_FRACTIE" />
<TextView
android:id="#+id/LOC_NAME"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Niet aanwezig"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textSize="15dp"
android:width="330dp"
android:layout_marginRight="20dp" />
</LinearLayout>
I want the LOC_NAME TextView under the others ImageVIew And TextView like the picture below
Why downvoting im trying to learn something
You need nested linearlayouts, try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/LOC_IMAGE"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:width="38dp"
android:gravity="left"
android:src="#drawable/ondergrondse2" />
<TextView
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:width="60dp"
android:gravity="center"
android:id="#+id/LOC_CODE" />
<TextView
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:width="60dp"
android:gravity="center"
android:id="#+id/LOC_FRACTIE" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/LOC_NAME"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Niet aanwezig"
android:layout_marginTop="10dp"
android:layout_marginLeft="35dp"
android:textSize="15dp"
android:width="330dp"
android:layout_marginRight="20dp" />
</LinearLayout>
</LinearLayout>
Do like this,just nest the widget
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_height="fill_parent">``
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView01"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:gravity="left"
android:src="#drawable/ondergrondse2"
android:width="38dp" />
<TextView
android:id="#+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="0"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:width="60dp" />
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="0"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:width="60dp" />
</LinearLayout>
<TextView
android:id="#+id/LOC_NAME"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:text="Niet aanwezig"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="15dp"
android:width="330dp" />
</LinearLayout>
</LinearLayout>
LinearLayouts Order ther ChildViews in a linear way if you want them to be ordererd Verticaly you should change the android:orientation="horizontal"
to android:orientation="vertical", this wil align your views verticaly from top to bottom so to achieve what you want tou shoud do this
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/LOC_IMAGE"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:width="38dp"
android:gravity="left"
android:src="#drawable/ondergrondse2" />
<TextView
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:width="60dp"
android:gravity="center"
android:id="#+id/LOC_CODE" />
<TextView
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:width="60dp"
android:gravity="center"
android:id="#+id/LOC_FRACTIE" />
</LinearLayout>
<TextView
android:id="#+id/LOC_NAME"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Niet aanwezig"
android:layout_marginTop="10dp"
android:layout_marginLeft="35dp"
android:textSize="15dp"
android:width="330dp"
android:layout_marginRight="20dp" />
</LinearLayout>

Scale imageview on tablet with original aspect

I have the code below and I face a problem with the image view "#+id/logo_skilfull" because it does not keep the aspect.. I think is because of the scaleType or the adjustViewBounds..
image in tablet
image in a phone (I want this)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:keepScreenOn="true" >
<View
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/view2"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="#drawable/registration_background"
android:orientation="vertical"
android:padding="25dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/member_login_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:text="Ingresá tu DNI"
android:textSize="25dp"
android:textStyle="bold"
android:typeface="monospace" />
<EditText
android:id="#+id/username_edtext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/member_login_tv"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:background="#drawable/register_uname"
android:gravity="center"
android:hint="Documento"
android:imeOptions="actionDone"
android:inputType="number"
android:singleLine="true"
android:textColor="#000000"
android:textSize="30dp"
android:textStyle="bold" />
<Button
android:id="#+id/login_button"
style="#style/button_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/username_edtext"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:background="#drawable/button_access"
android:text="Aceptar"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/logo_skilfull"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/logos"
android:scaleType="matrix"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</LinearLayout>
<View
android:id="#+id/view2"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true" />
<ImageView
android:id="#+id/view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="#drawable/member_imview" />
</RelativeLayout>
You should read about the ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
This is a problem changing the size of the View. You need to set scaleType.
Try fitStart.
<ImageView
android:id="#+id/logo_skilfull"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/logos"
android:scaleType="fitStart"
android:layout_alignParentBottom="true" />

ImageView not displayed into layout

i have a problem with a layout. I'm using SlidingUpPanel and i would like to jave an ImageView below a TextView. The code is this.
<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:fitsSystemWindows="true">
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/panel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="70dp"
sothree:shadowHeight="4dp"
sothree:paralaxOffset="100dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.simonedev.player.utils.PagerSlidingTabStrip
android:id="#+id/pagerTabStrip"
android:layout_width="match_parent"
android:layout_height="50dip"
android:background="#drawable/my_drawable"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/pagerTabStrip"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eeeeee"
android:orientation="vertical">
<ImageView
android:id="#+id/myImage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="20dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_action_im"/>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentLeft="true"
android:fontFamily="sans-serif-condensed"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit ="marquee_forever"
android:focusable="true"
android:focusableInTouchMode="true"
android:scrollHorizontally="true"
android:textSize="18sp"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_below="#+id/text1"
android:fontFamily="sans-serif-light"
android:textSize="15sp"/>
<RelativeLayout
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="25dp"
android:layout_marginStart="25dp"
android:layout_marginBottom="75dp"
android:textSize="17sp"
android:text="0:00"/>
<SeekBar
android:id="#+id/seekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginRight="55dp"
android:layout_marginEnd="55dp"
android:layout_marginBottom="70dp"
android:layout_toRightOf="#+id/text3"
android:layout_toEndOf="#+id/text3"
android:layout_alignParentBottom="true"
android:max="100"/>
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="22dp"
android:layout_marginEnd="22dp"
android:layout_marginBottom="75dp"
android:textSize="17sp"/>
<ImageView
android:id="#+id/myImage2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="20dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_action_im2"
android:layout_below="#+id/text4"/>
</RelativeLayout>
</RelativeLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
</RelativeLayout>
Now, the problem is that myImage2 is not displayed when i run my app and i don't understand why. Where is the error? How can i solve?
Your image is outside the display
<ImageView android:id="#+id/myImage2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignRight="#+id/seekBar"
android:layout_alignTop="#+id/text3"
android:layout_marginEnd="10dp"
android:layout_marginRight="121dp"
android:layout_marginTop="20dp"
android:src="#drawable/ic_action_im2" />
Just check with above code

Categories