CardView内的圆角底部TextView

时间:2016-02-26 08:08:40

标签: android xml android-layout material-design android-cardview

我使用CardView显示列表项,其中每个列表项包含两个文本视图,即 - 现在预订/书籍和详细信息/详细信息。

我想要实现圆形底部TextView,但是要获得矩形形状

enter image description here

我必须设计这样的东西:

enter image description here

这是我的XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:layout_margin="5dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="2dp">

        <LinearLayout
            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:layout_weight="1">

                .......

            <LinearLayout
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:orientation="horizontal"
                android:layout_marginTop="5dp"
                android:background="@color/more"
                android:layout_weight="1">

                <TextView
                    android:id="@+id/btnBook"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:text="BOOK"
                    android:textColor="@android:color/background_light"
                    android:padding="5dp"
                    android:background="@null"
                    android:textAppearance="?android:textAppearanceMedium"
                    android:gravity="center" />

                <TextView
                    android:id="@+id/btnDetail"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:text="DETAILS"
                    android:background="@null"
                    android:textColor="@android:color/background_light"
                    android:padding="10dp"
                    android:textAppearance="?android:textAppearanceMedium"
                    android:gravity="center" />

            </LinearLayout>

        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

我必须做出改变才能完成任务?

5 个答案:

答案 0 :(得分:1)

您必须在drawable文件夹中为此创建选择器。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
      <shape 
        android:shape="rectangle">
            <stroke android:width="2dp" android:color="@color/more" />
            <dotted android:color="#00FF0000" />
            <padding android:bottom="1dp"/>
        </shape>
   </item>
</layer-list>

然后将背景设置为您的视图。使用此

android:background="@drawable/corner_selector"

而不是

android:background="@color/more"

答案 1 :(得分:1)

在可绘制文件夹中创建文件rounded_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >         
<stroke
      android:width="1dp"
      android:color="@color/common_border_color" />

<solid android:color="#fff" />

<padding
       android:left="1dp"
       android:right="1dp"
       android:top="1dp" />

<corners android:radius="5dp" />
</shape>

并将其保留为线性布局的背景

<LinearLayout
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
            android:background="@drawable/rounded_border"
            android:layout_weight="1">

答案 2 :(得分:1)

将此背景设置为包含LinearLayout

textViews
<item>    
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <corners android:bottomLeftRadius="cardview_corner_radius_value"
                android:bottomRightRadius="cardview_corner_radius_value" />
        </shape>
    </item>

并将background TextView添加为透明

答案 3 :(得分:0)

     1. make button.xml file and put it in drawable folder
     <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_pressed="true" >
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#5e7974" />
             <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
         </shape>
     </item>
    <item android:state_focused="true">
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#5e7974" />
             <solid android:color="#58857e"/>       
         </shape>
     </item>  
    <item >
        <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#5e7974" />
             <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
         </shape>
     </item>
    </selector>
2. then change your xml background of Linearlayout 
 android:background="@color/more"
to 
android:background="@drawable/button"

答案 4 :(得分:0)

尝试使用这种最简单的方法来完成布局 here are the pic for example

 <?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" >

<Button 
    android:id="@+id/btn"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/btnbackground"
    android:layout_margin="20dp"
    android:text="My Profile"
    />

 </LinearLayout>

之后在可绘制文件夹btnbackground.xml中创建一个xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/llabeforeclick3" 
    android:state_pressed="true"/>
<item android:drawable="@drawable/llaafterclick3"/>

</selector>

然后在drawable目录中创建另一个llabeforeclick3.xml

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle" >

    <solid android:color="#19384A" >
    </solid>

     <corners
     android:bottomLeftRadius="10dp"
     android:bottomRightRadius="10dp"
     android:topRightRadius="10dp"
     android:topLeftRadius="10dp" /> 

 <stroke
    android:width="0dp"
    android:color="#19384A" /> 

<padding
    android:left="4dp"
    android:top="4dp"
    android:right="4dp"
    android:bottom="4dp"
    android:color="#19384A" />     
</shape>

之后在drawable中创建另一个xml llaafterclick3.xml

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >
     //background color

    <solid android:color="#204A60" >
    </solid>

  <corners
     android:bottomLeftRadius="10dp"
     android:bottomRightRadius="10dp"
     android:topRightRadius="10dp"
     android:topLeftRadius="10dp" />
        //before clicked

  <gradient
     android:angle="45"
     android:centerColor="#204A60"
     android:centerX="20"
     android:centerY="20"
     android:endColor="#204A60"
     android:gradientRadius="25"
     android:startColor="#204A60" />

</shape>

如果某个伙伴想要制作更圆角,那么使用增加

的大小
     android:bottomLeftRadius="10dp"
     android:bottomRightRadius="10dp"
     android:topRightRadius="10dp"
     android:topLeftRadius="10dp"

在这里解决你的颜色代码取决于你需要只使用颜色代码而且非常好。